test.js

import React from "react";
import { TouchableOpacity, Text, StyleSheet, View } from "react-native";
import TVEventHandler from "TVEventHandler";
import Video from "react-native-video";

const ITEMS = [
  {
    color: "#f0f",
    text: "Rosa"
  },
  { color: "#00f", text: "Azul" },
  { color: "#ff0", text: "Amarelo" },
  { color: "#0f0", text: "Verde" }
];

class App extends React.Component {
  _tvEventHandler = null;

  state = {
    itemClicked: "",
    indexSelected: 0
  };

  _enableTVEventHandler() {
    this._tvEventHandler = new TVEventHandler();
    this._tvEventHandler.enable(this, function(cmp, evt) {
      const { indexSelected } = cmp.state;
      console.log(indexSelected);
      if (evt && evt.eventType === "right") {
        if (indexSelected < 3) {
          cmp.setState({ indexSelected: indexSelected + 1 });
        }
      }

      if (evt && evt.eventType === "select") {
        cmp.setState({ itemClicked: ITEMS[indexSelected].text });
      }

      if (evt && evt.eventType === "left") {
        if (indexSelected > 0) {
          cmp.setState({ indexSelected: indexSelected - 1 });
        }
      }

      if (evt && evt.eventType === "playPause") {
        // cmp.setState({ itemClicked: ITEMS[indexSelected] });
      }
    });
  }

  _disableTVEventHandler() {
    if (this._tvEventHandler) {
      this._tvEventHandler.disable();
      delete this._tvEventHandler;
    }
  }

  componentDidMount() {
    this._enableTVEventHandler();
  }

  componentWillUnmount() {
    this._disableTVEventHandler();
  }

  render() {
    const { indexSelected, itemClicked } = this.state;

    return (
      <View
        style={{
          backgroundColor: "#121212",
          width: "100%",
          height: "100%"
        }}
      >
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center"
          }}
        >
          {ITEMS.map((item, index) => (
            <TouchableOpacity
              key={item.color}
              style={{
                width: 200,
                height: 100,
                marginVertical: 80,
                backgroundColor: item.color,
                borderRadius: 4,
                borderWidth: 5,
                borderColor: index === indexSelected ? "#f00" : "#121212"
              }}
            />
          ))}
        </View>
        <View
          style={{
            marginTop: 50
          }}
        >
          <Text
            style={{
              color: "#fff",
              textAlign: "center",
              fontSize: 44
            }}
          >
            Item Clicado: {itemClicked}
          </Text>
          <Text
            style={{
              marginTop: 50,
              color: "#fff",
              textAlign: "center",
              fontSize: 44
            }}
          >
            Item Focado: {ITEMS[indexSelected].text}
          </Text>
        </View>
      </View>
    );
  }
}

export default App;