Android TV - TVEventHandler doesn't recognize D-Pad (arrow) event's

[davidwico]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
      CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 2.07 GB / 15.42 GB
      Shell: 4.4.19 - /bin/bash
    Binaries:
      Node: 8.9.0 - ~/.nvm/versions/node/v8.9.0/bin/node
      npm: 5.5.1 - ~/.nvm/versions/node/v8.9.0/bin/npm
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 23.0.2, 25.0.1, 25.0.2, 25.0.3, 26.0.2, 27.0.3, 28.0.1
        API Levels: 21, 22, 23, 24, 25, 26, 27
    npmPackages:
      react: 16.4.1 => 16.4.1 
      react-native: latest => 0.56.0 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Tested on Android Studio, TV emulator and two physical android TV boxes. All devices with android 8.0 and the same result of testing.

Description

According to official documentation https://facebook.github.io/react-native/docs/building-for-apple-tv
it's possible to intercept D-Pad events like:

(evt && evt.eventType === 'left')
but it seems to not work. The only events I can intercept are: focus, blur, select and playPause.

Code

import React, { Component } from 'react';
import { View, Text, TouchableHighlight, Button, Image } from 'react-native';

var TVEventHandler = require('TVEventHandler');

export default class MainScreenContainer extends Component {
  enableTVEventHandler() {
    this.tvEventHandler = new TVEventHandler();
    this.tvEventHandler.enable(this, function(cmp, evt) {
      if (evt) {
        console.log(evt);
      }
    });
  }

  componentDidMount() {
    this.enableTVEventHandler();
  }

  consoleHello = () => {
    console.log('Hello');
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Button hasTVPreferredFocus onPress={this.consoleHello} title="Hello1" />
        <TouchableHighlight touchableHandleActivePressIn onPressIn={this.consoleHello} onPress={this.consoleHello}>
          <Text> Touch Here </Text>
        </TouchableHighlight>
        <Button onPress={this.consoleHello} title="Hello3" />
      </View>
    );
  }
}

Three simple focusable elements to navigate between. I tried to get Up, Down events while navigating between buttons/touchable component. No results. Only blur, select, focus, playPause.

Anyone can help me ?

Update:

Today I receive new bluetooth remote for testing that contains more buttons.
Situation is the same (arrow actions still don't recognized) but there are 2 more events that get recognized by TVEventHandler (rewind and fastForward).

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.56 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.