There is no way to manage focus for external keyboard from one element to another

[nedgip]

Description

Sometimes we need to set external keyboard focus from one place to another, for instance from one Pressable to another Pressable, or from a Pressable to a View.

For Screen Reader users we can use AccessibilityInfo.setAccessibilityFocus(tag) to manage focus, but this technique does not work for the external keyboard when a screen reader is not switched on.

The standard React method of ref.current.focus() also does not work for external keyboard users on mobile (only web).

React Native Version

0.71.3

Output of npx react-native info

I don't have access to this.

Steps to reproduce

On Android or iOS physical device:

1. Connect a hardware keyboard to the device using bluetooth.
2. Open https://snack.expo.dev/@nedgip/external-keyboard-focus-example-1 in Expo Go
3. Navigate to the Send focus button using arrow keys
4. Press Space

Expected

Focus should move to the Receive focus button

Actual

Focus remains on the Send focus button

Snack, screenshot, or link to a repository

1. https://snack.expo.dev/@nedgip/external-keyboard-focus-example-1
2. https://snack.expo.dev/@nedgip/external-keyboard-focus-example-2

[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 - 0.71.12. 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.

[nedgip]

I've confirmed this is still an issue in React Native version 0.72.3.

Output of npx react-native info

System:
OS: Windows 10 10.0.22621
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
Memory: 9.79 GB / 31.73 GB
Binaries:
Node:
version: 18.12.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.19
path: ~\AppData\Roaming\npm\yarn.CMD
npm:
version: 9.1.3
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-213.7172.25.2113.9123335
Visual Studio:
- 17.6.33815.320 (Visual Studio Community 2022)
Languages:
Java:
version: 19.0.2
path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.3
wanted: 0.72.3
react-native-windows: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

[consuelo-sanna]

There are a few other issues that tackle the same problem, keyboard focus and management.
As explained by blavalla in this comment Android manages the keyboard and screen reader focus differently, so there's the need to reflect that on React Native

Here you can see another comment with a possible solution, I think adding the focusability property with the option to also block the descendants could solve the issue
I don't think I can make a PR for that though, but if there's something else I can do to help let me know.

In the meantime we can have a unique conversation here if needed, so I'll link another related issue - #34737

[dimitar-toshevski]

Bumping up this issue since a fix is still needed. We have cases when we open a modal with just text content and we need to immediately focus the Dismiss button after opening the modal, which does not work currently on Android (native) - react-native v.0.76.6 and expo v.52.0.31.

[ArturKalach]

Hello everyone,

I have been working extensively on external keyboard support and have finally released a new version of my library with keyboard focus management.

To address the problem, you can try it out here: react-native-external-keyboard.

I believe this could be a solution for you:

import { useRef } from 'react';
import { Button } from 'react-native';
import {
  BaseKeyboardView,
  type KeyboardFocus,
} from 'react-native-external-keyboard';

export const Example = () => {
  const ref = useRef<KeyboardFocus>(null);
  const action = () => {
    ref.current?.focus();
  };

  return (
    <BaseKeyboardView ref={ref}>
      <Button title="Target" />
    </BaseKeyboardView>
  );
};

Regards,