react-native-image-carousell

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