spatial-nav-full-example

spatial-nav-full-example.js

// 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];

// inline styles defined here

const MenuItem = ({focused}) => (<View style={[styles.menuItem, focused ? styles.focused : null]} />);
const MenuItemFocusable = withFocusable()(MenuItem);

const Menu = () => (<View style={styles.menu}>
  {menuItems.map((menuItem, index) => (<MenuItemFocusable key={index} />))}
</View>);
const MenuFocusable = withFocusable()(Menu);

const GalleryItem = ({focused}) => (<View style={[styles.galleryItem, focused ? styles.focused : null]} />);
const GalleryItemFocusable = withFocusable()(GalleryItem);

class GalleryRow extends PureComponent {
  constructor(props) {
    super(props);

    this.scrollRef = null;

    this.onItemFocused = this.onItemFocused.bind(this);
  }

  onItemFocused({x}) {
    this.scrollRef.scrollTo({x});
  }

  render() {
    return (<ScrollView
        horizontal
        ref={(reference) => {
          this.scrollRef = reference;
        }}
      >
        {rowItems.map((rowItem, index) => (<GalleryItemFocusable
          key={index}
          onBecameFocused={this.onItemFocused}
        />))}
      </ScrollView>);
  }
}
const GalleryRowFocusable = withFocusable()(GalleryRow);

const MENU_FOCUS_KEY = 'MENU';
class App extends PureComponent {
  componentDidMount() {
    this.props.setFocus(MENU_FOCUS_KEY);
  }
  
  render() {
    return (<View style={styles.app}>
      <MenuFocusable focusKey={MENU_FOCUS_KEY} />
      <GalleryRowFocusable />
    </View>);
  }
}