React-native-gesture-handler: FlatList refresh control

Created on 3 May 2019  路  3Comments  路  Source: software-mansion/react-native-gesture-handler

Replacing the standard react-native FlatList with the one from this library has made refreshing not work. I'm setting the refreshing and onRefresh props like normal and no refresh control appears. Is there further setup for this library?

Most helpful comment

@tallen11 - I had the same issue, appears that the FlatList component from the gesture handler lib doesn't support onRefresh & refreshing props directly on the component, like the RN component. Instead add the RefreshControl element prop to the FlatList component like so:

<FlatList
  refreshControl={
    <RefreshControl
      refreshing={this.state.isRefreshing}
      onRefresh={() => this.refreshMethod()}
    />
  }
/>

All 3 comments

Could you add some example? I'm using it and it works okay for me

@tallen11 - I had the same issue, appears that the FlatList component from the gesture handler lib doesn't support onRefresh & refreshing props directly on the component, like the RN component. Instead add the RefreshControl element prop to the FlatList component like so:

<FlatList
  refreshControl={
    <RefreshControl
      refreshing={this.state.isRefreshing}
      onRefresh={() => this.refreshMethod()}
    />
  }
/>

I have the same problem.

@osdnk - Let say we have the following:
<FlatList data={data} renderItem={renderItem} refreshControl={ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> } />;

I've realized that RNGH behaves differently in the two following scenarios:

1) RefreshControl works if renderItem has the following shape:
const renderItem = () => ( <View> <Text>Foo</Text> </View> )

2) But it doesn't work for the following:
const renderItem = () => ( <View> <Text>Foo</Text> <Text>Bar</Text> </View> )

No idea what is causing this though

Was this page helpful?
0 / 5 - 0 ratings