TouchableHighlight onShowUnderlay not firing on tvOS

[gtebbutt]

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
Memory: 30.71 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.11.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 26.0.1, 26.0.3, 27.0.3
API Levels: 21, 23, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: ^16.5.0 => 16.5.0
react-native: ^0.57.0 => 0.57.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

This is a regression - the same code was previously working on 0.55.

The onShowUnderlay function is never being called on tvOS, meaning that custom focus scaling and highlights aren't being applied. On tvOS, especially, this is significant because these visual cues are generally how the user tracks the element focus around the screen.

The onPress functions still work as expected. Interestingly, the default parallax animations also still work as expected, but custom handlers do not.

Reproducible Demo

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

export class TouchableButton extends Component {
  render() {
      return (
          <TouchableHighlight
              onPress={() => { console.log('Pressed') }}
              style={styles.button}
              onHideUnderlay={() => { console.log('HideUnderlay') }}
              onShowUnderlay={() => { console.log('ShowUnderlay') }}>
              <Text style={{color: 'white'}}>Button</Text>
          </TouchableHighlight>
      );
  }
}

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <TouchableButton></TouchableButton>
        <TouchableButton></TouchableButton>
        <TouchableButton></TouchableButton>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button: {
    padding: 10,
    borderColor: 'black',
    backgroundColor: 'blue',
    borderWidth: 1,
    borderRadius: 5
  }
});

[RSNara]

@gtebbutt Can you post a minimal reproducible demo?

[gtebbutt]

@RSNara Sure thing, sorry I missed that out before. I've edited it in - same code was run under new projects using 0.55.0 and 0.57.1.

Note that, in order to build 0.57.1 on tvOS it's also necessary to cherry-pick d82b798 and to re-link libfishhook-tvOS.a in RCTWebSocket.xcodeproj (#19569) and add npm install @babel/runtime (as per #21310).

[gtebbutt]

Investigating further, I suspect this may be a result of #18470 - I'll aim to do some testing on that as soon as I have a chance, but anyone who gets to it before me is welcome to jump in!

[gtebbutt]

I've tested and confirmed that theory. As a short term workaround, tvOS devs can explicitly define onFocus and onBlur. I'm hoping to have a PR in place later today that'll restore the expected behaviour for onShowUnderlay and onHideUnderlay.

[gtebbutt]

@RSNara Is there any chance you might have time to take a look at the associated PR? Seems to have been stuck for a few months, and it'd be a real help to have this merged!