Skip to content

A highly customizable material design card component for React Native

License

Notifications You must be signed in to change notification settings

dale-french/react-native-cards

Repository files navigation

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

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

Todo (PRs welcome!)

  • Add side media to cards - see here

Releases

No releases published

Packages

No packages published