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.

Answer 1

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