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

1. react-native -v: 0.46.0
2. node -v: v6.9.1
3. npm -v: 3.10.8
4. yarn --version: 0.24.5

• Target Platform: iOS android works fine

• Development Operating System: macOS

• Build tools: Xcode

Steps to Reproduce

1. set refreshing state to true then call api, but refresh indicator on flatList not always automatically pull down
2. 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}
    />

[bolan9999]

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

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

[whizdummy]

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