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.

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

• containerStyle
• dividerStyle
• featuredSubtitle
• featuredSubtitleStyle
• featuredTitle
• featuredTitleStyle
• image
• imageProps
• imageStyle
• imageWrapperStyle
• title
• titleNumberOfLines
• titleStyle
• wrapperStyle

---

Reference

containerStyle

outer container style (optional)

Type	Default
object (style)	none

---

dividerStyle

additional divider styling (if title provided) (optional)

Type	Default
object (style)	none

---

featuredSubtitle

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

Type	Default
string	none

---

featuredSubtitleStyle

styling for featured subtitle

Type	Default
object (style)	none

---

featuredTitle

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

Type	Default
string	none

---

featuredTitleStyle

styling for featured title

Type	Default
object (style)	none

---

image

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

Type	Default
image uri or require path	none

---

imageProps

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

Type	Default
{...Image props} )	none

---

imageStyle

specify image styling if image is provided

Type	Default
object(style)	inherited styling

---

imageWrapperStyle

specify styling for view surrounding image

Type	Default
object(style)	none

---

title

optional card title (optional)

Type	Default
string OR React Native Component	none

---

titleNumberOfLines

number of lines for title (optional)

Type	Default
number	none

---

titleStyle

additional title styling (if title provided) (optional)

Type	Default
object (style)	none

---

wrapperStyle

inner container style (optional)

Type	Default
object (style)	none