Horizontal ScrollView not scrolling inside GestureHandlerRootView.

[ahmads-code]

Description

I have component on the top half of the screen with charts scroll horizontally.

When i wrap the main component in GestureHandlerRootView the horizontal ScrollView stops working while every other ScrollView in the application is working fine. I have removed GestureDetector and every other thing that comes with react-native-reanimated and react-native-gesture-handler. The only thing that is causing it is GestureHandlerRootView. When i remove it the ScrollView continue to work.

I also used ScrollView from react-native-gesture-handler but i did'nt worked.

Here is the code from root component:

 <SafeAreaProvider>
  <GestureHandlerRootView style={{flex: 1}}>
    <SafeAreaView style={{flex: 1}}>
      <PersistGate loading={null} persistor={persistor}>
        <Provider store={store}>
          <AllProjectionTabContext>
            <PaperProvider>
              <StatusBar
                barStyle={isDarkMode ? 'light-content' : 'dark-content'}
                backgroundColor={backgroundStyle.backgroundColor}
              />
              <Main />
            </PaperProvider>
          </AllProjectionTabContext>
        </Provider>
      </PersistGate>
    </SafeAreaView>
  </GestureHandlerRootView>
</SafeAreaProvider>

This is the code from scroll view component.

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

    <>
      <ScrollView
        horizontal={true}
        pagingEnabled={true}
        snapToInterval={doubleTap ? width / 2 : width}
        decelerationRate={'normal'}
        scrollEventThrottle={500}
        contentOffset={{x: scrollRef.current, y: 0}}
        onMomentumScrollEnd={handleScroll}
        showsHorizontalScrollIndicator={false}
        disableIntervalMomentum={true}
        >
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <ChartsRow
            array={chartArray}
            refer={handleScrollPosition}
            lineTwoCheck={lineTwo}
            yearsDuration={yearsDuration}
            row={lineTwo ? 1 : 0}
          />
        </View>
      </ScrollView>

      <ScenarioNames names={inputScenarioName} />
      <YearsBar type={lineTwo ? 'lower row' : 'upper row'} />
    </>

Steps to reproduce

1. Download react-native-reanimated and react-native-gesture-handler.
2. Use a horizontal ScrollView inside GestureHandlerRootView.

Gesture Handler version

2.14.0

React Native version

0.72.5

Platforms

Android

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.