selectableContainer.js

_handleKeyDown = (key: number) => {
  switch (key) {
    case keyCodes.up:
      this._selectNewActive(x => x - 1);
      break;
    case keyCodes.down:
      this._selectNewActive(x => x + 1);
      break;
    case keyCodes.center:
      if (this.state.activeSelectable) {
        this.state.activeSelectable.onPress();
      }
      break;
  }

  return true;
}
  
_selectNewActive(idxModifier: Function) {
  if (this.state.activeSelectable) { // blur active Selectable
    this.state.activeSelectable.onBlur();
  }

  const sortedSelectables = this.state.selectables.sort((a, b) => (a.y - b.y));
  if (this.state.activeSelectable) { // select next Selectable
    const idx = sortedSelectables.indexOf(this.state.activeSelectable);
    const newIdx = idxModifier(idx || 0);
    if (newIdx >= 0 && newIdx < sortedSelectables.length) {
      sortedSelectables[newIdx].onFocus();
      this.setState({ activeSelectable: sortedSelectables[newIdx] });
    } else {
      this.setState({ activeSelectable: null });
    }
  } else { // select first Selectable
    sortedSelectables[0].onFocus();
    this.setState({ activeSelectable: sortedSelectables[0] });
  }
}