asgvard

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

const styles = StyleSheet.create({
  
});

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

/**
 * 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

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

asgvard

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

  componentDidUpdate(oldProps) {

asgvard

<Focusable>
  <Component />
</Focusable>

asgvard

const FocusableComponent = withFocusable()(Component);

asgvard

const SpatialNavigableApp = withSpatialNavigation()(App);

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

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