Version: 1.2.0

Card

Cards are a great way to display information, usually containing content and actions about a single subject. Cards can contain images, buttons, text and more.

Card Component

Usage#

const users = [
{
name: 'brynn',
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
},
... // more users here
]
import { View, Text, Image } from 'react-native'
import { Card, ListItem, Button, Icon } from 'react-native-elements'
// implemented without image with header
<Card title="CARD WITH DIVIDER">
{
users.map((u, i) => {
return (
<View key={i} style={styles.user}>
<Image
style={styles.image}
resizeMode="cover"
source={{ uri: u.avatar }}
/>
<Text style={styles.name}>{u.name}</Text>
</View>
);
})
}
</Card>
// implemented without image without header, using ListItem component
<Card containerStyle={{padding: 0}} >
{
users.map((u, i) => {
return (
<ListItem
key={i}
roundAvatar
title={u.name}
avatar={{uri:u.avatar}}
/>
);
})
}
</Card>
// implemented with Text and Button as children
<Card
title='HELLO WORLD'
image={require('../images/pic2.jpg')}>
<Text style={{marginBottom: 10}}>
The idea with React Native Elements is more about component structure than actual design.
</Text>
<Button
icon={<Icon name='code' color='#ffffff' />}
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
title='VIEW NOW' />
</Card>

Props#


Reference#

containerStyle#

outer container style (optional)

TypeDefault
object (style)none

dividerStyle#

additional divider styling (if title provided) (optional)

TypeDefault
object (style)none

featuredSubtitle#

subtitle rendered over the image (only works if image prop is present)

TypeDefault
stringnone

featuredSubtitleStyle#

styling for featured subtitle

TypeDefault
object (style)none

featuredTitle#

title rendered over the image (only works if image prop is present)

TypeDefault
stringnone

featuredTitleStyle#

styling for featured title

TypeDefault
object (style)none

image#

add an image as the heading with the image prop (optional)

TypeDefault
image uri or require pathnone

imageProps#

optional properties to pass to the image if provided e.g "resizeMode"

TypeDefault
{...Image props} )none

imageStyle#

specify image styling if image is provided

TypeDefault
object(style)inherited styling

imageWrapperStyle#

specify styling for view surrounding image

TypeDefault
object(style)none

title#

optional card title (optional)

TypeDefault
string OR React Native Componentnone

titleNumberOfLines#

number of lines for title (optional)

TypeDefault
numbernone

titleStyle#

additional title styling (if title provided) (optional)

TypeDefault
object (style)none

wrapperStyle#

inner container style (optional)

TypeDefault
object (style)none