NoriginMedia / Norigin-Spatial-Navigation

React Hooks based Spatial Navigation (Key & Remote Control Navigation) / Web Browsers, Smart TVs and Connected TVs
MIT License
306 stars 91 forks source link

React Native, cannot connect native focus to Norigin focus #111

Open MalteSchm opened 8 months ago

MalteSchm commented 8 months ago

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.

MalteSchm commented 8 months ago

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)
Yria commented 7 months ago

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