Skip to content

Kudo/react-native-image-carousell

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Example.gif

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