Norigin-Spatial-Navigation
Norigin-Spatial-Navigation copied to clipboard
React Native, cannot connect native focus to Norigin focus
Describe the bug I tried connecting the native focus provided via RN (tvOS and AndroidTV) based on the example provided in the documentation but cannot make it work.
To Reproduce
const {ref, focused, focusSelf} = useFocusable({
onEnterPress: () => {
onClickFkt();
},
});
return (
<Pressable
ref={ref}
onFocus={focusSelf}>
<Icon
name={'play'}
style={focused ? localStyles.button_focused : localStyles.button}
/>
</Pressable>
);
I checked that the onFocus callback of Pressable is executed when I move around in my app. Based on the Norigin-Spatial-Navigation documentation:
In order to "sync" the focus events coming from the native focus engine to the hook the onFocus callback needs to be linked with the focusSelf method. This way the hook will know that the component became focused and will set the focused flag accordingly.
I would have expected that focused
would change when focusSelf is called. This does not happen.
Norigin Navigation is setup using nativeMode: true
Expected behavior
I would have expected that focused
would change when focusSelf is called.
I tested a bit further. I noticed that using Pressable was probably not suitable and I switched to TouchableOpacity.
I created an example here: https://github.com/MalteSchm/TestcaseFocusNoriginNav I used this app as tvOS and AndroidTV application. I can see that focus is set to the TouchableOpacity on keyboard presses when running the app in the simulator. The focus / style of the elements seems to be a result of TouchableOpacity and not a result of the styles that are provided.
I expected that focused
would become true when focusSelf is called and the style is selected acoordingly. This does not seem to be the case.
A screenshot of the result is shown below (both AndroidTV and tvOS applicaiton). The stylesheet specifies the focused button to be "red" which is not what I'm seeing here.
In fact, focusSelf does not work in native mode.
setFocus(focusKey: string, focusDetails: FocusDetails = {}) {
// Cancel any pending auto-restore focus calls if we are setting focus manually
this.setFocusDebounced.cancel();
if (!this.enabled || this.nativeMode) {
return;
}