Home

Awesome

react-native-material-cards

A material design card component, customizable and versatile.

Images

See Google Material Design for more info on Cards.

Installation

npm install --save react-native-material-cards

Basic Usage

Import the components like so:

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

Then insert the card in your code:

<Card>
  <CardImage 
    source={{uri: 'http://placehold.it/480x270'}} 
    title="Above all i am here"
  />
  <CardTitle 
    title="This is a title" 
    subtitle="This is subtitle"
   />
  <CardContent text="Your device will reboot in few seconds once successful, be patient meanwhile" />
  <CardAction 
    separator={true} 
    inColumn={false}>
    <CardButton
      onPress={() => {}}
      title="Push"
      color="blue"
    />
    <CardButton
      onPress={() => {}}
      title="Later"
      color="blue"
    />
  </CardAction>
</Card>

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 style of root container{}

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 style of root container{}
titleStyleobjectThe style object to be merged with the default style of title text{}
subtitleStyleobjectThe style object to be merged with the default style of subtitle text{}

CardContent Component Options

PropTypeEffectDefault Value
textstringThe content text, this can be skipped and any custom content can be rendered as childrenundefined
avatarSourceobjectThe avatar image to be shown, passed to Image's source propundefined
styleobjectThe style object to be merged with the default style of root container{}
textStyleobjectThe style object to be merged with the default style of text{}

CardImage Component Options

PropTypeEffectDefault Value
sourceobjectThe image to be shown, passed to Image's source prop, , this can be skipped and any custom image or content can be rendered as childrenundefined
resizeModestringDetermines how to resize the image when the frame doesn't match the raw image dimensionsstretch
resizeMethodstringResize the image when the image's dimensions differ from the image view's dimensions.resize
singleLineTitlebooleanSet to true if you want the title to be one line, redacted with ellipsestrue
styleobjectThe style object to be merged with the default style of root container{}
textStyleobjectThe style object to be merged with the default style of text{}

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 style of root container{}

CardButton Component Options

PropTypeEffectDefault Value
titlestringThe button's text, this can be skipped and any custom title or content can be rendered as childrenundefined
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 style of root container{}
titleStyleobjectThe style object to be merged with the default style of button title{}

To do

PRs are welcome :)