React-native-cards NPM

React Native Cards

npm version npm downloads

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

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	`undefined`

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	`undefined`

CardContent Component Options

Prop	Type	Effect	Default Value
`text`	`string`	The content text	`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	`undefined`

CardImage Component Options

Prop	Type	Effect	Default Value
`source`	`object`	The image to be shown, passed to Image's `source` prop	`undefined`
`style`	`object`	The style object to be merged with the default style	`undefined`
`resizeMode`	`string`	Determines how to resize the image when the frame doesn't match the raw image dimensions	`cover`
`resizeMethod`	`string`	Resize the image when the image's dimensions differ from the image view's dimensions.	`resize`

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	`undefined`

CardButton Component Options

Prop	Type	Effect	Default Value
`title`	`string`	The button's text	`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	`undefined`