React Navigation for TVs
Switch branches/tags
Clone or download
Raphael Amorim
Raphael Amorim release 0.4.3
Latest commit f5cc12d Oct 31, 2018

React-TV-Navigation was migrated to raphamorim/react-tv

Navigation for TVs using React-TV


tl;dr: Based on Netflix TV Navigation System

React-TV Navigation Example

See code from this example

React-TV-Navigation is a separated package from React-TV renderer to manage focusable components.


yarn add react-tv-navigation

React and React-TV are peer-dependencies.

withFocusable and withNavigation

React-TV Navigation exports two functions: withFocusable and withNavigation.

A declarative navigation system based on HOC's for focus and navigation control.

import React from 'react'
import ReactTV from 'react-tv'
import { withFocusable, withNavigation } from 'react-tv-navigation'

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

const Button = ({setFocus}) => {
  return (
    <div onClick={() => { setFocus('item-1') }}>
      Back To First Item!

const FocusableItem = withFocusable(Item)
const FocusableButton = withFocusable(Button)

function App({currentFocusPath}) {
  return (
      <h1>Current FocusPath: '{currentFocusPath}'</h1>,
      <FocusableItem focusPath='item-1'/>
      <FocusableItem focusPath='item-2'/>
        onEnterPress={() => console.log('Pressed enter on Button!')}/>

const NavigableApp = withNavigation(App)

ReactTV.render(<NavigableApp/>, document.querySelector('#app'))

Soon we'll write a decent :)

License by MIT