Bug: When inside of Tabs for react-native-router-flux, slides don't show until you begin to swipe

[dwilt]

Is this a bug report or a feature request?

Bug report

Have you read the guidelines regarding bug report?

Yes.

Have you read the documentation in its entirety?

I'll be honest, probably not.

Have you made sure that your issue hasn't already been reported/solved?

I've done a very thorough check through the issues with as many keyword searches as possible because putting together the reproduction steps for this was a PITA (though I completely appreciate why it has to be).

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

I've only been testing on iOS.

Is the bug reproductible in a production environment (not a debug one)?

Yes, it still exists when the scheme for iOS is set to "Release".

Have you been able to reproduce the bug in the provided example?

I didn't try. I just created a fresh React Native project and installed the carousel (along with react-native-router-flux.

Environment

Environment:
React: 16.3.0-alpha.1
React native: 0.54.2
react-native-snap-carousel: 3.6.0
react-native-router-flux: 4.0.0-beta.28

Target Platform:
iOS (11.2)

Steps to Reproduce

When you put the carousel inside of <Tabs> for react-native-router-flux, the images don't show until you begin to swipe.

1. Clone out https://github.com/dwilt/react-native-snap-image-bug
2. Start the packager
3. Fire up a SIM for iOS (react-native run-ios)
4. Click on the Detail tab at the bottom

Expected Behavior

The images for the carousel would always be there - not just when I begin to swipe. This may be a react-native-router-flux problem but I wasn't sure so I'm posting here. Because it works on other pages in the app along with other components, I thought this really was probably a problem with this plugin. It seems like some sort of layout issue.

Notice below how you can see, when using the Inspector in the SIM, that the CellRenderer (flatlist-item-6) for the slide is visible in the SIM when I hover over the avatar.:

But when I hover over the next avatar CellRenderer (flatlist-item-7) that should be visible, notice where it is positioned invisible off the screen:

Actual Behavior

As described above, when you navigate to a <Tab> page, the carousel isn't displaying all of the slides correctly:

But, once you begin to swipe, they immediately pop back in:

Reproducible Demo

https://github.com/dwilt/react-native-snap-image-bug

I've put together a repo with the latest version of React Native, this plugin, and react-native-router-flux to demonstrate.

[bd-arc]

Hi @dwilt,

This looks like #238; I think you'll find some useful information there ;-)

To sum up: this is an unfortunate React Native bug. I've exposed two ways of dealing with:

triggerRenderingHack (offset) | Call this whenever needed to work around a random FlatList bug that keeps content hidden until the carousel is scrolled. Note that the offset parameter is not required and will default to either 1 or -1 depending on current scroll position.

useScrollView | Whether to use a ScrollView component instead of the default FlatList one. The advantages are to avoid rendering issues that can arise with FlatList and to provide compatibility with React Native pre- 0.43. The major drawback is that you won't benefit from any of FlatList's advanced optimizations. We recommend activating it only with a small set of slides and to test performance thoroughly in production mode.

[iuliuvisovan]

Hello, one question. I have "snapToItem" to a high index, say 30, and it scrolls to the ninth position, and only after that loads the next items. Will triggerRenderingHack help in this case? If yes, when exactly should I call it? I'm calling before and after calling snapToItem, is there anything else I'm missing? :/

EDIT: useScrollView does the trick in this case. Make sure to update to the last library version tho.