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

/**
 * Wrapper for creating Global (RootContainer) PanResponder
 * Responder events are bubbled up by the View hierarchy, but sometimes it's needed to "move"
 * touch handling to a sibling component. Instead we're creating Root Responder to capture the touch and
 * delegate the callbacks to any component that wants to listen to it.
 *
 * Any component in the App can hook into the Root Responder lifecycle callbacks
 * For capturing of the Root Responder the *Capture callbacks should return true
 *
 * Only one component at a time can be attached to Root Responder

asgvard

/**
 * TODO Finish this for optimized Android swiping
 * Inspired by react-native-swiper but based on cross-platform and optimized FlatList
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  FlatList,

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>