[FlatList] Sometimes FlatList rows are rendered, but not displayed until scroll. RN 0.43

[joonhocho]

Description

When using FlatList, rows are not displayed though renderItem is called.
Rows appear immediately when scroll is triggered on the list.

Reproduction Steps and Sample Code

export default class List extends Component {
 renderItem({item}) {
 return (
 <Text>{item}</Text>
 );
 }

 render() {
 return (
 <FlatList
 style={{
 flex: 1,
 backgroundColor: 'white',
 }}
 data={[1, 2]}
 renderItem={this.renderItem}
 />
 );
 }
}

Solution

FlatList should always display its rendered items.

Additional Information

• React Native version: 0.43.0
• Platform: iOS
• Development Operating System: MacOS
• Dev tools: Xcode

[joonhocho]

Related #13202

[joshjhargreaves]

@joonhocho could you create a gif of this in action? I can't reproduce with your example.

[joshjhargreaves]

Are you experiencing this issue in a standalone project and/or are you able to reproduce in a standalone project if not?

[Thomas101]

We're also seeing this issue. Looks like it could be something to do with the FlatList being in a navigator on iOS. Managed to reproduce it in a standalone project. You'll have to excuse the code it's a bit rough.

react-native init and add the following code as your index.ios.js. Once launched, tap on A. Tap remove. Tap back. Then you'll need to scroll to get FlatList to re-render.

We found this on RN0.43.1 iOS simulator, iPad but not android. Seems to work as expected on android

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, FlatList, TouchableOpacity, Navigator } from 'react-native';

let data = [ { id: 'a' }, { id: 'b' }, { id: 'c' } ]
let listeners = []

class List extends Component {
 constructor (props) {
 super(props)
 this.state = { data: Array.from(data) }
 }

 componentDidMount () {
 listeners.push(() => { this.setState({ data: data }) })
 }

 render () {
 return (
 <FlatList
 data={this.state.data}
 keyExtractor={(item) => item.id}
 renderItem={({item}) => (
 <TouchableOpacity onPress={() => this.props.navigator.push({ id: 'r2', item: item })}>
 <View>
 <Text>{item.id}</Text>
 <Text>{item.id}</Text>
 <Text>{item.id}</Text>
 <Text>{item.id}</Text>
 </View>
 </TouchableOpacity>
 )}
 />
 )
 }
}

export default class AwesomeProject extends Component {

 renderScene (route, navigator) {
 if (route.id === 'r1') {
 return (<List navigator={navigator} />)
 } else if (route.id === 'r2') {
 return (
 <View>
 <Text>{route.item.id}</Text>
 <TouchableOpacity onPress={() => {
 data = [data[0], data[2]]
 listeners.forEach((l) => { l() })
 }}>
 <Text>Remove</Text>
 </TouchableOpacity>
 <TouchableOpacity onPress={() => navigator.pop()}>
 <Text>Back</Text>
 </TouchableOpacity>
 </View>
 )
 }
 }

 render() {
 return (
 <View style={[StyleSheet.absoluteFill, { paddingTop: 50 }]}>
 <Navigator initialRoute={{ id: 'r1' }} renderScene={this.renderScene.bind(this)} />
 </View>
 );
 }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

[sahrens]

Does setting removeClippedSubviews={false} fix the issue? Sounds like the issue might be related to the navigator which would explain why we don't see this problem at Facebook. cc @shergin

[joonhocho]

@Thomas101 @sahrens I am using react-navigation for your information.

[raffij]

@sahrens removeClippedSubviews={false} works for us for now.

We are using Navigator for a tab based app.

1. Navigate to the flatlist scene. List shows.
2. Navigate to another tab.
3. Make a change which affects the flatlist scene.
4. Navigate to the already mounted flatlist scene.
5. Flatlist shows as empty.
6. Touch component and the items are made visible.

[joonhocho]

@raffij @sahrens It also fixed the issue for me as well.

[Thomas101]

removeClippedSubviews={false} works for us too. I noticed in the VirtualizedList docs there's some discussion around setting this as the default, could I +1 that as I imagine quite a few people will come up against this?

[sahrens]

I'm running an experiment in production soon to see the effect on scroll perf. If the hit isn't too bad, we'll turn it off by default.

[whoyawn]

Running into a similar problem here. It isn't exactly scrolling that's my problem though. What I have is a horizontal FlatList with paging enabled. I have a function that adjusts each item of the list to the width of the screen. What I'm doing right now is using redux and async storage to persist all my items, but the items do not render until I hit a button in my view to add another item in the list. When I set removeClippedSubviews={false} the view renders, but only part of it. I suspect it has something to do with the render prop, because when I render just a TextView I see the display, but not when I render my full custom component. I'll post my code and a video tomorrow.

[joenoon]

I had a possibly related issue with a ListView (RN 0.43.2) that seems to be solved by the removeClippedSubviews={false} suggestion.

In my case this ListView was inside an Animated.View with a translateY style (sliding down). When the animation ended the ListView would have variable space above the first row (as if there was some contentInset padding). Just barely scrolling the list would snap everything back to normal and the first row would be correctly at the top.

Just noting it here in case it might provide a hint.