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

Can't scroll RNGH exported ScrollView on Android #3209

Open tpcstld opened 1 week ago

tpcstld commented 1 week ago

Description

This might be a re-regression of https://github.com/software-mansion/react-native-gesture-handler/issues/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.

https://github.com/user-attachments/assets/c227a018-eadd-4d9a-88ef-c0904b4cb739

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