React Native - Derectional Pad support Android TV

Question

I would want to build an Android TV app using React-Native. I have followed up the recommendation on this document: Building For TV Devices.

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.

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?

Please, let me know if you need any extra information in order to help me.

1. react-native init Dpad
2. cd Dpad
3. Update code based on - Building For TV Devices
4. Start Android TV (720p) API 23 emulator.
5. react-native run-android

ANNEX: Android TV (720p) API 23

Here is the 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( () => { return { command: command }; });
    }

    _tvEventHandler: null;
    _enableTVEventHandler() {
        this._tvEventHandler = new TVEventHandler();
        this._tvEventHandler.enable(this, function(cmp, evt) {
          if (evt && evt.eventType === 'right') {
            setcomand('Press Right!');
          } else if(evt && evt.eventType === 'up') {
            setcomand('Press Up!');
          } else if(evt && evt.eventType === 'left') {
            setcomand('Press Left!');
          } else if(evt && 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 (
        <View style={styles.container}>
            <Text>{this.state.command}</Text>
            <Channel name="Globo" description="Its brazilian TV channles for news"/>
            <Channel name="TVI" description="Its Portuguese TV channles for news"/>
            <Channel name="TVI" description="Its Portuguese TV channles for news"/>
        </View>
        );
  }
}

Answer 1

Having console.log inside the TVEventHandler callback seems to break it when running without remote js debugger on.

Answer 2

I have observed that D-pad does not work if there is no focusable component. To solve this, I have placed a transparent touchable opacity component on my screen. After that D-pad started working. My code for D-pad key event is given below:

enableTVEventHandler() {
  this.tvEventHandler = new TVEventHandler();
  this.tvEventHandler.enable(this, (cmp, { eventType, eventKeyAction }) => {

  // eventKeyAction is an integer value representing button press(key down) and release(key up). "key up" is 1, "key down" is 0.

  if (eventType === 'playPause' && eventKeyAction === 0)
  {
    console.log('play pressed')
  }
  else if(eventType === 'fastForward'  && eventKeyAction === 0){
    console.log('forward pressed')
  }
  else if (eventType === 'rewind'  && eventKeyAction === 0){
    console.log('rewind pressed')
  }
  else if (eventType === 'select'  && eventKeyAction === 0)
  {
   console.log('select pressed')
  }else if(eventType === 'left'  && eventKeyAction === 0){
    console.log('left pressed')
  }
  else if(eventType === 'right'  && eventKeyAction === 0){
    console.log('right pressed')
  }
  else if(eventType === 'up' && eventKeyAction === 0){
        console.log('up pressed')
  }
  else if(eventType === 'down' && eventKeyAction === 0){
        console.log('down pressed')
  }
  });  

}