Android Breaks When initialPage Index > 10

[geirman]

Related to issue #9 Affected version: v2.1.5 Affects Android Only Work around: downgraded to v2.1.4

Issue Summary

With v2.1.5 installed, tapping any thumbnail greater than 10 causes unexpected behavior ranging from the wrong image being displayed to loss of swipe and pinch-to-zoom functionality.

Issue Details

1. When tapping thumbnails on a Flatlist Grid when index <= 10, everything works as expected. The correct image appears full screen in the gallery, pinch-to-zoom works, swiping works. All is good.
2. When index === 11, the 10th image flashes but the 11th is eventually shown. Both pinch-to-zoom and swiping work as expected.
3. When index ===12, the 10th image flashes, 11th image is shown. Both pinch-to-zoom and slider sometimes work, sometimes not. It's inconsistent. When working, the 12th image immediately appears on swipe initiation (without animation).
4. When index >=13, the 10th image flashes, 11th image is shown. Neither pinch-to-zoom nor slider work (ever!).

Here's a video demonstrating the issue... http://recordit.co/pSRuvmcX04

More Info which may or may not be helpful

While troubleshooting this, I verified that the offsetX calculation is correct in react-native-image-gallery#225

• Docs: FlatList.scrollToOffset()
• Docs: VirtualizedList.scrollToOffset()
• I found this issue in another app as well. Download "Kitten Tricks". Then go to Social > User Profile V1 (2 or 3 work as well) > then under the thumbnails, tapping on any thumbnail thumbnailIndex <= 10 results in the correct image being enlarged. thumbnailIndex > 10 results in the 10th image being enlarged.

[pogofdev]

I have the same issue. You can try this by adding flatListProps. It works for me https://github.com/archriss/react-native-image-gallery/issues/85

[Draccan]

@pogofdev I have submitted this solution (85), but even if it works perfect on iOS I am not able to make it works perfect on Android when is landscape.

[AkshayItaliya]

<Gallery style={{ flex: 1, backgroundColor: 'black' }} images={this.state.ImageList} initialPage={this.state.index} flatListProps={{ initialNumToRender: this.state.index, initialScrollIndex: this.state.index, getItemLayout: (data, index) => ({ length: Dimensions.get('screen').width, offset: Dimensions.get('screen').width * index, index }) }} />

this is working in my case

[emmguyot-adscom]

@AkshayItaliya I prefer this prop and it works for me : flatListProps={{ initialScrollIndex: this.state.index, getItemLayout: (data, index) => ({ length: Dimensions.get('screen').width, offset: Dimensions.get('screen').width * index, index }) }}

I think that setting initialNumToRender is a bit too violent for performance.

[gabcvit]

Thank you @AkshayItaliya and @emmguyot-adscom. Both solutions worked great for me!