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

Can't scroll RNGH exported ScrollView on Android #3209

Open
tpcstld opened this issue Nov 13, 2024 · 0 comments
Open

Can't scroll RNGH exported ScrollView on Android #3209

tpcstld opened this issue Nov 13, 2024 · 0 comments
Labels
Platform: Android This issue is specific to Android Repro provided A reproduction with a snack or repo is provided

Comments

@tpcstld
Copy link

tpcstld commented Nov 13, 2024

Description

This might be a re-regression of #2472 not totally sure.

On an Android device with TalkBack enabled, the ScrollView exported from react-native-gesture-handler cannot be scrolled with the two-finger scroll gesture. The similar export from react-native does not have this problem.

There may be a second-layer related issue where the scrolling does work, but then after two-finger scrolling, the tap gesture (e.g. on a Pressable) stops working. I can't repro this personally but I thought I might mention it.

Steps to reproduce

Here is some sample code that can repro the issue:

import React from "react";
import {
  ScrollView as ScrollViewRN,
  Pressable,
  StyleSheet,
} from "react-native";
import {
  GestureHandlerRootView,
  ScrollView,
} from "react-native-gesture-handler";

export default function RootLayout() {
  const ScrollViewComponent = false ? ScrollView : ScrollViewRN;
  return (
    <GestureHandlerRootView
      style={[StyleSheet.absoluteFill, { backgroundColor: "red" }]}
    >
      <ScrollViewComponent>
        {[
          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
          21, 22, 23, 24,
        ].map((item) => (
          <Pressable
            key={item}
            style={{
              height: 100,
              backgroundColor: `#${Math.floor(
                Math.random() * 16777215
              ).toString(16)}`,
            }}
            onPress={() => {
              console.log("pressed");
            }}
          />
        ))}
      </ScrollViewComponent>
    </GestureHandlerRootView>
  );
}
  1. Build the app on a physical phone
  2. Enable TalkBack
  3. Try scrolling with two fingers up and down.

As shown in the following video, the scrolling only works if we're using the react-native component, and not the react-native-gesture-handler component.

scrolling.mp4

Snack or a link to a repository

https://github.com/tpcstld/rn-stuff/blob/talkback-scroll-android/app/_layout.tsx

Gesture Handler version

2.20.2

React Native version

0.74.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

None

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Pixel 7 (Android 14)

Acknowledgements

Yes

@github-actions github-actions bot added Platform: Android This issue is specific to Android Repro provided A reproduction with a snack or repo is provided labels Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: Android This issue is specific to Android Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Development

No branches or pull requests

1 participant