-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FlatList] Sometimes FlatList rows are rendered, but not displayed until scroll. RN 0.43 #13316
Comments
Related #13202 |
@joonhocho could you create a gif of this in action? I can't reproduce with your example. |
Are you experiencing this issue in a standalone project and/or are you able to reproduce in a standalone project if not? |
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); |
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 |
@Thomas101 @sahrens I am using |
@sahrens removeClippedSubviews={false} works for us for now. We are using Navigator for a tab based app.
|
|
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. |
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 |
I had a possibly related issue with a ListView (RN 0.43.2) that seems to be solved by the 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. |
I'm putting in a diff to disable |
@sahrens Could you explain why Because I am using other RN libraries like react-native-sortable-listview that suffers from the similar issue (rows not appearing until initial scroll) even though it uses |
I am wodering this question as well. I am using react-navigation as well. Setting |
Summary: It's just causing problems (e.g. when combined with transform animations like those used in some navigators) and hopefully it's not necessary with JS-side windowing. If people need the perf, they can turn it on themselves. Should fix facebook#13316 and related issues. Reviewed By: achen1 Differential Revision: D4884147 fbshipit-source-id: 95c82448581076c0d0b2c80b1cd80cc294898174
I'm getting this too in RN 0.43.3. Why is this closed? |
I think the conclusion is that setting removeClippedSubviews={false} seems to fix these issues? Have you tried this yet? |
Yeah, i just figured that out, cheers. Much better. But it's still a bug, no? |
removeClippedSubviews is now off by default in master. |
This also breaks components like MapView in react-native-maps (the map gets frozen on some area until swipe or some other gesture event). So, this is not just an issue with react-native components. Adding |
Got something really weird. I'm trying to scroll to the end of my horizontal pager I made out of the Flatlist with this
Here's my Flatlist:
When I make it like this, my list does not render until I scroll, but when I change
with the length attribute as 0, my list renders perfectly fine, and it scrolls to the end correctly in |
@HuyAnhh: that is indeed quite weird. Does it work without the length hack and without removeClippedSubviews? |
Summary: It's just causing problems (e.g. when combined with transform animations like those used in some navigators) and hopefully it's not necessary with JS-side windowing. If people need the perf, they can turn it on themselves. Should fix facebook#13316 and related issues. Reviewed By: achen1 Differential Revision: D4884147 fbshipit-source-id: 95c82448581076c0d0b2c80b1cd80cc294898174
@douglasjunior Sorry to bother, but how did you implement the Activity Indicator while scrolling the FlatList? |
When fetching the data, render an |
This is still a problem with 0.50.3. removeClippedSubviews don't seem to have any effect. Can we reopen this please? |
Inspired by the comments in this thread from Kiarash-Z and douglasjunior, my fix to this solution was basically: ListFooterComponent={() => {
return <View style={{backgroundColor: 'transparent', height: 1}} />
}} I could not use a |
React Native FlatList shows some blank in the quickly sliding. What is the solution? |
we've migrated over to use https://github.com/Flipkart/recyclerlistview |
@BlakeSimpson this is good, but again it is not viable solution in the long run because it is basically a hack. Why is this closed again, if this is not resolved 👎 |
@rogerkerse I totally agree. This is a hack and a real solution would be preferable. We've recently upgraded to RN 0.52 though and the issue seems to be resolved, so I am removing my hack. Perhaps you can upgrade your React Native version also or just use the hack temporarily until you can? |
Super weird, when I edited getItemLayout={(data, index) => (
{
length: itemWidth - 1, // why does this work
offset: itemWidth * index,
index
}
)} Edit: Or not. |
I might have resolved it by only passing
Feels like this kind of logic should not be necessary. |
@bensheldon that solved it for me, thanks! |
After refactoring to use FlatList I must go back to ListView. :-( None of these solutions work for me. ListView just works.
|
@esutton can you show your FlatList, getItemLayout and css used in the FlatList? |
@DOHere I am not using the getItemLayout option.
|
@esutton I suggest you set the height of rows somewhere in css
|
@DOHere Thank you very much for the tip. I plan to stay with ListView as long as I can. FlatList has wasted way too much of my time. After my experience of migrating multiple components to FlatList, I have had to roll back to ListView several times because of rendering not working properly as ListView did. I will keep your advice in mind when I am forced to upgrade to FlatList. |
Still with the FlatList in React Native 0.54. It started happening all of a sudden and it's actually annoying. |
Please reopen, same issue in RN 0.54 for me... Only Android btw. |
Found a working Hack for this.
|
I dont encounter this error when I install in debugMode. However once I do In my case the rows do render but kind of "not fully". It feels like because the debug variant is slower, it finishes rendering each item. However the release variant is too fast for the items to display properly. The color of the items are sluggish and blend with the background color. The bug wont happen on iOS. I have no clue on what to do to fix this. It is really frustrating.
|
Finally,the only way for me is back to ListView. |
|
Adding |
had the same problem, the problem is that the data source is a JSON and therefore will be passed to the reference and not as a value, by modifying that object from any of its references automatically 'Flatlist' will have these new data and for more if we use setState to try to update the flatList, we will not see the changes until we move because Flatlist will already have that data. It's a bit confusing but here I give you a little 'solution'.
|
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
Solution
FlatList should always display its rendered items.
Additional Information
The text was updated successfully, but these errors were encountered: