Apple TV react-native doesn't follow Apple's tvOS guidelines for menu key behavior

[douglowder]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

When running a react-native app built for tvOS, the remote control's menu key does not exit the app and return to the tvOS home screen, as required by Apple. See guidelines at https://developer.apple.com/tvos/human-interface-guidelines/remote-and-controllers/remote/

This is happening because the RCTTVRemoteHandler class is adding a menu key gesture recognizer by default to RCTRootView. The gesture recognizer should be added if a screen is pushed onto a navigation stack and we are navigating back to a lower level screen; it should not be added for the app's main view.

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 8.9.1
Yarn: 1.5.1
npm: 5.5.1
Watchman: Not Found
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.1 AI-173.4697961

Packages: (wanted => installed)
react: ^16.0.0 => 16.3.2
react-native: ^0.54.0 => 0.54.4

Steps to Reproduce

See issue description above -- the same thing happens on both tvOS simulator and a real tvOS device.

Expected Behavior

Menu key should exit the app as required.
For apps that use navigation frameworks that back-navigate using menu key, the correct behavior needs to be implemented.

Actual Behavior

See description above.

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[euroclydon37]

Just curious how this is coming along? Let me know if I can help in any way or if you know of a quick work around.

And thanks for all your work porting RN to Apple TV.

[douglowder]

@euroclydon37 I've made some progress.... The issue can be resolved by modifying RCTTVRemoteHandler to not create a gesture recognizer for the menu key. However, this would break apps that needed a menu key, e.g. ones with a navigation stack and using BackHandler. This will need some thought to come up with a graceful solution.

[mike-src]

I thought the Menu button would go back to the previous screen, and when the root screen of the app is reached, it would exit to the Apple TV home screen? The home button will always exit the app?

From the Apple Docs:

" Users expect to press the Menu button on the remote and return to a previous screen or the main Apple TV Home screen. Pressing Menu at the top level of an app or game should always exit to the Apple TV Home screen. During gameplay, pressing Menu should show or hide an in-game pause menu that includes an option to navigate back to the game’s main menu. "

[andrewagain]

@mrendsley Yes, that is exactly what the menu button is supposed to do. The problem is that there is no way to get the menu button to go to the Apple TV Home screen from the root screen of your app.

[andrewagain]

In case it helps anybody else, this was my workaround.

I added the below method to my bridge that lets me enable/disable the menu button gesture recognizer. If the gesture recognizer is enabled, we can handle the menu button and go back a screen. If the gesture recognizer is NOT enabled, the app will close.

#import <React/RCTRootView.h>
#import <React/RCTTVRemoteHandler.h>
#import <React/RCTRootViewInternal.h>

RCT_EXPORT_METHOD(setMenuHandlerEnabled: (nonnull NSNumber*)enabled) {
    dispatch_async(dispatch_get_main_queue(), ^{
        // get your RCTRootView somehow - your code may differ here
        RSTVAppDelegate *appDelegate = (RSTVAppDelegate*)[[UIApplication sharedApplication] delegate];
        RCTRootView *rootView = (RCTRootView*)appDelegate.rootViewController.view;

        // get the menu button gesture recognizer and enable/disable it
        UITapGestureRecognizer *menuTapRecognizer = [rootView.tvRemoteHandler.tvRemoteGestureRecognizers objectForKey:RCTTVRemoteEventMenu];
        menuTapRecognizer.enabled = [enabled boolValue];
    });
}

Then in my javascript I call NativeModules.YourBridge.setMenuHandlerEnabled(false); when my home screen mounts or the user returns to my homescreen. I call NativeModules.YourBridge.setMenuHandlerEnabled(true); when the user visits any other screen.

[hufkens]

@ahfarmer I'm trying to use your workaround. But for some reason I can't import these

#import <React/RCTTVRemoteHandler.h>
TVMenuManager.m:12:9: 'React/RCTTVRemoteHandler.h' file not found

The same for RCTRootViewInternal.h The files are there in the React/Base folder and the other file imports work (ex. RCTRootView.h).

Any idea?