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,

[alexey-saphonov]

Hi everyone,

I am experiencing this exact issue in a production app I am working on, which severely impacts our accessibility compliance for iOS Full Keyboard Access users.

To help move this forward, I have created a minimal reproducible example:
📱 Expo Snack Demo

The Behavior:

When navigating via Tab using iOS Full Keyboard Access, the system treats the entire FlatList as a single, opaque element. Instead of focusing on individual items inside the list, the focus indicator skips the children entirely.

Since this blocks keyboard navigation for critical feed and list components, reanimating this topic is highly important for anyone building accessible React Native apps on iOS. I hope this reproduction helps the maintainers or contributors isolate the root cause!

[ArturKalach]

Hello @alexey-saphonov,

It makes sense to create a separate issue, as this one is for programmatic focus navigation. I'm not sure about the RN team's priorities, but it makes sense to create another one for visualisation.

Regarding Full Keyboard Access, FKA uses Tab for navigation between groups. Have you tried Ctrl+Tab for navigation between individual elements?

Another point: it could be a recycling issue or a problem with preferredFocusEnvironments. I've experienced something like this and had a workaround for it. If you have a prebuild with Expo, you can also try react-native-external-keyboard.

Just install and run the app, it should work on its own as there is some swizzling logic. If it fixes the issue, it's almost certainly a preferredFocusEnvironments problem. If not, it's an interesting case worth investigating further.

---

Please let me know if it works or not, just simple curiosity!