Nesting Horizontal FlatList inside TabView (same orientation)

Viewed 657

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)

2 Answers

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

Related