rnc
react-native-cards
npm i react-native-cards
rnc

react-native-cards

A highly customizable material design card component for React Native

by Dale French

1.1.4 (see all)License:MITTypeScript:Not Found
npm i react-native-cards
Readme

React Native Cards

npm version npm downloads PRs Welcome

A highly customizable material design card component for React Native.

See Google Material Design for more info on Cards.

Images

Get Started

Installation

Install using npm:

npm install --save react-native-cards

or install using Yarn

yarn add react-native-cards

Basic Usage

Import the components like so:

import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-cards';

Then insert the card in your code:

<ScrollView>

  <Card>
    <CardImage 
      source={{uri: 'http://bit.ly/2GfzooV'}} 
      title="Top 10 South African beaches"
    />
    <CardTitle
      subtitle="Number 6"
    />
    <CardContent text="Clifton, Western Cape" />
    <CardAction 
      separator={true} 
      inColumn={false}>
      <CardButton
        onPress={() => {}}
        title="Share"
        color="#FEB557"
      />
      <CardButton
        onPress={() => {}}
        title="Explore"
        color="#FEB557"
      />
    </CardAction>
  </Card>

</ScrollView>

Card Component Options

PropTypeEffectDefault Value
isDarkbooleanIf the card background is dark, sets a light text color, this prop is passed to all child componentstrue
mediaSourceobjectThe image to show in background of a card, with content overlayed, passed to Image's source propundefined
avatarSourceobjectThe avatar image to be shown in the card's content or header section, whichever comes first, passed to Image's source propundefined
styleobjectThe style object to be merged with the default styleundefined

CardTitle Component Options

PropTypeEffectDefault Value
titlestringThe title textundefined
subtitlestringThe subtitle textundefined
subtitleAbovebooleanWhether the subtitle should be shown above the titlefalse
avatarSourceobjectThe avatar image to be shown, passed to Image's source propundefined
styleobjectThe style object to be merged with the default styleundefined

CardContent Component Options

PropTypeEffectDefault Value
textstringThe content textundefined
avatarSourceobjectThe avatar image to be shown, passed to Image's source propundefined
styleobjectThe style object to be merged with the default styleundefined

CardImage Component Options

PropTypeEffectDefault Value
sourceobjectThe image to be shown, passed to Image's source propundefined
styleobjectThe style object to be merged with the default styleundefined
resizeModestringDetermines how to resize the image when the frame doesn't match the raw image dimensionscover
resizeMethodstringResize the image when the image's dimensions differ from the image view's dimensions.resize

CardAction Component Options

PropTypeEffectDefault Value
separatorbooleanWhether a separator should be showntrue
inColumnbooleanWhether the buttons should be stacked in a columnfalse
styleobjectThe style object to be merged with the default styleundefined

CardButton Component Options

PropTypeEffectDefault Value
titlestringThe button's textundefined
colorstringThe color of button textorange
onPressfunctionThe function to be called when button is pressednoop (defined in src/utils)
styleobjectThe style object to be merged with the default styleundefined

Todo (PRs welcome!)

  • Add side media to cards - see here

Downloads/wk

58

GitHub Stars

21

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.1.4
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate