Unsure how to best use the TVFocusGuideView to solve our navigation menu focus issues

Description

As discussed in #235 (Different focus order TV/Android), we are having trouble setting the correct focused elements with our custom NavMenu. I have tried a few ways, but am unsure how best to use the TVFocusGuideView here or indeed if this reveals a bug somewhere.

React Native version:

Our main repo is running on 0.63.4-0 but to rule out update issues I upgraded here to latest react-native-tvos:

info Fetching system and libraries information...
System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 3.05 GB / 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
  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.64.2-4 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Head to app’s main page
2. navigate away from swim lanes into menu.
3. Can no longer navigate back to swim lanes for any of the three menu items that present them.

Expected Results

Should be able to navigate back to the selected routes!

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

https://github.com/royaloperahouse/stream-tv-app/tree/fix/menu-nav-tvos

As @douglowder suggested in #235, wrapping the Preview component in a TouchableHighlight makes it possible to navigate to the Preview item (invisibly) and then down to the top swim lane. This is a kind of “proof” that focus is the issue, but implementing TVFocusGuideView is surely the solution.

I have tried wrapping the NavMenu in a TVFocusGuideView but to be honest I’m unsure how best to do this. I tried something like this:

      <TVFocusGuideView
        destinations={[activeItemRef.current]}>
      <FlatList ...

I’m wondering if I should be wrapping each of the route screens (containing the swim lanes I want to give focus to) in their own TVFocusGuideViews too? I’ve made attempts at this, but without success yet.

[douglowder]

@sinewave440hz I have a solution for current problem 1: https://github.com/douglowder/stream-tv-app/commit/572a79409a69512573855fe518c93d5184163933

Still working on number 2.

[sinewave440hz]

Thank you! A quick rundown of the two current problems here:

1. When navigating back to the menu from the swim lanes, an extra press up/down is required to be able to move among the menu items. Presumably the focus is grabbed by the wrong component initially, due to incorrect set up of the menu’s TVFocusGuideView
2. When navigating among the menu items, I update a ref to the active menu item. When navigating down the list, the element I navigate to is null (and thus I can’t navigate back to the swim lanes). When navigating upwards, the element I navigate to is the correct one and I can navigate back to the swim lanes.

While it’s pretty clear that these are errors specific to our focus/menu handling, I’m hoping that this will provide some “how-to” value here…or at least “how-not-to”… 😉