question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

<FlatList 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.)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:17

github_iconTop GitHub Comments

6reactions
msaifacommented, Nov 2, 2018

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

0reactions
antonsivogrivovcommented, Feb 21, 2019

The same in react-native 0.57.8

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Native FlatList performance problems with large list
VirtualizedList is the component behind FlatList , and is React Native's ... Blank areas means that the VirtualizedList couldn't render your ...
Read more >
Optimizing Flatlist Configuration - React Native
Blank areas: When VirtualizedList can't render your items fast enough, you may enter a part of your list with non-rendered components that ...
Read more >
Common bugs in React Native ScrollView and how to fix them
Today, I'll explain some common mistakes when using ScrollView in React Native and how to avoid them, plus a few tips and tricks...
Read more >
Flatlist Returning Blank Screen In React Native - ADocLib
I am trying to render out a list of object data using FlatList in my React Native component however I am getting a...
Read more >
React Native Show Message for empty FlatList
After loading the data from the server we can directly set the DataSource to the list by defining the props ListEmptyComponent of FlatList...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found