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

[EthanChouTW]

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}
    />

[horacehylee]

+1

[horacehylee]

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,
   }
})

[ngandhy]

flex:1 workaround doesn't work for me. Looks like #14259 tried to fix it, but they cancelled the PR (also: #10747, #15033).

@shergin - I've noticed you've rejected a few PR that might fix this. Any ideas on a way to fix this?

[laynemoseley]

I am also seeing this. Note that I'm also setting the pending value in state. Usually when we set it with props it works as normal.

[gpopovic]

same issue here...it's frustrating ...ti's not displayed properly

[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

[ocarreterom]

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.

[Mr3JZ]

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

[pausabe]

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.

[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}

[michalpetrov]

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

[harikumaraj]

+1 in RN 0.54

[michalpetrov]

So ... can anybody reopen this issue?

[SergioGeeK7]

is still happening :/

[shahchaitanya]

@pausabe @SergioGeeK7 @michalpetrov @harikumaraj @gpopovic Here is workaround.
Here is my work around.

• Initialize a local state called isScrolled to false.
• Set isScrolled state to true while calling onRefresh method of FlatList (When you pull manually)
• Check isScrolled value when you call programmable refresh function (When you
  click on Button)
  
  
  
  • If isScrolled is true then Scroll FlatList to -60. Using scrollToOffset method.
  
  
  • Set isScrolled to false.
  
  

[whizdummy]

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

[V1sk]

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)

I temporarily solved the problem with the following code:

1. set ref for FlatList

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

1. 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  
});  

[leiz-me]

@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?

[SanchitB23]

Name of the states are different, inside flatlist, it's written: refreshing, and its initialized as isRefreshing

[luongs3]

@sryze write another damn bot continuously comments

[vdongbin]

My app is made by react-native 0.57. Resfreshing work fine when flatlist has not any data. but it is still happening when i put data in flatlist. I need any solution to refresh.

[tonmanayo]

came issue, padding not been applied when going into refreshing state. Using the refreshing prop, expected behaviour. Flatlist to be padded when changing state

[smitthakkar1]

@pausabe Man, you got it. I have the same problem. let me know if you came across any solution,

[dmitryshelomanov]

same issue

[dmitryshelomanov]

@react-native-bot reop

[smitthakkar1]

@userbq201 try @V1sk 's solution. it worked for me

[dmitryshelomanov]

@smitthakkar1 it solution doesnt work correct in many use cases

[cj768025549]

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)

I temporarily solved the problem with the following code:

1. set ref for FlatList

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

1. 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  
});  

It works for FlatList, but not for SectionList.

[AEPKILL]

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)

I temporarily solved the problem with the following code:

1. set ref for FlatList

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

1. 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  
});  

Not work (React Native 0.59.8)

[Nazeerahmad1996]

extraData={this.state}
this will make sure. Whenever state changes. the flatlist will re-render

[axebelk]

Fixed by giving minHeight: 100 to FlatList component
...
style={{minHeight: 100}}
/>