Developing TV Apps with React-TV

TVs usually have limited graphics acceleration, single core CPUs and high memory usage for a common TV App. These restrictions make super responsive 60fps experiences especially tricky.

React-TV is an ecosystem for React Applications on TVs. Includes a Renderer and a CLI tool for building applications. Focused on be a better tool for building and developing fast for TVs.

React-TV optimizations includes removing cross-browser support, being friendly to TVs’ events, preventing DOM or Fiber caching to reduce memory sweep and adding support to canvas-based components.

Netflix have also been tackling this problem.

As a pre 1.0 release it currently only works for LG WebOS. Support for Samsung Tizen, Samsung Orsay, and Amazon Fire TV are on the roadmap.

import React from 'react'
import ReactTV, { Platform } from 'react-tv'

class Clock extends React.Component {
  state = { date: new Date() }

  componentDidMount() {
    setInterval(() => this.setState({date: new Date()}), 1000)
  }

  render() {
    if (Platform('webos')) {
      return (
        <h1>Time is {this.state.date.toLocaleTimeString()}</h1>
      )
    }

    return <h2>This App is available only at LG WebOS</h2>
  }
}

ReactTV.render(<Clock />, document.getElementById('root'))

If you’re interested in this project I recommend you to follow React-TV developer Raphael on Twitter, as he frequently posts some nice work in progress videos.

Developing for TVs with React-TV →
React-TV (GitHub) →
React-TV YouTube Example App →