software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.13k stars 982 forks source link

Horizontal scroll view not working inside GestureHandlerRootView #3186

Closed ahmads-code closed 3 weeks ago

ahmads-code commented 3 weeks ago

Description

I have component on the top half of the screen with charts scroll horizontally. Screenshot 2024-10-25 at 7 00 29 PM

When i wrap the main component in GestureHandlerRootView the horizontal ScrollView stops working.

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.

    <>
      <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] commented 3 weeks ago

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] commented 3 weeks ago

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.

ahmads-code commented 3 weeks ago

Issue Resolved: Use Scrollview from react-native-gesture-handler