react-native-tvos: hasTVPreferredFocus props breaks remote events on tvOS 14.2

@darji89 you want TVMenuControl. Apple requires that back navigation with the menu key go to the home screen when you are at the bottom of your navigation stack. To support this, the RN tvOS code does not automatically add a gesture handler for menu key presses. To get the menu key behavior you want, call TVMenuControl.enableTVMenuKey() when you want to handle menu key presses, and TVMenuControl.disableTVMenuKey() when you want to allow the app to exit normally with the menu key.

TVMenuControl: This module provides methods to enable and disable navigation using the menu key on the TV remote. This is required in order to fix an issue with Apple’s guidelines for menu key navigation (see https://github.com/facebook/react-native/issues/18930). The RNTester app uses this new module to implement correct menu key behavior.

Since the react-native-tvos-controller does take over the gesture handlers normally present in RCTRootView, I’m going to “officially” recommend that for this use case, you not use that package and instead use useTVEventHandler() in your code. It will actually simplify this code.

Here’s your code modified to show the button on ‘select’ and hide it on ‘playPause’. If you really want to use the menu key, you would import TVMenuControl and call TVMenuControl.enableTVMenuKey() first.

I have an issue (#16 ) in the backlog to try to pull in some of the additional functionality of react-native-tvos-controller (particularly the pan gesture handling).

import React, { useState, } from 'react';
import ReactNative, {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  useTVEventHandler,
} from 'react-native';

const App: () => React$Node = () => {
  const [toggle, setToggle] = useState(false);
  const myTVEventHandler = (evt: HWFocusEvent) => {
    if (evt.eventType === 'select') {
      setToggle(true);
    }
    if (evt.eventType === 'playPause') {
      setToggle(false);
    }
  };
  useTVEventHandler(myTVEventHandler);
  return (
    <View style={styles.root}>
      {toggle && (
        <TouchableOpacity hasTVPreferredFocus onPress={() => {
          console.log('press');
        }}>
          <Text style={styles.label}>Press me</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

I also reproduce the issue in the 14.2 simulator. I think the issue is that the underlying Apple API preferredFocusEnvironments will not work if the view isn’t actually rendered as a native view. For a use case like this, a TVFocusGuideView might be better than using hasTVPreferredFocus. I’ll see if I can get that to work.

I ran the sample repo he provided and can confirm I see the issue he describes on my 14.2 simulator.

I ran into this issue last night. I made a quick fix in our project to make sure that a TouchableOpacity with hasTVPreferredFocus=true is always mounted to the screen, even if it requires hiding it.