Introduce props keyDownEvents
and keyUpEvents
#2171
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
(Note: Anywhere I say
keyDownEvent
orvalidKeysDown
, assume it also applies tokeyUpEvents
orvalidKeysUp
)Summary:
React Native macOS and React Native Windows have different APIs for keyboard events. RNM will by default send no keyboard events to JS (unless specified in
validKeysDown
, at which point it will suppress native handling of that event). RNW will send all events to JS, and its' propkeyDownEvents
only surpasses native handling. This difference has caused real bugs and issues writing cross platform keyboard handling code.To bridge the gap slightly, #1867 introduced a new macOS only prop
passthroughAllKeyEvents
, that would tell it's component to send all events to JS. In that PR, we also updated the type ofvalidKeysDown
to better resemblekeyDownEvents
. With that PR in place, this meant setting bothvalidKeysDown
andpassThroughAllKeyEvents
effectively mimicked the behavior of React Native Windows.Let's take this one step further. Let's introduce the prop
keyDownEvents
. This prop will, at the level of<View>
, simply setpassthroughAllKeyEvents
to true, and overridevalidKeysDown
with the value inkeyUpEvents
. This way, we need to make no native changes to our keyboard handling code.Let's introduce this PR to introduce the new props and deprecate the old props in RNM version 0.74 , and then have a followup PR (Probably #1615 ) remove the old props (and update the native handling) in RNM version 0.75
Also in this PR: We were inconsistent about which variants of
Touchable
had the propvalidKeysDown
. Let's be consistent: Remove it from all of them, and set it only onPressable
. This matches RNW, and the typescript types.Test Plan:
Updated the RNTester example to add a new switch to set
keyDownEvents
. TextInput looks iffy, but we already have disclaimers that the keyboard event API doesn't work quite as well there.Screen.Recording.2024-08-21.at.11.50.47.PM.mov