https://github.com/dondoko-susumu/react-native-card-media

Card Media component for React Native
https://github.com/dondoko-susumu/react-native-card-media

card-media image javascript react-native ui-components

Last synced: about 2 months ago
JSON representation

Card Media component for React Native

• Host: GitHub
• URL: https://github.com/dondoko-susumu/react-native-card-media
• Owner: dondoko-susumu
• License: mit
• Created: 2017-03-25T14:23:19.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-24T17:28:47.000Z (about 2 years ago)
• Last Synced: 2024-04-14T19:47:13.916Z (10 months ago)
• Topics: card-media, image, javascript, react-native, ui-components
• Language: JavaScript
• Homepage:
• Size: 2.88 MB
• Stars: 70
• Watchers: 5
• Forks: 9
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-card-media ★63 - Card media component & Support multiple image layout (Components / UI)
• awesome-reactnative-ui - react-native-card-media - susumu/react-native-card-media/master/images/single_double.png)| (Others)
• awesome-react-native - react-native-card-media ★63 - Card media component & Support multiple image layout (Components / UI)
• awesome-reactnative-ui - react-native-card-media - susumu/react-native-card-media/master/images/single_double.png)| (Others)
• awesome-react-native - react-native-card-media ★63 - Card media component & Support multiple image layout (Components / UI)
• awesome-react-native - react-native-card-media ★63 - Card media component & Support multiple image layout (Components / UI)

README

        
## react-native-card-media

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

#### single & double  

![single & double](images/single_double.png)

#### three & four

![three & four](images/three_four.png)

#### five

![five](images/five.png)

## Installation

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

## Examples

[CardMediaExample](https://github.com/dondoko-susumu/react-native-card-media-example/blob/master/App.js)

## Usage

```javascript

const files5 = [

  `${path}kids_play_640.jpeg`,

  `${path}road_640.jpg`,

  `${path}women_640.jpeg`,

  `${path}sea_kids_640.jpeg`,

  `${path}temple_640.jpeg`,

];

 this.onPress(fileIndex)}

  imageIconView={this.renderImageIconView}

  imageCountStyle={{ fontSize: 20, fontWeight: '500', lineHeight: 28, color: '#fafafa' }}

  imageTouchable={false}

/>

```

## Props

| Prop | Description | Type | Default |

| ------------- | ------------- | ------------- | ------------- |

| **files**  | Media lists | Array | **Required**  |

| **style**  | CardView style   | View Style Object | undefined  |

| **title**  | Title text is shown at below part of card | String | undefined |

| **showTitle**  | Title is shown or not | Boolean  | true |

| **titleStyle**  | Title style | View Style Object | undefined |

| **onPress**  | Action is called when click in card 
 you can pass the file index as an argument| Function | undefined |

| **imageIconView**  | Icon is shown near title | Component | undefined |

| **imageCountStyle**  | Icon style | View Style Object | undefined |

| **imageTouchable**  | Images in card is clickable or not | Boolean | true |

## License

MIT