react-native: FlatList data changed but refresh indicator not shows automatically

Is this a bug report?

when my flatList data changed, the layout changed but refresh indicator on top of flatList is not always shows loading automatically, I have to pull it down a little bit then the indicator stick on flatList, or it just shows at a blink when the data really changed, not shows at whole async data changed time as expected.

Have you read the Contributing Guidelines?

yes

Environment

react-native -v: 0.46.0
node -v: v6.9.1
npm -v: 3.10.8
yarn --version: 0.24.5

Target Platform: iOS android works fine
Development Operating System: macOS
Build tools: Xcode

Steps to Reproduce

set refreshing state to true then call api, but refresh indicator on flatList not always automatically pull down
api back then data changed, it pull down at a blink, set refreshing state to false

Expected Behavior

loading indicator should show right after api called.

Actual Behavior

it shows and disappear quickly on data changed.

 onRefresh = async () => {
    this.setState({
      isRefreshing: true
    });
    await this.props.searchProducts(this.state.searchString);
    await this.setState({
      data: this.props.products.searchProductsIds.map(
        id => this.props.products.searchProductsById[id]
      )
    });
   
    this.setState({
      isRefreshing: false
    });
   
  };

  <FlatList
      removeClippedSubviews={false}
      onRefresh={this.onRefresh}
      refreshing={this.state.refreshing}
      extraData={this.extraData}
      data={this.state.data}
      renderItem={this.renderItem}
      keyExtractor={product => product.id}
      contentContainerStyle={styles.listContainer}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={5}
    />

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 28
Comments: 31 (1 by maintainers)

Commits related to this issue

React sync for revisions ec6691a...55bc393 Summary: This sync includes the following changes: - **[55bc393f7](https://github.com/facebook/react/^Cmmit/55bc393f7 )**: [Flare] Ensure we check for bad p... — committed to facebook/react-native by TheSavior 5 years ago

Most upvoted comments

FlatList and SectionList is bad performance. Try this,please. may be it is a surprise for you

https://github.com/bolan9999/react-native-largelist

+53

bolan9999 on Dec 25, 2017

Just pass onRefresh props. If you’re not using onRefresh, just pass onRefresh={ () => null }. refreshing props will now work.

+13

whizdummy on Jul 9, 2018

Still happening in RN 0.55.4…When i switch the tab in my app, and set refreshing to FlatList, the refresh indicator not show. but it can show by pull to refresh. (This problem only appears on iOS) 1531709366624

I temporarily solved the problem with the following code:

set ref for FlatList

<FlatList
        ref={ref => this.listRef = ref}
        refreshing={this.state.refreshing}
        ...
/>

Scroll the FlatList where call refresh by code(Not pull to refresh)

this.setState({refreshing: true}, () => {  
	//This code will showing the refresh indicator
 	if (Platform.OS === 'ios')  
		this.listRef && this.listRef.scrollToOffset({offset: -65, animated: true});  
	
	//Your code here  
});

+11

V1sk on Jul 16, 2018

Solved it, by setting flex: 1 styles to the root container before the FlatList

render() {
   <View style={styles.container}>
      <FlatList>
         ...
      </FlatList>
   </View>
}
...
const styles = StyleSheet.create({
   container: {
      flex: 1,
   }
})

+11

horacehylee on Sep 17, 2017

Try setting data:[] in your onRefresh function, when you set isRefreshing: true. That worked for me.

tudordanbalas on Jan 14, 2018

is still happening 😕

SergioGeeK7 on Apr 9, 2018

Same issue in RN 0.52.0.

FlatList not scrolls to show the indicator when it contains more items than can be displayed on the screen.

ocarreterom on Jan 11, 2018

I have this issue (0.53.0).

I have a button that calls the refresh handler and It works fine, showing the refreshControl indicator. The problem is the case when I first pull manually the FlatList to refresh (which also it is doing ok) and then I press that button. The refreshControl indicator is never shown again using that button.

pausabe on Feb 23, 2018

So … can anybody reopen this issue?

michalpetrov on Apr 2, 2018

Can anybody confirm that this is fixed in 0.54.x ?

michalpetrov on Mar 31, 2018

@V1sk

Your workaround is good. But it causes another problem.

Every time when the app launch, let say the first rendering, when you click the button, and the flatlist pull down more disance than expected. After then, pull down works fine.

Have any idea?

leiz-me on Aug 26, 2018

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}

react-native-bot on Feb 24, 2018