Keyboard access to React Navigation "formSheet" screen on Android

[timoisalive]

We'd like to use the React Navigation "formSheet" presentation mode to implement our bottom sheets, but unfortunately on Android the screen content does not automatically get focused, but the focus stays on the underlying screen.

Ideally, this should get fixed in the react-native-screens library, but I was thinking if I could workaround it with react-native-external-keyboard. I am able to get the screen content focused, but the focus does not stay within the formSheet screen, it cycles between the components of the underlying screen and the sheet screen.

So the question is if there is a way to restrict the focusable components within the formSheet screen?

[ArturKalach]

Hello @timoisalive,

Sorry for the delay with my reply, but I have been busy lately.

I guess it depends on the formSheet implementation and where it is rendering. As mentioned, react-navigation uses react-native-screens with Fragment navigation behind the scenes. When navigating between screens, it hides the fragment content using importantForAccessibility.

React Native also provides the importantForAccessibility functionality. The easiest way to fix this issue might be wrapping everything you want to hide from the keyboard with:

<View importantForAccessibility="no-hide-descendants">...</View>

It should prevent the reader and keyboard focus from getting inside. Alternatively, I think it might be possible to patch or add functionality to react-navigation or react-native-screens, but that would likely require additional time and expertise.

I will try to look into this, but it might take some time.

---

If you have any additional questions or notes, I would be glad to help.
It would also be greatly appreciated if you could share any results you achieve.

---

Regards,
Artur Kalach

[timoisalive]

Hey Artur, thanks for your response!

I tried the importantForAccessibility prop but wasn't able to make any difference with or without it. 😢

Unfortunately I don't have the expertise patching the libraries, so I dropped an issue instead:

software-mansion/react-native-screens#3188

And thanks a lot for your time and effort with the a11y topic in general! ❤️