[Android TV] Touchable navigation not working with D-Pad in RN 57

• 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 CPU         950  @ 3.07GHz
      Memory: 782.58 MB / 11.72 GB
      Shell: 5.4.2 - /usr/bin/zsh
    Binaries:
      Node: 10.10.0 - ~/.nvm/versions/node/v10.10.0/bin/node
      Yarn: 1.9.4 - ~/.nvm/versions/node/v10.10.0/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.10.0/bin/npm
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 26.0.3, 27.0.3, 28.0.2
        API Levels: 23, 26, 27, 28
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: 0.57.0 => 0.57.0 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

This is a regression.

D-Pad on Android TV does not navigate between touchables anymore.

Previously, with some touchables on screen pressing the a D-Pad would select them in a natural way. However in RN 0.57.0 nothing happens.

The touchables can still be clicked with a mouse and behave as expected (ie make a sound, and opacity changes), so its potentially a D-Pad event issue.

There may be some kind of invisible popup or something as pressing down and up still make sounds. Ie start the example, and press down on the dpad twice. You will hear a selection sound. Pressing down again will not do anything until you press UP (indicating 3 cycling between 3 options).

Reproducible Demo

import React, {Component} from 'react';
import {View, TouchableOpacity} from 'react-native';

const style = {
  backgroundColor: 'grey',
  width: 200,
  height: 200,
};

export default class App extends Component {
  render() {
    return (
      <View>
        <TouchableOpacity { ... { style } } />
        <TouchableOpacity { ... { style } } />
        <TouchableOpacity { ... { style } } />
      </View>
    );
  }
}

^ the above has been tested on 0.55 is is working fine, but is broken on 0.57

If you want a project example you can checkout this and run it: https://github.com/Weetbix/reddit-tv/tree/upgrade-to-react-native-57-WIP

[Justimiano]

I built a small android tv demo app and on both real TV device and android emulator I am having D-pad navigation issue.

Select key - is working fine and was able to confirm that event associated with onPress was happening. Up, Down, Left, Key - are not working. I was expecting to see the element being highlighted when navigating through them; I used the component such as TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback and none of them change the styles when using D-pad to navigate through them.

Because of this issue, I couldn’t navigate through the app because there is no way for me to see which element the focus is on.

I very much appreciate if this issue can get addressed as well.

React Native Environment Info: System: OS: Windows 10 CPU: x64 Intel® Core™ i7-7820HQ CPU @ 2.90GHz Memory: 4.01 GB / 15.82 GB Binaries: Yarn: 1.7.0 - C:\Users\Justimiano.Alves\AppData\Roaming\npm\yarn.CMD npm: 4.6.1 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.1.0.0 AI-173.4907809

Thanks!

[gtebbutt]

Understood - I was hoping that the same work might be able to fix both, but sounds like that was optimistic of me!