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.
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