NoriginMedia / Norigin-Spatial-Navigation

React Hooks based Spatial Navigation (Key & Remote Control Navigation) / Web Browsers, Smart TVs and Connected TVs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Native, cannot connect native focus to Norigin focus

MalteSchm opened this issue · comments

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.

Screenshot 2024-01-07 at 20 47 53 (3)

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;
    }