React-native: React Native FlatList shows some blank in the quickly sliding. What is the solution?

[companyAcc]

Is this a bug report?

(write your answer here) I don't know

Have you read the Contributing Guidelines?

(Write your answer here.) yes

Environment

Environment:
OS: macOS High Sierra 10.13 Beta
Node: 8.9.2
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 3.0.1

Packages: (wanted => installed)
react-native: 0.48.1 => 0.5.1
react: 16.0.0-alpha.12 => 16.0.0-alpha.12

Target Platform: Android

Steps to Reproduce

(Write your steps here:)

1.quickly slide the FlatList in the android
2.appear some blank in screen
3.wait the munite,the blank disappear

Expected Behavior

(Write what you thought would happen.)

Actual Behavior

(Write what happened. Add screenshots!)
it is just sometime blank

Reproducible Demo

style={styles.container}
data={this.state.serialGroupList}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh}
onEndReachedThreshold={0.3}
onEndReached={({distanceFromEnd}) => this.onEndReached(distanceFromEnd)}
getItemLayout={(data, index) => ({length: 100, offset: 100 * index, index})}
/>

(Paste the link to an example project and exact instructions to reproduce the issue.)

[XcqRomance]

I have the same issue, and still now can't resolved it.

[koswarabilly]

have you tried to increase the onendreachthreshold?

[companyAcc]

@koswarabilly yes,I had to do it,but still can't resolved it.

[wuyunqiang]

https://github.com/bolan9999/react-native-largelist you can try this.

[XcqRomance]

@wuyunqiang I had try to user react-native-largelist, but still exist this problem. and I found in the RNTester app , FlatList shows some blank in the quickly sliding.

[dhruvdutt]

@yifengwu2018 Can you please share your renderItem method?

[companyAcc]

@dhruvdutt Of course, as follows:
renderItem=({item, index}) => { return ( <ListItem data={item} onPress={() => this.props.onPress(index)} /> ); }

[dhruvdutt]

@yifengwu2018 It's difficult to understand what exactly is going wrong. Can you please give a link to code which I can clone and test locally. I had been through a similar issue a while ago. I think I may resolve it.

[jslok]

Have you tried this in production mode? I only experience this in development.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[skywalkerlw]

if you remove this line of code, i bet it could resolve your problem:
getItemLayout={(data, index) => ({length: 100, offset: 100 * index, index})}

getItemLayout works not perfect as what i should be expected

[wenkangzhou]

Please reopen, same issue in RN 0.54 for me.

[lanetteammonika]

same issue for me also. on removing of getItemLayout works correctly but I need to use it as I have sectionList and need to use scrollToLocation. so this is a compulsion to use getItemLayout in order to get working scrollToLocation.

[ludaye123]

Same issue in react-native 0.56.0

[msaifa]

Please reopen, and share how to fix it. this very urgent for me

[dolsem]

Same issue, React Native 0.57.1

[antonsivogrivov]

The same in react-native 0.57.8