Skip to content

Can't scroll RNGH exported ScrollView on Android #3209

@tpcstld

Description

@tpcstld

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Platform: AndroidThis issue is specific to AndroidRepro providedA reproduction with a snack or repo is provided

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions