FlatList onRefresh doesn't work with SafeAreaView - ios

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