Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RectButton doesn't trigger onPress callback when pressed with keyboard Enter/Space key

See original GitHub issue

Description

When you focus a react-native Pressable component with the keyboard, then press Enter or Space, then the onPress callback is called. This is not the case with the RectButton component of react-native-gesture-handler.

Doesn’t this reflect an accessibility problem?

Steps to reproduce

Clone the repro project
Run it on Android
Using “Tab”, focus the RectButton, then press enter: nothing appears in the logs
Also using “Tab”, focus the Pressable, then press enter: a log appears.

Snack or a link to a repository

https://github.com/Thanaen/AccessibleRectButton

Gesture Handler version

2.6.0

React Native version

0.70.0 (also happens on 0.68.3)

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 4 (API 31)

Acknowledgements

Yes

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

Thanaencommented, Sep 8, 2022

Ok, thanks for your analysis.

I’ll leave the issue open, so that you have the opportunity to address the problem when you can and want to. 😄

1reaction

j-piaseckicommented, Sep 7, 2022

Unfortunately this looks to be a design flaw in the Gesture Handler logic as it heavily relies on intercepting MotionEvents and operating on those. Since GH’s buttons need to be paired with NativeViewGestureHandler to work properly, they require touch interaction to activate.

I don’t think this can be changed in the near future since it would require a lot of changes to the core of Gesture Handler, but if you need this functionality to work here’s a bit hacky workaround that can make it work. Keep in mind I haven’t tested it that much, so it may not be working correctly all the time.

Top Results From Across the Web

Why does the "Enter" key not trigger onKeyPress in React ...

You can use onSubmitEditing which is: Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is ...

How to get the enter key in ReactJS ? - GeeksforGeeks

Users can interact with the UI and press Enter Key to trigger an event through this. We will be creating an input field...

Buttons | React Native Gesture Handler - Software Mansion

BaseButton; RectButton; BorderlessButton ... <RectButton onPress={this. ... function that gets triggered when the button gets pressed (analogous to onPress ...

Button - NativeBase

The Button component triggers an event or an action. Examples can be submitting forms and deleting a data ... return <VStack space={4} alignItems="center">....

Untitled - bitsavers.org

SELECT is pressed, the active or inactive caret that marks the insert point is ... If an OPEN LOOK application doesn't handle keyboard...