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

[Weetbix]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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

[gtebbutt]

I've just added an Apple tvOS issue (#21295) and I'm wondering if this might be related?

You mentioned that you can come to the 'end' of the list of 3 items when navigating - did you try selecting the element after doing so? That could indicate whether it's the navigation that's failing, or just the opacity change (which would imply that it's just the focus handler failing).

[Weetbix]

I think it's unrelated as the onPress handlers are not called when pressing select, indicating the items are not actually selected. onPress then behaves as expected when clicked with a mouse.

Also its a bit unclear from my example but the number of items in the list does not affect the number of "selected element" sounds that play, it always remains the same indicating something offscreen or some list which is not visible is being cycled.

[gtebbutt]

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

[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(R) Core(TM) 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!

[craigrbruce]

My company has embarked on a major project leveraging Android TV and React Native. This issue is a blocker for us. Can we get any information as to whether this is being worked on internally?

I noticed this PR from a collaborator: https://github.com/facebook/react-native/pull/21143

[acollazomayer]

Same as @craigrbruce. My company wants to make an Android TV app. And as I see from @Weetbix there are important blockers in building a complete Leanback experience app.

[gtebbutt]

@craigrbruce @acollazomayer Seems like this was a two-part issue: the actual event handler on Android had a bug (fixed in #21143), but even after that fix the navigation still can't be tracked because of the same highlight/opacity issue I was seeing on Apple tvOS further up.

I opened a PR to fix the latter, and it's currently awaiting review (#21478) - it might be helpful to politely remind the reviewers on that thread that there's a user need for this to be fixed.

[craigrbruce]

Thanks for your work @gtebbutt .. I will leave some feedback.

[Weetbix]

Fixed by these beautiful contributors :slightly_smiling_face:
https://github.com/facebook/react-native/pull/21143
https://github.com/facebook/react-native/pull/21478

Confirmed working in RN 0.59.5