asgvard

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { useFocusable, init, FocusContext } from '@noriginmedia/norigin-spatial-navigation';

init();

const MENU_FOCUS_KEY = 'MENU';
const menuItems = [1, 2, 3, 4, 5];
const rowItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

asgvard

function Button() {
  const { ref, focused } = useFocusable();

  return (<div ref={ref} className={focused ? 'button-focused' : 'button'}>
    Press me
  </div>);
}

asgvard

function GalleryRow({items, focused}) {
  const [focusedItemIndex, setFocusedItemIndex] = useState(0);

  const onSetFocus = useCallback(({newFocusedIndex}) => {
    if (!focused) {
      return;
    }

    setFocusedItemIndex(Math.clamp(newFocusedIndex, 0, items.length - 1));
  }, [focused]);

asgvard

function GalleryRow({items, focused}) {
  const [focusedItemIndex, setFocusedItemIndex] = useState(0);
  
  const onKeyPress = useCallback(({keyCode}) => {
    if (!focused) {
      return;
    }
    
    let newIndex;
    

asgvard

// this example uses react-native-web syntax
import React, {PureComponent} from 'react';
import {View, ScrollView} from 'react-native';
import {initNavigation, withFocusable} from '@noriginmedia/react-spatial-navigation';

initNavigation();

const menuItems = [1, 2, 3, 4, 5];
const rowItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

asgvard

const SpatialNavigableApp = withSpatialNavigation()(App);

asgvard

const FocusableComponent = withFocusable()(Component);

asgvard

<Focusable>
  <Component />
</Focusable>

asgvard

const HomeScreen extends PureComponent {
  constructor(props) {
    this.state = {
      focusedKey: null
    };
    
    this.onSetFocus = this.onSetFocus.bind(this);
  }

  componentDidUpdate(oldProps) {

asgvard

const HomeScreen extends PureComponent {
  constructor(props) {
    this.state = {
      focusedIndex: 0
    };
    
    this.onKeyPress = this.onKeyPress.bind(this);
  }
  
  componentDidMount() {