React Native Cards
A highly customizable material design card component for React Native.
See Google Material Design for more info on Cards.
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:
;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
