[ios] onKeyPress doesn't fire for external keyboard Arrow events

[alexHewittProcter]

Description

When using an external keyboard on mobile devices with my TextInput component, it doesn't fire events for any of the Arrow keys, however when running my expo app in web these events are fired. Arrow events aren't ignored on mobile as I'm able to use the to move the cursor in the input.

• I've tried this on both my ipad pro keyboard case and whilst running the ios simulator on my computer and using my laptop and external keyboard to try
• I've already tried to use libraries like https://www.npmjs.com/package/react-native-keyevent with no luck
• I've also just tried this using the latest version of react native and it still doesn't work

Whilst on mobile devices, the default keyboards don't have the 4 arrow keys, external keyboards are becoming more and more common and I feel like these events should be expected to be firing?

React Native Version

0.70.5

Output of npx react-native info

System:
OS: macOS 13.0
CPU: (10) arm64 Apple M1 Pro
Memory: 1.21 GB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.4.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.5.0 - /opt/homebrew/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.12.0 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9619390
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Use the below component in a React native project

• Using either the IOS simulator using your computer keyboard not the simulator keyboard or a device that has its own external keyboard
• Press all 4 of the arrow keys and nothing is fired or logged

Snack, code example, screenshot, or link to a repository

import React from "react";
import {
  TextInput,
  NativeSyntheticEvent,
  TextInputKeyPressEventData,
} from "react-native";

const ArrowKeyTextInput: React.FC = () => {
  const handleKeyPress = (
    event: NativeSyntheticEvent<TextInputKeyPressEventData>
  ) => {
    if (
      event.nativeEvent.key === "ArrowLeft" ||
      event.nativeEvent.key === "ArrowRight" ||
      event.nativeEvent.key === "ArrowUp" ||
      event.nativeEvent.key === "ArrowDown"
    ) {
      console.log(`Arrow key pressed: ${event.nativeEvent.key}`);
    }
  };

  return <TextInput onKeyPress={handleKeyPress} />;
};

export default ArrowKeyTextInput;

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[alexHewittProcter]

Forgot to mention in the original post (have edited since) - before posting this issue I used this component in a fresh expo project and I'm still experiencing the same issue!

[blakef]

You're correct, this isn't supported (I've reproduced on latest and taken a quick look at the code).

We're collecting feature requests like this on react-native-community/discussions-and-proposals.

Some useful links:

• there's a similar request Increase support for keyboard events react-native-community/discussions-and-proposals#249, and
• it looks like there's already work started on this here: RFC: React DOM for Native (reduce API fragmentation) react-native-community/discussions-and-proposals#496.

[alexHewittProcter]

Thanks Blake!

[takeshicamilo]

Im also dealing with this problem, does anyone already found a solution?