How to jump to certain Image/Index?

[N3rdArtiste]

I want to have a button which takes user to specified index on being pressed. Please someone throw light on how this can be done. Thanks

[N3rdArtiste]

It's not perfect solution but it works. what simply it does is that it Rerenders the gallery component with new initialPage value.

constructor(props){
super(props)
this.state = {
  num:0,
  key:0
}
  }

  renderImageSlider(index,images){
    return (<Gallery
      style={{ flex: 1 }}
      initialPage={index}
      images={images}
    />)
  }

  render() {
const images ={[
          { source: require('yourApp/image.png'), dimensions: { width: 150, height: 150 } },
          { source: { uri: 'http://i.imgur.com/XP2BE7q.jpg' } },
          { source: { uri: 'http://i.imgur.com/5nltiUd.jpg' } },
          { source: { uri: 'http://i.imgur.com/6vOahbP.jpg' } },
          { source: { uri: 'http://i.imgur.com/kj5VXtG.jpg' } }
        ]}
    return (
     <View style={{width:'100%',height:250}} key={this.state.key}>
        {this.renderImageSlider(this.state.num,images)}
        </View>
        <View>
        <Button onPress={()=>{{this.setState({num:images.length-1,key:Math.random()})}}} />
    );
  }

[ptdede]

use three backtick ` to convert code style 💃

[ptdede]

Oh btw, you can use

// somewhere in your code (except render method without callback)
// .scrollToPage(index, false) -> (image index, animate or not)
this._gallery && this._gallery.getViewPagerInstance().scrollToPage(index, false)

<Gallery
      ref={(c) => { this._gallery = c }}
      images={this.state.images}
      onPageSelected={this.handleOnGallerySwiped}
/>

@nerdartist Instead of rerender the whole component 👍

[sourbrew]

Thank you for that little snippet.

[christopher-18]

The script added by @ptdede works for me. But is there any method by which I can detect whether I have reached end of the array and is trying to swipe again so that i can implement the loop feature in this library.

[samipshah100]

@bhavna-18 you can get size of array of your images. you can compare that against onPageSelected prop