hasTVPreferredFocus not working on AndroidTV after initial render

Description

It works perfectly on tvOS, but on AndroidTV it looks like hasTVPreferredFocus works only on the initial render, and all subsequent times you would visit the screen or navigate back it is ignored.

I have created a new react-native-tvos project using the latest version (0.69.6-0) and set up a basic demo with some top-level screens & detail screens to reproduce this issue. I’m using @react-navigation/stack.

Would love to see this fixed and will help & assist wherever I can!

Version

0.69.6-0

Output of npx react-native info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M2
    Memory: 232.98 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
    Watchman: 2022.11.14.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/wouterds/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 26, 28, 30, 31
      Build Tools: 28.0.3, 30.0.2, 30.0.3, 31.0.0
      System Images: android-31 | Google TV ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: Not Found
    react-native-macos: Not Found
    react-native-tvos:  0.69.6-0 
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Run the example project
2. Go to a random item from any swimlane
3. Navigate back

On tvOS the item you navigated back from will be focused using hasTVPreferredFocus, on AndroidTV nothing will be focused and the user will be looking for his cursor that seemingly disappeared. Edit: I’m not sure but maybe it’s related to the text nodes getting focus (https://github.com/react-native-tvos/react-native-tvos/issues/389). This also might be related https://github.com/react-native-tvos/react-native-tvos/issues/380.

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

Example repository where the issue can be reproduced: @wouterds/react-native-tv-example

https://user-images.githubusercontent.com/1210628/202938737-301e7190-b029-4975-8103-fc90ca25438b.mp4

https://user-images.githubusercontent.com/1210628/203295163-ebbba8ac-1080-412a-8151-dd89d9bea0eb.mp4

[wouterds]

I have found a *workaround* for AndroidTV (https://github.com/wouterds/react-native-tv-example/pull/1/commits/852b889db67d966670a89104f7873a066d5359f0) that works in my demo project (it’s on the feature/experimental-focus branch if you want to try it out).

https://user-images.githubusercontent.com/1210628/203538986-0040b3f5-b9e2-4bf0-9213-79f485e6cc39.mp4

If you force focus through native props with 1ms delay it works, basically something along those lines

setTimeout(() => ref.current.setNativeProps({ hasTVPreferredFocus: true }), 1)

Don’t think that needs a lot of explanation that this is just a dirty workaround and not a fix, we should still get to the bottom of this and find out why it works fine on tvOS but not on AndroidTV.

[douglowder]

This is a great find and indicates that the problem is in the Android preferred focus native implementation. Probably the native code is not getting notified when the JS property changes.