spatial-nav-focus-map.js

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

  componentDidUpdate(oldProps) {
    const {active} = this.props;
    
    if (oldProps.active !== active) {
      this.setState({
        focusedKey: null
      });
    }
  }
    
  onSetFocus(nextFocusKey) {
    if (nextFocusKey === SIDE_MENU) {
      this.props.onFocusSideMenu();
    } else {
      this.setState({
        focusedKey: nextFocusKey
      });
    }
  }
  
  render() {
    const {rows} = this.props;
    const {focusedKey} = this.state;
    
    return (<React.Fragment>
      {rows.map((rowData, index) => (<GalleryRow 
        key={rowData.id}
        active={focusedKey === `ROW_${index}`}
        items={rowData.items}
        onSetFocus={this.onSetFocus}
        focusMap={{
          up: `ROW_${index - 1}`, // no clamping for simplification
          down: `ROW_${index + 1}`, // no clamping for simplification
          left: 'SIDE_MENU'
        }}  
      />))}
    </React.Fragment>);
  }
}

const GalleryRow extends PureComponent {
  // handles key events and calls the onSetFocus prop with the next key
  // called only if current row is active
  // next focus key is taken from focusMap prop based on direction
  // left direction can only be called when first item is focused
}