[ANDROID TV] Focus gets lost between page transitions

[yusufyildirim]

Description

Focus management is very important for TV applications and there's this big problem that has been hurting react-native-tvos community for a long time.

TV app users typically navigate around the UI items using their remote's d-pad. On every d-pad action, the currently focused element changes on the screen. It's crucial to restore the focus when user navigates to a different screen and then comes back to the previous one. Users should always continue their journey where they left off.

I'm assuming due to working principles react-native-screens, Android loses the track of last focused element and hence can not recover the focus natively. As a result, a new focus search begins on every page transition and focus gets lost. Here's how it looks:

Screen.Recording.2023-01-31.at.23.09.36.mov

As can be seen on the screen recording, I navigate to a screen by triggering onPress action of the (4) Text input example -- I'll call it Button 4 -- button. Later, I come back to the previous screen using the back button. Since Button 4 was the last element that had the focus on the previous screen, it should regain the focus when we navigate back.

Here's the expected behavior:

Screen.Recording.2023-01-31.at.22.57.07.mov

Steps to reproduce

1. Clone https://github.com/yusufyildirim/TVInputDemo/tree/focus-bug-repro repo
2. Run the app using yarn android command
3. Focus one of the elements on the screen and press enter to navigate to another screen
4. Come back to previous screen
5. See the focus is lost

Snack or a link to a repository

https://github.com/yusufyildirim/TVInputDemo/tree/focus-bug-repro repo

Screens version

3.18.2

React Native version

0.69.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

None

Architecture

Paper (Old Architecture)

Build type

None

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[yusufyildirim]

Here I have a potential solution: douglowder/TVInputDemo#1

Only check the patch file, the rest is unrelated to react-native-screens 😄

[kkafar]

@yusufyildirim,
Android TV is not one of our directly supported platforms, but unless your patch causes some issues on Android, I think we can try to integrate it. I'll be back with more info after I play around with this patch.

[matias-sandell]

Would love to see this fix in react-native-screens! Have you had time to check it yet @kkafar?

[ROG3R-DEV]

I am also waiting for this problem to be fixed.

[josefnorlin]

We're patching this in and have for a couple of months now. Works great!

Is there any way we can get this approved?

[tboba]

Hi @yusufyildirim, thank you for this PR! Sorry for late feedback 😅

I've just tested your patch file and it looks awesome! However, while I was testing those changes on Android it seems that there is also a focused state on mobile devices 🤔

Changing.state.on.mobile.mov

I achieved changing this state with buttons on keyboard - I'm still not sure how can I switch between focused elements by touching. I'll block selecting last focused child in non-TV devices for now, but It's worth discussing if the focused state should be also saved on the phones. I'll open PR with this patch shortly ✌️

[yusufyildirim]

@tboba Thank you very much! I was thinking this could be a problem for TalkBack mode (even though I'm not sure how it works) but I forgot keyboards, controllers etc is a thing on mobile devices, so is focus. Thanks for the update 😄

[tboba]

Hey @yusufyildirim @matias-sandell @ROG3R-DEV @josefnorlin, just a quick announcement - the PR with this change has been merged to main and will land in the newest version of react-native-screens! Stay tuned 🎉