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