Pull to Refresh does not work when FlatList nested inside <Content>

I am on react-native 0.53.3 and native-base 2.3.9.

I am using FlatList from react-native because some of the features which are not readily available in native-base’s List component. And there is this one issue I am not able to solve.

The FlatList api of react-native provides native pull to refresh ability. While it works perfectly when FlatList is embedded inside <View>, it doesn’t work if I nest it inside <Content>, pulling would simply do nothing.

I suspect this has something to do with margin and other styling elements because if you simply nest FlatList inside <Content>, the top and bottom margin won’t fit perfect and you will have to use padding/margin styling to make the FlatList not go out of the view port.

[kstolte]

I also ran into this. Resolved it on my side by making the

import { StyleSheet, RefreshControl } from 'react-native';

...
render(
  <Content refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} />}>
       <List .../>
      </Content>
...
)

[Aabir1]

I have the same problem and I fixed it By <Content padder contentContainerStyle={{ flex: 1 }}>