Android: touch events are executed twice when talkback is enabled

[IvanIhnatsiuk]

Description

Hello, thanks for your library it is really good and very powerful 😎 .

I found an issue that when talkback is enabled, the onPress call occurs multiple times when interacting with the buttons.

Screen.Recording.2024-03-15.at.17.07.21.mov

In the video the goBack callback was called twice, so I was navigated to the Accounts tab :)

Steps to reproduce

1. Enable talkback on android emulator
2. Run your example application on android emulator/real device
3. Press on any button
4. observe that onPress was executed twice

Snack or a link to a repository

https://github.com/software-mansion/react-native-gesture-handler

Gesture Handler version

2.15.0

React Native version

0.72.10

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 7 pro

Acknowledgements

Yes

[github-actions]

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?

[m-bert]

Hi @IvanIhnatsiuk! I've just tested that on my Samsung S20+ and Pixel 6a emulator - both work fine. To test that, I've added logs into onPress callbacks in RectButtons. Could you provide a reproduction that we can look at?

[IvanIhnatsiuk]

@m-bert Hello, I think you can reproduce this in your example app. To reproduce this, I simply updated the App.tsx file to

import React from 'react';
import {
  BorderlessButton,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import { Text } from 'react-native';

const press = () => console.log('pressed');

export default function App() {
  return (
    <GestureHandlerRootView style={{ justifyContent: 'center', flex: 1 }}>
      <BorderlessButton onPress={press}>
        <Text>Press me</Text>
      </BorderlessButton>
    </GestureHandlerRootView>
  );
}

Screen.Recording.2024-03-28.at.10.15.14.mov

Please, let me know if you need more details :)

[m-bert]

Hello @IvanIhnatsiuk! I've copied your code and everything is fine:

Nagranie.z.ekranu.2024-04-2.o.10.35.15.mov

It also works on my physical Samsung S20+

[m-bert]

I can see that you're using another emulator, I'll try to test that on Pixel 7

[m-bert]

Okay, I've tested that on Pixel 7 Pro emulator and I still wasn't able to reproduce this issue.

[IvanIhnatsiuk]

@m-bert Sorry for the long reply, could you please try this code?

import React from 'react';
import {
  BorderlessButton,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import { Text, View } from 'react-native';

const press = () => console.log('pressed');

export default function App() {
  return (
    <GestureHandlerRootView style={{ justifyContent: 'center', flex: 1 }}>
      <BorderlessButton onPress={press}>
        <View accessible accessibilityRole="button">
          <Text>Press me</Text>
        </View>
      </BorderlessButton>
    </GestureHandlerRootView>
  );
}

[m-bert]

Thank you @IvanIhnatsiuk! Now I can reproduce this issue. Seems like the problem lies in additional View inside BorderlessButton - without it it works fine, but I guess that iOS doesn't work in that case (I have yet to check that).

[IvanIhnatsiuk]

Yes, the problem is in additional view element. However, we need to add this view to make buttons accessible: https://docs.swmansion.com/react-native-gesture-handler/docs/components/buttons/

[IvanIhnatsiuk]

Also, Could you please remove "can't repro" label? 🙂

[m-bert]

Also, Could you please remove "can't repro" label? 🙂

Sure, done 😄

However, we need to add this view to make buttons accessible

I'm aware of that. As far as I can tell buttons should work without this View on android. I'm not sure about iOS though since I don't have access to iPhone right now and testing accessibility on simulator is not pleasant. I'll get back to you when we find a solution to this problem 😅