Skip to content
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

Image Flickers when Updated from 0.42.3 to 0.43.4 and changed from listview to flatlist #13886

Closed
bgoyal2222 opened this issue May 10, 2017 · 8 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@bgoyal2222
Copy link

Updated RN from 0.42.3 to 0.43.4 and changed newsfeed component from listview to flatlist
So, whenever we scroll the feed the image flickers

<FlatList
ref={(c)=>this._listViewRef = c}
onViewableItemsChanged={(visibleRows, changedRows) => console.log("yes it works")}
refreshing={this.state._refreshing}
data={this.state._dataSource}
renderItem={({item})=>this._renderRow(item)}
enableEmptySections={true}
onEndReached={()=>{
if(this.state._stopLazyLoad == false){
return this.fetchNewsFeed()
}
}}
extraData={this.state}
onEndReachedThreshold={height*4}
ListHeaderComponent={()=>}
ListFooterComponent={()=>{
if(this.state._refreshing == true){
return null;
}
return <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
}}
/>

  • React Native version: 0.43.4
  • Platform: android
  • Development Operating System: Linux
  • Dev tools: Android Studio 2.3,Android SDK Tool 25.2.5
@st0ffern
Copy link

Are you using dataSource from ListView? if so that is wrong. it should be a array of data not the datasource from ListView

@bgoyal2222
Copy link
Author

No i am using a json array and data is properly visible as before.. just the issue is images keeps on flickering.. I am not getting why it behaving like this @Stoffern

@st0ffern
Copy link

@bgoyal2222 sounds like you have issues with the FlatList rerendering on scroll / onEndReached

what does this function do? fetchNewsFeed

onEndReached={()=>{
if(this.state._stopLazyLoad == false){
return this.fetchNewsFeed()
}
}}

@bgoyal2222
Copy link
Author

bgoyal2222 commented May 10, 2017

@Stoffern that is for when the user reach to the end of my feed.. to make a call and fetch further data and display

@dobrienlzd
Copy link

Is that an async call or are you slowing stuff down with it?

@bgoyal2222
Copy link
Author

ya thats a fetch api call @dobrienlzd

@dobrienlzd
Copy link

dobrienlzd commented May 10, 2017

A few ideas:

Where is the _render_row(item) function? Seems like that would be interesting to see!

  1. Put a timer around this request for data so you know how long in milliseconds it take. Also just return stubbed data and see if you still notice the flickering. Possible it's just coincidence and your network speed has changed.
  2. Upgrade to 0.44.0 and let us know what happens?
  3. Let's try to get the rendering time on the item via callbacks. See if there is a real difference between 0.42 and 0.43 or not.

Also what version of React are you using?
npm list -g --depth=0 //To check you really have the versions of react and react-native as spec in package.json sometimes npm does not really upgrade. Might need to do rm -rf node_modules then make sure right packages are really installed!

Just pick whichever is easiest first. But FlatList get's lots of attention. Last commit just four hours ago so give us some stats!

@bgoyal2222
Copy link
Author

Thanks for the help.. I am not sure but it seems to be solved when i removed image prop resizeMode='contain'

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants