react-native-image-carousell
A component for image gallery carousell like iOS Photos app
Features
- Has a bottom preview for near photos and will scroll responsively
- Support zoom
- Will hide preview when zoomScale > 1
- Currently iOS support only, check #2
Installation
npm install --save react-native-image-carousell Usage
import ImageCarousell from 'react-native-image-carousell'; class Example extends React.Component { constructor(props) { super(props); const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2, }); this.state = { dataSource: dataSource.cloneWithRows([ require('./images/1.png'), require('./images/2.png'), require('./images/3.png'), require('./images/4.png'), require('./images/5.png'), require('./images/6.png'), require('./images/7.png'), require('./images/8.png'), require('./images/9.png'), require('./images/10.png'), ]), }; } render() { return ( <View style={styles.container}> <ImageCarousell dataSource={this.state.dataSource} /> </View> ); } }Properties
| Prop | Type | Description | Required |
|---|---|---|---|
dataSource | ListView.DataSource | The image data source | true |
initialIndex | number | The initial image to show based on dataSource index (Default 0) | |
showPreview | bool | To show bottom image preview (Default true) | |
previewImageSize | number | Preview image size (Default 80) | |
width | number | Width for ImageCarousell (Default is Dimensions.get('window').width | |
height | number | Height for ImageCarousell (Default is Dimensions.get('window').height | |
style | View.propTypes.style | Custom style for ImageCarousell | |
previewContainerStyle | View.propTypes.style | Custom style for bottom preview container | |
imageStyle | View.propTypes.style | Custom style for Image | |
previewImageStyle | View.propTypes.style | Custom style for bottom preview image | |
getImageSourceFromDataSource | function | The getter for each dataSource row. (Default is (row) => row.You could however to use (row) => { uri: row.get('image') } if you use Immutable.js | |
renderScrollComponent | function | Custom ScrollView component for ListView |
Example
Check Example
License
MIT
