Navigation based on focus

[raphamorim]

Following similar patterns of https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8 and https://github.com/react-tv/react-tv-navigation

draft api:

import { Text, withFocusable, withNavigation } from 'react-ape'

const Item = ({focused, setFocus, focusPath}) => {
  focused = (focused) ? 'focused' : 'unfocused'
  return (
    <Text onClick={() => { setFocus() }} >
      It's {focused} Item
    </Text>
  )
}

[raphamorim]

cc @fabiomcosta

[fabiomcosta]

My suggestion:

import { Text, withFocus } from 'react-ape';

const Item = ({focusPath}) => {
  const style = focused ? { outline: '1px solid blue' } : {};
  return (
    <Text style={style}>
      Its {focused} Item
    </Text>
  )
}

export default withFocus(Item);

import { FocusableItem } from './FocusableItem'

class Navigation extends React.Component {
  render() {
    return (
      <FocusableItem focused={ true }>
        Tshow
      </FocusableItem>
    );
  }
}

[raphamorim]

Resolution in #12