Home

Awesome

react-native-card-media

Card Media component for React Native. Also supports multiple image layout.

single & double

single & double

three & four

three & four

five

five

Installation

npm install react-native-card-media --save

Examples

CardMediaExample

Usage

const files5 = [
  `${path}kids_play_640.jpeg`,
  `${path}road_640.jpg`,
  `${path}women_640.jpeg`,
  `${path}sea_kids_640.jpeg`,
  `${path}temple_640.jpeg`,
];

<CardMedia
  files={files5}
  style={{ height: 200 }}
  title="Title"
  showTitle={false}
  titleStyle={{ fontSize: 24, fontWeight: '400', lineHeight: 32, color: '#fafafa' }}
  onPress={(fileIndex) => this.onPress(fileIndex)}
  imageIconView={this.renderImageIconView}
  imageCountStyle={{ fontSize: 20, fontWeight: '500', lineHeight: 28, color: '#fafafa' }}
  imageTouchable={false}
/>

Props

PropDescriptionTypeDefault
filesMedia listsArrayRequired
styleCardView styleView Style Objectundefined
titleTitle text is shown at below part of cardStringundefined
showTitleTitle is shown or notBooleantrue
titleStyleTitle styleView Style Objectundefined
onPressAction is called when click in card <br> you can pass the file index as an argumentFunctionundefined
imageIconViewIcon is shown near titleComponentundefined
imageCountStyleIcon styleView Style Objectundefined
imageTouchableImages in card is clickable or notBooleantrue

License

MIT