FlatList onRefresh doesn't work with SafeAreaView

Question

Pull to refresh causes endless spinner and don't calling onRefresh when app tested on iPhone. On Android and iOS devices with home button everything works as expected.

ReactNative version: 0.58.3

When flex:1 removed from container style, everything works fine but it ruins a markdown of screen. Using ScrollView causes same problem.

render() {
  return (
  <View style={styles.container}>
    <SafeAreaView style={styles.safeAreaView}>
      <Toolbar
        leftElement="menu"
        centerElement="sometext"
        style={{ container: { backgroundColor: '#ffa500' } }}
        searchable={{
          autoFocus: true,
          placeholder: 'Search',
          onChangeText: text => this.searchFilterFunction(text),
          onSearchCloseRequested: () => this.resetSearchFilter()
        }}
        onLeftElementPress={() => this.props.navigation.openDrawer()}
      />
    </SafeAreaView>

      <FlatList 
          data={this.state.data}
          keyExtractor={this.keyExtractor}
          ItemSeparatorComponent={this.renderSeparator}
          contentContainerStyle={{paddingLeft: '3%', paddingBottom: '4%'}}
          refreshing={this.state.refreshing}
          onRefresh={this.getData}
          renderItem={({item}) => 
            <PartnerCardComponent 
              partnerName={item.name} 
              discount={item.discount}
              url={item.url}
              image={item.image}
              phone={item.telephones}
              address={item.locations}
              description={item.description}
              navigation={this.props.navigation}
            />
          }
      />
      <SafeAreaView style={styles.bottomArea}/>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  safeAreaView: {
    backgroundColor: '#ffa500',
    shadowColor: 'gray',
    shadowOffset: {height: 1, width: 0},
    shadowOpacity: 0.5,
  },
  bottomArea: {
    backgroundColor: 'white',
    shadowColor: 'white',
    shadowOffset: {height: -5, width: 0},
    shadowOpacity: 5,
  }
});

Expected: updating FlatList data

Receiving: endless spinner rotation, onRefresh doesn't calling.

make sure you have `refreshing:false` after you fetch your data — displayname, Apr 16 '19 at 02:55
Fetching data proceed only when screen loads (on componentDidMount) and yes, refreshing sets back to 'false' after fetching. When i using pull to refresh, onRefresh don't working, so fetching don't proceed and 'refreshing' value don't change. — Ruslan, Apr 16 '19 at 07:26

score 4 · Accepted Answer · answered May 08 '19 at 15:08

I had a similar situation (though my FlatList was inside a SafeAreaView, not surrounded by them). What worked for me was using a, in my opinion, vaguely described RefreshControl component rather than setting the onRefresh and refreshing props directly. Without seeing the rest of your code (and importing RefreshControl from react-native) I've just dropped it in:

...
<FlatList
  data={this.state.data}
  keyExtractor={this.keyExtractor}
  ItemSeparatorComponent={this.renderSeparator}
  contentContainerStyle={{paddingLeft: '3%', paddingBottom: '4%'}}

      refreshControl={<RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this.getData}
      />}

  renderItem={({item}) =>
    <PartnerCardComponent 
      partnerName={item.name} 
      discount={item.discount}
      url={item.url}
      image={item.image}
      phone={item.telephones}
      address={item.locations}
      description={item.description}
      navigation={this.props.navigation}
    />
  }
/>
...

can you check this Q please! https://stackoverflow.com/questions/58780167/i-cant-re-render-the-flatlist-after-empty-data — Oliver D, Nov 09 '19 at 14:30

FlatList onRefresh doesn't work with SafeAreaView

1 Answers1