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

Prop	Type	Effect	Default Value
`isDark`	`boolean`	If the card background is dark, sets a light text color, this prop is passed to all child components	`true`
`mediaSource`	`object`	The image to show in background of a card, with content overlayed, passed to Image's `source` prop	`undefined`
`avatarSource`	`object`	The avatar image to be shown in the card's content or header section, whichever comes first, passed to Image's `source` prop	`undefined`
`style`	`object`	The style object to be merged with the default style of root container	`{}`

CardTitle Component Options

Prop	Type	Effect	Default Value
`title`	`string`	The title text	`undefined`
`subtitle`	`string`	The subtitle text	`undefined`
`subtitleAbove`	`boolean`	Whether the subtitle should be shown above the title	`false`
`avatarSource`	`object`	The avatar image to be shown, passed to Image's `source` prop	`undefined`
`style`	`object`	The style object to be merged with the default style of root container	`{}`
`titleStyle`	`object`	The style object to be merged with the default style of title text	`{}`
`subtitleStyle`	`object`	The style object to be merged with the default style of subtitle text	`{}`

CardContent Component Options

Prop	Type	Effect	Default Value
`text`	`string`	The content text, this can be skipped and any custom content can be rendered as children	`undefined`
`avatarSource`	`object`	The avatar image to be shown, passed to Image's `source` prop	`undefined`
`style`	`object`	The style object to be merged with the default style of root container	`{}`
`textStyle`	`object`	The style object to be merged with the default style of text	`{}`

CardImage Component Options

Prop	Type	Effect	Default Value
`source`	`object`	The image to be shown, passed to Image's `source` prop, , this can be skipped and any custom image or content can be rendered as children	`undefined`
`resizeMode`	`string`	Determines how to resize the image when the frame doesn't match the raw image dimensions	`stretch`
`resizeMethod`	`string`	Resize the image when the image's dimensions differ from the image view's dimensions.	`resize`
`singleLineTitle`	`boolean`	Set to true if you want the title to be one line, redacted with ellipses	`true`
`style`	`object`	The style object to be merged with the default style of root container	`{}`
`textStyle`	`object`	The style object to be merged with the default style of text	`{}`

CardAction Component Options

Prop	Type	Effect	Default Value
`separator`	`boolean`	Whether a separator should be shown	`true`
`inColumn`	`boolean`	Whether the buttons should be stacked in a column	`false`
`style`	`object`	The style object to be merged with the default style of root container	`{}`

CardButton Component Options

Prop	Type	Effect	Default Value
`title`	`string`	The button's text, this can be skipped and any custom title or content can be rendered as children	`undefined`
`color`	`string`	The color of button text	`orange`
`onPress`	`function`	The function to be called when button is pressed	`noop` (defined in `src/utils`)
`style`	`object`	The style object to be merged with the default style of root container	`{}`
`titleStyle`	`object`	The style object to be merged with the default style of button title	`{}`

To do

Add cards with side media

PRs are welcome :)