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.
2
Answers
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 andonEndReached
function.add horizontal property in FlatList instead of using ScrollView because FlatList already have built-in scrolling feature Click here