2

I am rendering an horizontal FlatList (from react-native-gesture-handler) inside one of the pages of my top TabView (from react-native-tab-view)

The main problem I am having is that the FlatList scroll "priority" is greater than the TabView's one, so if I want to swipe the top TabView, I have to put the finger outside the FlatList (something which is not really professional).

Here is the FlatList code:

<FlatList
  data={data}
  renderItem={renderItem}
  horizontal
  pagingEnabled
  showsHorizontalScrollIndicator={false}
  style={styles.container}
/>

And the TabView's code:

<TabView
  style={styles.tabView}
  renderTabBar={renderTabBar}
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={setIndex}
  initialLayout={initialLayout}
  removeClippedSubviews={false} // Pd: Don't enable this on iOS where this is buggy and views don't re-appear.
  swipeEnabled={true}
  swipeVelocityImpact={0.2}
  gestureHandlerProps={{
    activeOffsetX: [-30, 30], // To solve swipe problems on Android
  }}
/>

Is there any way to allow the user to swipe the parent component (the TabView) when scrolling the child (the horizontal FlatList)

Victor Molina
  • 2,353
  • 2
  • 19
  • 49

2 Answers2

0

Have you tried setting scroll enable to false in the FlatList?

https://reactnative.dev/docs/scrollview#scrollenabled

Gilad Shnoor
  • 374
  • 3
  • 12
0

If so, why do you need the flatList component as horizontal scrollable?

Anyway, I found a little tricky solution : wrap entire component result of renderItem of flatList as <TouchableWithoutFeedback/>.

Taeho Jeong
  • 51
  • 1
  • 5