ReactNative Horizontal ScrollView within material-top-tabs (nested ScrollView)

Issue

I am currently trying to position a horizontal ScrollView within the content of the react-navigaion material-top-tabs (which also scrolls horizontally).

The expected behavior:

When dragging within the horizontal ScrollView, only the ScrollView should be affected and scroll.

Current behavior:

Sometimes when dragging within the horizontal ScrollView, the entire top tabs scroll. (The tab is being switched) which is a nightmare for UX.

Do you know of any way to make it work the way it is intended?

Code Snippets:

Navigation.js

// Importing Top Tabs creator
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

...

// Creating the Tab Navigator
const Tab = createMaterialTopTabNavigator();

...

// Configure Navigator
<Tab.Navigator
  initialRouteName="Tab 1"
  screenOptions={{
    headerShadowVisible: false,
    headerStyle: {
      backgroundColor: colors.background,
    },
  }}
  // Using custom TabBar component
  tabBar={(props) => <TabBar {...props} />}
>
  // The horizontal ScrollView is in "Tab 1"
  <Tab.Screen
    name="Tab 1"
    component={Screen1}
    options={{
      headerShown: false,
      unmountOnBlur: true,
    }}
  />
  ...
  <Tab.Screen
    name="Tab 4"
    component={Screen4}
    options={{
      headerShown: false,
        unmountOnBlur: true,
      }}
    />
</Tab.Navigator>

HorizontalScrollView.js

<ScrollView
  style={{
    display: "flex",
    flexDirection: "row",
    backgroundColor: colors.background,
    paddingHorizontal: 10,
  }}
  horizontal
  showsHorizontalScrollIndicator={false}
  overScrollMode="never"
>
  ...
</ScrollView>

Solution

What worked for me was using the ScrollView component imported from 'react-native-gesture-handler' instead of 'react-native'.

I didn't have to do any additional setup, and it works fine.

import {ScrollView} from 'react-native-gesture-handler';

Answered By - MIPB