Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal scroll view not working inside GestureHandlerRootView #3186

Closed
ahmads-code opened this issue Oct 25, 2024 · 3 comments
Closed

Horizontal scroll view not working inside GestureHandlerRootView #3186

ahmads-code opened this issue Oct 25, 2024 · 3 comments
Labels
Missing info Missing repro Platform: Android This issue is specific to Android

Comments

@ahmads-code
Copy link

ahmads-code commented Oct 25, 2024

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 github-actions bot added the Platform: Android This issue is specific to Android label Oct 25, 2024
Copy link

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?

Copy link

github-actions bot commented Oct 25, 2024

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 ahmads-code reopened this Oct 25, 2024
@ahmads-code ahmads-code changed the title Horizontal ScrollView not scrolling inside GestureHandlerRootView. Not an issue Oct 25, 2024
@ahmads-code ahmads-code changed the title Not an issue Needed to be deleted Oct 25, 2024
@ahmads-code ahmads-code changed the title Needed to be deleted Horizontal scroll view not working inside GestureHandlerRootView Oct 25, 2024
@ahmads-code ahmads-code reopened this Oct 25, 2024
@ahmads-code
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Missing info Missing repro Platform: Android This issue is specific to Android
Projects
None yet
Development

No branches or pull requests

1 participant