tvOS: TouchableOpacity elements cannot change focus if rendered below an overlay view

The TouchableOpacity elements cannot change focus if they are rendered below an overlay view in tvOS. This issue is not present in Android TV.

I have created a issue reproducible repo here https://github.com/keshavkaul/react-native-tvos-focus-issue-example

We need to run animations on top of TouchableOpacity buttons and be able to change focus of the buttons. Any quick fix anyone might suggest will be really helpful. Thanks!

Also, If I were to start digging deeper into this issue, in which file do I start researching this?

React Native version:

System:
    OS: macOS 10.15.1
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 41.16 MB / 8.00 GB
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v10.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native-tvos:  0.61.5-0 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

1. Install and Run the linked Repo on tvOS.
2. Try to move the focus from the middle button.
3. Focus doesn’t change from the middle button.

Describe what you expected to happen: Expected the focus to change from the middle button

Snack, code example, screenshot, or link to a repository:

Repo link https://github.com/keshavkaul/react-native-tvos-focus-issue-example

NOTE: This issue is not present in Android TV. We can use the linked repo to run on Android TV to see the behaviour.

[douglowder]

Hmm… I can solve the problem for iOS by adding pointerEvents='none' to the overlay view, but focus is still blocked for tvOS. This may just be the way tvOS works – I reviewed https://developer.apple.com/library/archive/documentation/General/Conceptual/AppleTV_PG/WorkingwiththeAppleTVRemote.html , and it seems that either the overlay view must have alpha = 0, or there is some other property we are not setting on the overlay. I will do some more research on this.

[douglowder]

Thanks for the detailed bug report and repro! I’ll start by having a look at RCTTVView.m and see if I can figure out what’s going on.