Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MalteSchm opened this issue Jan 5, 2024 · 2 comments
Open

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

MalteSchm opened this issue Jan 5, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@MalteSchm
Copy link

MalteSchm commented Jan 5, 2024

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
Copy link
Author

MalteSchm commented Jan 7, 2024

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)

@predikament predikament added the bug Something isn't working label Jan 10, 2024
@Yria
Copy link

Yria commented Feb 14, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants