ListView doesn't work properly on iOS if state is initiated while screen not being currently displayed

[jcharlet]

Description

I display a list of items using a ListView in a screen called History.
The state of that screen can be changed in 3 cases, and all of them happen when the user is looking at another screen

• when I start the app, I load the list of items on all my screens (using redux) and display the home screen
• when I create an item or I remove an item in separate screens, the history is also updated

When I display the screen, I should see a horizontal list of my items. It works fine on Android. On iOS however, I see a blank screen, and if I touch/scroll the screen, the list of items suddenly appears at the right position.
gif showing the bug on iOS

mentioned on http://stackoverflow.com/questions/44022857/listview-not-displayed-unless-i-scroll-on-it

Reproduction Steps and Sample Code

install the react native repo below and run it ios simulator (used iphone6s). I reproduced it as well on iphone 5s and iphone 5c

https://github.com/jcharlet/react_native_listview_bug

Solution

I have not a clue of what should be done. If you could provide hints on where to investigate, it would be highly appreciated.

I tried unsuccessfully:

• scroll to 0,0 when rendering the screen using ListView.scrollTo
• to load rides again with redux when navigating to history screen
• upgrade react and react native to last versions
• generate a separate redux action for loading rides in history screen 'LR' (I otherwise use the same LOAD_RIDES action in hackDetails and History screens to update their states)

Additional Information

"react": "16.0.0-alpha.6",
"react-navigation": "1.0.0-beta.9",
"react-redux": "^5.0.3",

• React Native version: "0.44.0"
• Platform: iOS (works fine on Android)
• Development Operating System: Linux Ubuntu 16.04 & MacOSX
• Dev tools: Xcode updated this week, iOS SDK 10.3

[anttimo]

Sounds like #1831 and can be worked around by adding removeClippedSubViews={false} to the ListView. It might cause some performance issues depending on large your list is https://facebook.github.io/react-native/docs/listview.html#removeclippedsubviews but that's what we have been using.

[jcharlet]

Thanks @anttimo that was it!

[jcharlet]

Duplicate to #1831

[anttimo]

np. glad that I was able to help :)