React Native Refresh Control of FlatList Does Not Work Inside a Horizontal Scroll View

Question

I am trying to create a paginated horizontal scroll view with its own vertical lists on each page. Each page must be a FlatList since I will be needed onEndReached function + I want to use refresh control component.

However, using simple implementation, the refresh control does not work on iOS (Android works just fine). Below i have included a reproducible snippet of my code.

const renderItem2 = ({ item }: { item: number }) => {
    return <View style={{ width: SCREEN_WIDTH }}>
      <Text>item #{item}</Text>
    </View>
  }

  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh2 = React.useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }, []);

  return (
    <ScrollView
      //scrollEnabled={false}
      pagingEnabled
      contentContainerStyle={{ backgroundColor: 'pink' }}
      horizontal>
      <FlatList
        data={[1, 2, 3]}
        renderItem={renderItem2}
        ListEmptyComponent={<ListEmptyComponent />}
        refreshing={refreshing}
        onRefresh={onRefresh2}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh2} />}
      />

      <FlatList
        data={[2, 3, 4]}
        renderItem={renderItem2}
        ListEmptyComponent={<ListEmptyComponent />}
        refreshing={refreshing}
        onRefresh={onRefresh2}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh2} />}
      />

      <FlatList
        data={[5, 6, 7]}
        renderItem={renderItem2}
        ListEmptyComponent={<ListEmptyComponent />}
        refreshing={refreshing}
        onRefresh={onRefresh2}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh2} />}
      />
    </ScrollView>
  )

the vertical scroll on flat list is not getting recognised if the elements do not take the whole screen (if the flat list's data is not large enough, or empty). Also, if i uncomment scrollEnabled={false} everything would work fine.

My suggestion that the problem is somewhere in detecting scroll touches for FlatList, but i can't figure out what is the exact problem.

Answer 1

I have found a working solution by using react-native-pager-view. It supports sliding pages from the box and each list works well with refresh controls and onEndReached function.

Answer 2

add horizontal property in FlatList instead of using ScrollView because FlatList already have built-in scrolling feature Click here