Directional navigation on Xbox

[fasci]

Hi all,
we're currently working on a React Native app for TVs that uses react-native-tvos for focusing and back button handling.

We now want to bring our app to the Xbox, so we were wondering, if there is a way to manage focusing with RNW as I couldn't find anything related to this in the docs. We're new to Windows development, so I'm sorry if this is a newbie question that's a no-brainer for you guys.

I already found the function to call to get directional navigation working:
RequiresPointerMode(ApplicationRequiresPointerMode::WhenRequested);

In react-native-tvos, we additionally have the abilities to

• mark a view as focusable with the prop focusable,
• set (initial) focus to a focusable view with the prop hasTVPreferredFocus,
• manage the focus hierarchy with the props nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight (each taking a NodeHandle as argument),
• support BackHandler.

Is there a way to achieve this functionality with RNW at the moment?

I found ticket #2197, which seems to have asked for a similar feature set, but this is currently closed as it doesn't seem to be required.

Any help would be much appreciated as we would otherwise probably need to go the PWA way to support Xbox.

[asklar]

IIRC focusable should work. I'm not sure about xy navigation, maybe @rectified95 knows.

[rectified95]

@fasci I previously worked on a PR to add proper keyboard navigation to FlatList, which is the 1D case of XAML's XY nav capability.
It never went in, but it contains a hint for how you'd do this. You basically need a native module containing a panel with XYNav enabled on it.
#6826

Are you saying you found this RequiresPointerMode(ApplicationRequiresPointerMode::WhenRequested); in RNW?

[asklar]

@fasci are you still blocked after following @rectified95's advice?

[fasci]

@asklar and @rectified95
Thanks for the answers. I meanwhile moved on to another project. We ended up using React Native for Web, and then built a web app to distribute on Xbox with Visual Studio 2017, which still supported this. This was a good solution for our purposes, as we already used web apps for other platforms (webOS and Tizen).
So I didn't follow up on using RNW for Xbox. But as far as I remember, using RequiresPointerMode(ApplicationRequiresPointerMode::WhenRequested); (not from RNW, but Windows.UI.Xaml) allowed me to enable directional navigation instead of pointer navigation.