react-native-cards

A highly customizable material design card component for React Native

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-cards
2101.1.45 years ago5 years agoMinified + gzip package size for react-native-cards in KB

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: ```javascript import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-cards'; ``` Then insert the card in your code: ```js
<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 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