React-native-image-viewer: onChange setstate stuck

Created on 16 Jan 2018  路  7Comments  路  Source: ascoders/react-native-image-viewer

i am trying to get the current shown image index by this

<ImageViewer imageUrls={this.state.picdata} onChange={(index) => this.setState({ index })} />}

but it result with the image become swipe able

is it a bug or am i doing it wrong?

bug

Most helpful comment

I've had the same problem because i was using an index passed down by another component. You must set the index in the state and update it at the same time you are updating your state. Because it renders back the view and initialize the viewer to the initial index.
For example i had

<ImageViewer index={pictureIndex} onChange={async (index) => { this.setState({ currentPicture: pictures[index] }) />

which caused the problem because the set state initialized back the viewer with the passed pictureIndex

I changed it to

<ImageViewer index={this.state.index} onChange={async (index) => { this.setState({ currentPicture: pictures[index], index: index }); }}/>)

Which made it work!

All 7 comments

actually i have solved this by passing it to a variable instead of state which make no different because onChange work like state already

if you feel the issue will not bother anyone in the future please close this issue immediately.

It means that setState will broke the swiper behavior?

Yes the setstate broke the swiper
It cause the viewer to become unswipable eventhough you are able to see that the unshown image are loaded

Thanks, i will resolve it later.

Feel free to tag this issue or close it

I've had the same problem because i was using an index passed down by another component. You must set the index in the state and update it at the same time you are updating your state. Because it renders back the view and initialize the viewer to the initial index.
For example i had

<ImageViewer index={pictureIndex} onChange={async (index) => { this.setState({ currentPicture: pictures[index] }) />

which caused the problem because the set state initialized back the viewer with the passed pictureIndex

I changed it to

<ImageViewer index={this.state.index} onChange={async (index) => { this.setState({ currentPicture: pictures[index], index: index }); }}/>)

Which made it work!

Was this page helpful?
0 / 5 - 0 ratings