Different focus order tvOS/Android

Description

In tvOS: We have a custom GoBack component on a screen which is getting focus before the screen’s useFocusEffect is run, causing the screen to lose focus immediately it is shown, effectively rendering it inaccessible.

In Android: The same GoBackdoes not get focus until the user actively backs out of the screen.

But why the different focus behaviour? Does it indicate a bug or that we are doing something wrong here?

NB: We’re still currently unable to proceed beyond 0.63.4-0 at the moment so bear with us on that, if possible 😕

React Native version:

Run react-native info in your terminal and copy the results here.

info Fetching system and libraries information… System: OS: macOS 11.5.2 CPU: (8) x64 Intel® Core™ i7-8569U CPU @ 2.80GHz Memory: 127.72 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 15.10.0 - ~/.nvm/versions/node/v15.10.0/bin/node Yarn: 1.22.11 - ~/.nvm/versions/node/v15.10.0/bin/yarn npm: 7.6.3 - ~/.nvm/versions/node/v15.10.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0 Android SDK: API Levels: 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3 System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Android TV Intel x86 Atom, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.1 AI-201.8743.12.41.7042882 Xcode: 13.1/13A1030d - /usr/bin/xcodebuild Languages: Java: 1.8.0_282 - /usr/bin/javac Python: 3.7.3 - /Users/aa/.pyenv/shims/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: Not Found react-native-macos: Not Found react-native-tvos: 0.63.4-0 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

1. Run the app in tvOS, navigate to the event details screen. Notice that you are pulled instantly back to the “swim lanes” view.
2. Run the app in android, navigate to the event details screen. Notice that you can view the screen then back out to the “swim lanes” view at your leisure.

Expected Results

I expect that both platforms should handle the focus events in the same order.

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

This Royal Opera House project, as you may recall, is fully out in the open 😃

I have added a workaround in this branch. I hide the GoBackcomponent until we are sure the useFocusEffect has run, essentially.

[douglowder]

Yes please create a new issue for this. The right way to fix this is with TVFocusGuideView, but it seems tricky to get that to work correctly in this app for some reason.

[sinewave440hz]

Still not sure actually whether I should create a new issue for this. To clarify a bit, the android navigation away from the menu works correctly - I expect that nextFocusRight is used correctly there by react-navigation. In tvOS however, we are relying on hasTVPreferredFocus being updated correctly per DigitalEventItem, which isn’t happening when the menu item changes. Looking at how to get that to happen…