title: React Native - Derectional Pad support Android TV App
body: <p>I would want to build an Android TV app using React-Native. I have followed up the recommendation on this document: <a href="https://facebook.github.io/react-native/docs/building-for-apple-tv" rel="nofollow noreferrer">Building For TV Devices</a>.</p>
  
  <p>After, update the AndroidManifest.xml file I run the application using the command line - react-native run android. The app running without any issue; however, I tried to use the Directional-pad option from android emulator TV (720p) API 23 emulator and it didn't work. I was expecting to catch the event listed on the code below and write to the console respective test for each event. On the other hand, even the component that was used for text didn't get highlighted either focus on when I try to navigate using Directional-pad.</p>
  
  <p>I am reaching out to the community to see if someone had this issue in the past and what was your issue and what you have done to resolve it? Also, as I am listing the steps below, if you could let me know if I missing something?</p>
  
  <p>Please, let me know if you need any extra information in order to help me.</p>
  
  <ol>
  <li>react-native init Dpad </li>
  <li>cd Dpad </li>
  <li>Update code based on - <a href="https://facebook.github.io/react-native/docs/building-for-apple-tv" rel="nofollow noreferrer">Building For
  TV Devices</a> </li>
  <li>Start Android TV (720p) API 23 emulator.  </li>
  <li>react-native run-android</li>
  </ol>
  
  <p>ANNEX:
  <a href="https://i.stack.imgur.com/rF7J3.png" rel="nofollow noreferrer">Android TV (720p) API 23</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, View } from 'react-native';
  import Channel from '../channel/channel.component';
  import styles from './presentation.component.styles';
  
  var TVEventHandler = require('TVEventHandler');
  
  export default class Grid extends Component {
      constructor(props){
        super(props);
        this.state = {
           command: 'undefined'
        }
      }
  
      setcomand( command) {
        this.setState( () =&gt; { return { command: command }; });
      }
  
      _tvEventHandler: null;
      _enableTVEventHandler() {
          this._tvEventHandler = new TVEventHandler();
          this._tvEventHandler.enable(this, function(cmp, evt) {
            if (evt &amp;&amp; evt.eventType === 'right') {
              setcomand('Press Right!');
            } else if(evt &amp;&amp; evt.eventType === 'up') {
              setcomand('Press Up!');
            } else if(evt &amp;&amp; evt.eventType === 'left') {
              setcomand('Press Left!');
            } else if(evt &amp;&amp; evt.eventType === 'down') {
              setcomand('Press Down!');
            } 
          });
      }  
  
      _disableTVEventHandler() {
          if (this._tvEventHandler) {
            this._tvEventHandler.disable();
            delete this._tvEventHandler;
          }
      }
  
      componentDidMount() {
          this._enableTVEventHandler();
          console.warn("component did mount");
        }
  
        componentWillUnmount() {
          this._disableTVEventHandler();
          console.warn("component Will Unmount");
        }
  
      render() {
          return (
          &lt;View style={styles.container}&gt;
              &lt;Text&gt;{this.state.command}&lt;/Text&gt;
              &lt;Channel name="Globo" description="Its brazilian TV channles for news"/&gt;
              &lt;Channel name="TVI" description="Its Portuguese TV channles for news"/&gt;
              &lt;Channel name="TVI" description="Its Portuguese TV channles for news"/&gt;
          &lt;/View&gt;
          );
    }
  }
  </code></pre>