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

android: navigateByDirection not worked

ovgamesdev opened this issue · comments

navigateByDirection(type) should change the focus but for me it doesn't.
is expected to move the focus left to right, but it's still there.

Only the default android focus moves, but I can't track it.
image

I use react-native run-android to start.

  "dependencies": {
    "@noriginmedia/norigin-spatial-navigation": "^1.3.1",
    "react": "18.2.0",
    "react-native": "npm:react-native-tvos@0.71.11-0"
  }

code to reproduce the error:

import { init, useFocusable, FocusContext } from "@noriginmedia/norigin-spatial-navigation";
import { useEffect } from "react";
import { TouchableOpacity, useTVEventHandler, ScrollView } from "react-native"

init({
  debug: true,
  nativeMode: true
});

const Item = ({ defaultFocused }) => {
  const { ref, focused, focusSelf } = useFocusable();

  useEffect(() => {
    if (defaultFocused) focusSelf()
  }, [defaultFocused, focusSelf])

  return (
    <TouchableOpacity
      ref={ref}
      onFocus={focusSelf}
      style={{
        marginRight: 5,
        height: 50,
        width: 50,
        backgroundColor: focused ? "green" : "gray"
      }}
    />
  );
};

export default function App() {
  const { ref, focusKey, navigateByDirection } = useFocusable();

  useTVEventHandler((e) => {
    const can = ["down", "up", "left", "right"]

    if (can.includes(e.eventType)) {
      navigateByDirection(e.eventType)
    }
  }, [])

  return (
    <FocusContext.Provider value={focusKey}>
      <ScrollView ref={ref} horizontal>
        <Item defaultFocused />
        <Item />
        <Item />
        <Item />
        <Item />
        <Item />
      </ScrollView>
    </FocusContext.Provider>
  );
}

I had to use in index.js

Platform.constants.uiMode = "tv"

But I haven't yet solved the problem with the default focus (which brightens the bg)

Hi,

This library cannot control the native focus engine, in the native mode it only works as a "read only" and helps to highlight the styles on the nodes that were focused by the native focus, but not the other way around.
Features that are disabled in the native mode are documented here:
https://github.com/NoriginMedia/Norigin-Spatial-Navigation#nativemode-boolean-default-false