Android Breaks When initialPage Index > 10

[Chris 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
#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.

[Akshay Italiya]

<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

[Emmanuel Guyot]

@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.

[Gabriel Vitali]

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