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

[avin3sh]

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.

TheFlatList 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.

[akhil-geekyants]

@avin3sh NativeBase <Content/> component is an implementation of <ScrollView>. You can use any method with <Content/>, that makes pull to refresh work inside a <ScrollView/>.

[akhil-geekyants]

Closing this due to no response.

[immortalx]

I have the same issue.
It doesn't work inside <Content /> or <ScrollView />. Maybe its a react-native issue?

[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>
...
)

[SupriyaKalghatgi]

Check with NativeBase 2.4.3
Also check release notes for this

[Yandamuri]

@kstolte Pull to refresh is working fine when I followed your solution. But the problem is unable to scroll the content down because, When I scroll down always pull to refresh is being called.How can I prevent this?

[jhoanborges]

i had the same problem and i fixed it wrapping it into a Container instead of Content (i'm using Native Base).

[Aabir1]

I have the same problem and I fixed it By

[bscaspar]

Hey @akhil-geekyants putting the onRefresh and refreshing props in <Content> doesn't work for me since my FlatList is on a screen with other non-list elements, all nested in <Content>. Additionally, I use one RenderList component across a number of different screens, all of which nest the list and/or other components in <Content>. The refresh control needs to show on the FlatList only, not on the whole screen. Is this an accepted use case for <Content>? If not, what would you recommend as a different structure? I've tried all the workarounds suggested in related issues in this snack, which I reverted to basic working state, with no luck 😕

[ikeliec]

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.

TheFlatList 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.

Removing it from Content will make it work.