react-native-tvos 0.64.2-0 → 0.64.2-4

package/Libraries/Components/AppleTV/TVFocusGuideView.js

@@ -42,9 +42,19 @@ class TVFocusGuideView extends React.Component<FocusGuideProps> {
     return (
       // Container view must have nonzero size
       <ReactNative.View style={[{minHeight: 1, minWidth: 1}, this.props.style]}>
+        {
+          /**
+           * The client specified layout(using 'style' prop) should be applied the container view ReactNative.View.
+           * And the focusGuide's layout shoule be overrided to wrap it fully inside the container view.
+           * For example, if the client specifies 'marginLeft' property in the style prop, 
+           * then the TVFocusGuideView will apply the 'marginLeft' for both the parentView and the focusGuideView.
+           * and so, the left margin is getting added twice and UI becomes incorrect. 
+           * The same is applicable for other layout properties.
+           */
+        }
         {Platform.isTVOS ? (
           <RNFocusGuide
-            style={this.props.style}
+            style={[this.props.style, styles.focusGuideLayout]}
             ref={ref => (this._focusGuideRef = ref)}
             destinationTags={this._destinationTags}>
             {this.props.children}
@@ -56,6 +66,19 @@ class TVFocusGuideView extends React.Component<FocusGuideProps> {
   }
 }
 
+const styles = ReactNative.StyleSheet.create({
+  focusGuideLayout: {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    marginLeft: 0,
+    marginTop: 0,
+    marginRight: 0,
+    marginBottom: 0,
+  },
+});
+
 const RNFocusGuide = requireNativeComponent('RCTTVFocusGuideView');
 
 module.exports = TVFocusGuideView;

package/Libraries/Components/AppleTV/TVFocusGuideView.js.orig

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
+const React = require('react');
+const ReactNative = require('react-native');
+const Platform = require('../../Utilities/Platform');
+import type {ViewProps} from '../View/ViewPropTypes';
+
+type FocusGuideProps = $ReadOnly<{
+  ...ViewProps,
+
+  /**
+   * The views the focus should go to
+   */
+  destinations: ?(Object[]),
+}>;
+
+class TVFocusGuideView extends React.Component<FocusGuideProps> {
+  _focusGuideRef: ?Object;
+  _destinationTags: ?(number[]);
+
+  componentDidUpdate() {
+    const destinations = this.props.destinations || [];
+    this._destinationTags = destinations.map(
+      c => ReactNative.findNodeHandle(c) || 0,
+    );
+    this._focusGuideRef &&
+      this._focusGuideRef.setNativeProps({
+        destinationTags: this._destinationTags,
+      });
+  }
+
+  render(): React.Node {
+    return (
+      // Container view must have nonzero size
+      <ReactNative.View style={[{minHeight: 1, minWidth: 1}, this.props.style]}>
+        {Platform.isTVOS ? (
+          <RNFocusGuide
+            style={this.props.style}
+            ref={ref => (this._focusGuideRef = ref)}
+            destinationTags={this._destinationTags}>
+            {this.props.children}
+          </RNFocusGuide>
+        ) : (
+          this.props.children
+        )}
+      </ReactNative.View>)
+  }
+}
+
+const RNFocusGuide = requireNativeComponent('RCTTVFocusGuideView');
+
+module.exports = TVFocusGuideView;

package/Libraries/Components/Pressable/Pressable.js

@@ -201,6 +201,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
     focusable: focusable !== false,
+    isTVSelectable: isTVSelectable !== false && accessible !== false,
     hitSlop,
   };
 
@@ -257,7 +258,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const pressableTVEventHandler = (evt: Event) => {
     if (props.isTVSelectable !== false || props.focusable !== false) {
-      if (viewRef.current._nativeTag === evt.target) {
+      if (viewRef.current && viewRef.current._nativeTag === evt.target) {
         if (evt?.eventType === 'focus') {
           setFocused(true);
           onFocus && onFocus(evt);
@@ -285,10 +286,9 @@ function Pressable(props: Props, forwardedRef): React.Node {
       {...restPropsWithDefaults}
       {...eventHandlers}
       ref={viewRef}
-      isTVSelectable={isTVSelectable !== false && accessible !== false}
-      style={typeof style === 'function' ? style({pressed}) : style}
+      style={typeof style === 'function' ? style({pressed, focused}) : style}
       collapsable={false}>
-      {typeof children === 'function' ? children({pressed}) : children}
+      {typeof children === 'function' ? children({pressed, focused}) : children}
       {__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}
     </View>
   );

package/Libraries/Components/StatusBar/NativeStatusBarManagerIOS.js

@@ -13,6 +13,8 @@
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
+const Platform = require('../../Utilities/Platform');
+
 export interface Spec extends TurboModule {
   +getConstants: () => {|
     +HEIGHT: number,
@@ -38,7 +40,9 @@ export interface Spec extends TurboModule {
   +setHidden: (hidden: boolean, withAnimation: string) => void;
 }
 
-const NativeModule = TurboModuleRegistry.getEnforcing<Spec>('StatusBarManager');
+const NativeModule = Platform.isTVOS
+  ? null
+  : TurboModuleRegistry.getEnforcing<Spec>('StatusBarManager');
 let constants = null;
 
 const NativeStatusBarManager = {
@@ -47,26 +51,28 @@ const NativeStatusBarManager = {
     +DEFAULT_BACKGROUND_COLOR?: number,
   |} {
     if (constants == null) {
-      constants = NativeModule.getConstants();
+      constants = NativeModule
+        ? NativeModule.getConstants()
+        : {HEIGHT: 0, DEFAULT_BACKGROUND_COLOR: 0};
     }
     return constants;
   },
 
   // TODO(T47754272) Can we remove this method?
   getHeight(callback: (result: {|height: number|}) => void): void {
-    NativeModule.getHeight(callback);
+    NativeModule ? NativeModule.getHeight(callback) : callback({height: 0});
   },
 
   setNetworkActivityIndicatorVisible(visible: boolean): void {
-    NativeModule.setNetworkActivityIndicatorVisible(visible);
+    NativeModule && NativeModule.setNetworkActivityIndicatorVisible(visible);
   },
 
   addListener(eventType: string): void {
-    NativeModule.addListener(eventType);
+    NativeModule && NativeModule.addListener(eventType);
   },
 
   removeListeners(count: number): void {
-    NativeModule.removeListeners(count);
+    NativeModule && NativeModule.removeListeners(count);
   },
 
   /**
@@ -76,14 +82,14 @@ const NativeStatusBarManager = {
    *    - 'light-content'
    */
   setStyle(statusBarStyle?: ?string, animated: boolean): void {
-    NativeModule.setStyle(statusBarStyle, animated);
+    NativeModule && NativeModule.setStyle(statusBarStyle, animated);
   },
 
   /**
    *  - withAnimation can be: 'none' | 'fade' | 'slide'
    */
   setHidden(hidden: boolean, withAnimation: string): void {
-    NativeModule.setHidden(hidden, withAnimation);
+    NativeModule && NativeModule.setHidden(hidden, withAnimation);
   },
 };
 

package/Libraries/Components/Touchable/Touchable.js

@@ -14,6 +14,7 @@ const BoundingDimensions = require('./BoundingDimensions');
 const Platform = require('../../Utilities/Platform');
 const Position = require('./Position');
 const React = require('react');
+const ReactNative = require('../../Renderer/shims/ReactNative');
 const StyleSheet = require('../../StyleSheet/StyleSheet');
 const TVEventHandler = require('../AppleTV/TVEventHandler');
 const UIManager = require('../../ReactNative/UIManager');

package/Libraries/NewAppScreen/components/HermesBadge.js

@@ -10,24 +10,51 @@
 
 import React from 'react';
 import type {Node} from 'react';
-import {StyleSheet, Text, useColorScheme, View} from 'react-native';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  useTVEventHandler,
+  View,
+} from 'react-native';
 import Colors from './Colors';
 
 const HermesBadge = (): Node => {
+  const [lastEventType, setLastEventType] = React.useState('');
+  const myTVEventHandler = evt => {
+    setLastEventType(evt.eventType);
+  };
+  if (Platform.isTV) {
+    useTVEventHandler(myTVEventHandler);
+  }
   const isDarkMode = useColorScheme() === 'dark';
-  return global.HermesInternal ? (
+  return (
     <View style={styles.badge}>
-      <Text
-        style={[
-          styles.badgeText,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        Engine: Hermes
-      </Text>
+      {Platform.isTV ? (
+        <Text
+          style={[
+            styles.badgeText,
+            {
+              color: isDarkMode ? Colors.light : Colors.dark,
+            },
+          ]}>
+          TVEvent: {lastEventType}
+        </Text>
+      ) : null}
+      {global.HermesInternal ? (
+        <Text
+          style={[
+            styles.badgeText,
+            {
+              color: isDarkMode ? Colors.light : Colors.dark,
+            },
+          ]}>
+          Engine: Hermes
+        </Text>
+      ) : null}
     </View>
-  ) : null;
+  );
 };
 
 const styles = StyleSheet.create({

package/README.md

@@ -2,7 +2,7 @@
 
 Going forward, Apple TV support for React Native will be maintained here and in the corresponding `react-native-tvos` NPM package, and not in the [core repo](https://github.com/facebook/react-native/).  This is a full fork of the main repository, with only the changes needed to support Apple TV.
 
-Releases of `react-native-tvos` will be based on a public release of `react-native`; e.g. the 0.64.2-0 release of this package will be derived from the 0.64.2 release of `react-native`. All releases of this repo will follow the 0.xx.x-y format, where x digits are from a specific RN core release, and y represents the additional versioning from this repo.
+Releases of `react-native-tvos` will be based on a public release of `react-native`; e.g. the 0.64.2-2 release of this package will be derived from the 0.64.2 release of `react-native`. All releases of this repo will follow the 0.xx.x-y format, where x digits are from a specific RN core release, and y represents the additional versioning from this repo.
 
 Releases will be published on npmjs.org and you may find the latest release version here: https://www.npmjs.com/package/react-native-tvos?activeTab=versions or use the tag `@latest`
 
@@ -23,6 +23,8 @@ Due to the nature of the typing resolution, the current solution to include type
 - install `@types/react-native` as a dev dependency
 - put `import 'react-native/tvos-types.d'` in any of your `.ts` files (root suggested)
 
+See the "Build Changes" section below for how to start a new project that will automatically use Typescript.
+
 ## General support for Apple TV
 
 TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV, with few or no changes needed in the JavaScript code for the applications.
@@ -67,7 +69,11 @@ react-native init TestApp --template=react-native-tvos@latest
 cd TestApp && react-native run-ios  --simulator "Apple TV" --scheme "TestApp-tvOS"
 ```
 
+A minimal Typescript starter template can be used to start a new project using the community react-native CLI.  The process is the same as above except for the template:
 
+```sh
+react-native init TestApp --template=react-native-template-typescript-tv
+```
 
 - _JavaScript layer_: Support for Apple TV has been added to `Platform.ios.js`. You can check whether code is running on AppleTV by doing
 
@@ -92,7 +98,7 @@ var running_on_apple_tv = Platform.isTVOS;
   - `onBlur` will be executed when the touchable view goes out of focus
   - `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
 
-- _TV remote/keyboard input_: A native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events.  In 0.63.1-1, we have added `useTVEventHandler`, which wraps `useEffect` to make this more convenient and simpler for use with functional components.
+- _TV remote/keyboard input_: A native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events.  In 0.63.1-1, we have added `useTVEventHandler`, which wraps `useEffect` to make this more convenient and simpler for use with functional components. In 0.64.2-2, we added a TV event display to the new app template using `useTVEventHandler`.
 
 ```javascript
 

package/React/Base/RCTRootView.m

@@ -98,15 +98,6 @@ NSString *const RCTTVDisableMenuKeyNotification = @"RCTTVDisableMenuKeyNotificat
                                                object:self];
 
 #if TARGET_OS_TV
-      [[NSNotificationCenter defaultCenter] addObserver:self
-                                               selector:@selector(enableTVMenuKey)
-                                                   name:RCTTVEnableMenuKeyNotification
-                                                 object:nil];
-
-      [[NSNotificationCenter defaultCenter] addObserver:self
-                                               selector:@selector(disableTVMenuKey)
-                                                   name:RCTTVDisableMenuKeyNotification
-                                                 object:nil];
 
 #if RCT_DEV
       [[NSNotificationCenter defaultCenter] addObserver:self
@@ -115,11 +106,7 @@ NSString *const RCTTVDisableMenuKeyNotification = @"RCTTVDisableMenuKeyNotificat
                                                  object:nil];
 #endif
       
-    self.tvRemoteHandler = [RCTTVRemoteHandler new];
-    for (NSString *key in [self.tvRemoteHandler.tvRemoteGestureRecognizers allKeys]) {
-      [self addGestureRecognizer:self.tvRemoteHandler.tvRemoteGestureRecognizers[key]];
-    }
-    // [self addGestureRecognizer:self.tvRemoteHandler.tvMenuKeyRecognizer];
+    self.tvRemoteHandler = [[RCTTVRemoteHandler alloc] initWithView:self];
 #endif
 
     [self showLoadingView];
@@ -134,32 +121,12 @@ NSString *const RCTTVDisableMenuKeyNotification = @"RCTTVDisableMenuKeyNotificat
   return self;
 }
 
-#if TARGET_OS_TV
-
-- (void)enableTVMenuKey {
-    dispatch_async(dispatch_get_main_queue(), ^{
-        if (![[self gestureRecognizers] containsObject:self.tvRemoteHandler.tvMenuKeyRecognizer]) {
-            [self addGestureRecognizer:self.tvRemoteHandler.tvMenuKeyRecognizer];
-        }
-    });
-}
-
-- (void)disableTVMenuKey {
-    dispatch_async(dispatch_get_main_queue(), ^{
-        if ([[self gestureRecognizers] containsObject:self.tvRemoteHandler.tvMenuKeyRecognizer]) {
-            [self removeGestureRecognizer:self.tvRemoteHandler.tvMenuKeyRecognizer];
-        }
-    });
-}
-
-#if RCT_DEV
+#if TARGET_OS_TV && RCT_DEV
 - (void)showDevMenu {
     dispatch_async(dispatch_get_main_queue(), ^{
         [[self->_bridge devMenu] show];
     });
 }
-#endif
-
 #endif // TARGET_OS_TV
 
 - (instancetype)initWithBundleURL:(NSURL *)bundleURL
@@ -443,6 +410,9 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : (NSCoder *)aDecoder)
 
 - (void)dealloc
 {
+#if TARGET_OS_TV
+  self.tvRemoteHandler = nil;
+#endif
   [_contentView invalidate];
 }
 

package/React/Base/RCTTVRemoteHandler.h

@@ -26,7 +26,10 @@ extern NSString *const RCTTVRemoteEventSwipeDown;
 
 @interface RCTTVRemoteHandler : NSObject
 
-@property (nonatomic, copy, readonly) NSDictionary *tvRemoteGestureRecognizers;
-@property (nonatomic, strong) UITapGestureRecognizer *tvMenuKeyRecognizer;
+- (instancetype _Nonnull )initWithView:(UIView * _Nonnull)view;
+- (instancetype _Nonnull )init __attribute__((unavailable("init not available, use initWithView:")));
+
++ (BOOL)useMenuKey;
++ (void)setUseMenuKey:(BOOL)useMenuKey;
 
 @end

package/React/Base/RCTTVRemoteHandler.m

@@ -37,87 +37,189 @@ NSString *const RCTTVRemoteEventSwipeRight = @"swipeRight";
 NSString *const RCTTVRemoteEventSwipeUp = @"swipeUp";
 NSString *const RCTTVRemoteEventSwipeDown = @"swipeDown";
 
+@interface RCTTVRemoteHandler()
+
+@property (nonatomic, copy, readonly) NSDictionary *tvRemoteGestureRecognizers;
+@property (nonatomic, strong) UITapGestureRecognizer *tvMenuKeyRecognizer;
+@property (nonatomic, weak) UIView *view;
+
+@end
+
 @implementation RCTTVRemoteHandler {
   NSMutableDictionary<NSString *, UIGestureRecognizer *> *_tvRemoteGestureRecognizers;
 }
 
-- (instancetype)init
+#pragma mark -
+#pragma mark Static setting for using menu key
+
+static __volatile BOOL __useMenuKey = NO;
+
++ (BOOL)useMenuKey
+{
+    return __useMenuKey;
+}
+
++ (void)setUseMenuKey:(BOOL)useMenuKey
+{
+    __useMenuKey = useMenuKey;
+}
+
+#pragma mark -
+#pragma mark Public methods
+
+- (instancetype)initWithView:(UIView *)view
 {
   if ((self = [super init])) {
+      _view = view;
+      [self setUpGestureRecognizers];
+      [self attachToView];
+  }
+  return self;
+}
+
+- (void)dealloc
+{
+    [self detachFromView];
+}
+
+#pragma mark -
+#pragma mark Private methods
+
+- (void)setUpGestureRecognizers
+{
     _tvRemoteGestureRecognizers = [NSMutableDictionary dictionary];
+  // Recognizers for Apple TV remote buttons
+  // Menu recognizer
+  self.tvMenuKeyRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(menuPressed:)];
+  self.tvMenuKeyRecognizer.allowedPressTypes = @[@(UIPressTypeMenu)];
+
+  // Play/Pause
+  [self addTapGestureRecognizerWithSelector:@selector(playPausePressed:)
+                                  pressType:UIPressTypePlayPause
+                                       name:RCTTVRemoteEventPlayPause];
+
+  // Select
+  [self addTapGestureRecognizerWithSelector:@selector(selectPressed:)
+                                  pressType:UIPressTypeSelect
+                                       name:RCTTVRemoteEventSelect];
+
+  // Up
+  [self addTapGestureRecognizerWithSelector:@selector(tappedUp:)
+                                  pressType:UIPressTypeUpArrow
+                                       name:RCTTVRemoteEventUp];
+
+  // Down
+  [self addTapGestureRecognizerWithSelector:@selector(tappedDown:)
+                                  pressType:UIPressTypeDownArrow
+                                       name:RCTTVRemoteEventDown];
+
+  // Left
+  [self addTapGestureRecognizerWithSelector:@selector(tappedLeft:)
+                                  pressType:UIPressTypeLeftArrow
+                                       name:RCTTVRemoteEventLeft];
+
+  // Right
+  [self addTapGestureRecognizerWithSelector:@selector(tappedRight:)
+                                  pressType:UIPressTypeRightArrow
+                                       name:RCTTVRemoteEventRight];
+
+  // Recognizers for long button presses
+  // We don't intercept long menu press -- that's used by the system to go to the home screen
+
+  [self addLongPressGestureRecognizerWithSelector:@selector(longPlayPausePressed:)
+                                        pressType:UIPressTypePlayPause
+                                             name:RCTTVRemoteEventLongPlayPause];
+
+  [self addLongPressGestureRecognizerWithSelector:@selector(longSelectPressed:)
+                                        pressType:UIPressTypeSelect
+                                             name:RCTTVRemoteEventLongSelect];
+
+  // Recognizers for Apple TV remote trackpad swipes
+
+  // Up
+  [self addSwipeGestureRecognizerWithSelector:@selector(swipedUp:)
+                                    direction:UISwipeGestureRecognizerDirectionUp
+                                         name:RCTTVRemoteEventSwipeUp];
+
+  // Down
+  [self addSwipeGestureRecognizerWithSelector:@selector(swipedDown:)
+                                    direction:UISwipeGestureRecognizerDirectionDown
+                                         name:RCTTVRemoteEventSwipeDown];
+
+  // Left
+  [self addSwipeGestureRecognizerWithSelector:@selector(swipedLeft:)
+                                    direction:UISwipeGestureRecognizerDirectionLeft
+                                         name:RCTTVRemoteEventSwipeLeft];
+
+  // Right
+  [self addSwipeGestureRecognizerWithSelector:@selector(swipedRight:)
+                                    direction:UISwipeGestureRecognizerDirectionRight
+                                         name:RCTTVRemoteEventSwipeRight];
 
-    // Recognizers for Apple TV remote buttons
-    // Menu recognizer
-    self.tvMenuKeyRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(menuPressed:)];
-    self.tvMenuKeyRecognizer.allowedPressTypes = @[@(UIPressTypeMenu)];
-
-    // Play/Pause
-    [self addTapGestureRecognizerWithSelector:@selector(playPausePressed:)
-                                    pressType:UIPressTypePlayPause
-                                         name:RCTTVRemoteEventPlayPause];
-
-    // Select
-    [self addTapGestureRecognizerWithSelector:@selector(selectPressed:)
-                                    pressType:UIPressTypeSelect
-                                         name:RCTTVRemoteEventSelect];
-
-    // Up
-    [self addTapGestureRecognizerWithSelector:@selector(tappedUp:)
-                                    pressType:UIPressTypeUpArrow
-                                         name:RCTTVRemoteEventUp];
-
-    // Down
-    [self addTapGestureRecognizerWithSelector:@selector(tappedDown:)
-                                    pressType:UIPressTypeDownArrow
-                                         name:RCTTVRemoteEventDown];
-
-    // Left
-    [self addTapGestureRecognizerWithSelector:@selector(tappedLeft:)
-                                    pressType:UIPressTypeLeftArrow
-                                         name:RCTTVRemoteEventLeft];
-
-    // Right
-    [self addTapGestureRecognizerWithSelector:@selector(tappedRight:)
-                                    pressType:UIPressTypeRightArrow
-                                         name:RCTTVRemoteEventRight];
-
-    // Recognizers for long button presses
-    // We don't intercept long menu press -- that's used by the system to go to the home screen
-
-    [self addLongPressGestureRecognizerWithSelector:@selector(longPlayPausePressed:)
-                                          pressType:UIPressTypePlayPause
-                                               name:RCTTVRemoteEventLongPlayPause];
-
-    [self addLongPressGestureRecognizerWithSelector:@selector(longSelectPressed:)
-                                          pressType:UIPressTypeSelect
-                                               name:RCTTVRemoteEventLongSelect];
-
-    // Recognizers for Apple TV remote trackpad swipes
-
-    // Up
-    [self addSwipeGestureRecognizerWithSelector:@selector(swipedUp:)
-                                      direction:UISwipeGestureRecognizerDirectionUp
-                                           name:RCTTVRemoteEventSwipeUp];
-
-    // Down
-    [self addSwipeGestureRecognizerWithSelector:@selector(swipedDown:)
-                                      direction:UISwipeGestureRecognizerDirectionDown
-                                           name:RCTTVRemoteEventSwipeDown];
-
-    // Left
-    [self addSwipeGestureRecognizerWithSelector:@selector(swipedLeft:)
-                                      direction:UISwipeGestureRecognizerDirectionLeft
-                                           name:RCTTVRemoteEventSwipeLeft];
-
-    // Right
-    [self addSwipeGestureRecognizerWithSelector:@selector(swipedRight:)
-                                      direction:UISwipeGestureRecognizerDirectionRight
-                                           name:RCTTVRemoteEventSwipeRight];
-  }
+}
 
-  return self;
+- (void)attachToView
+{
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(enableTVMenuKey)
+                                                 name:RCTTVEnableMenuKeyNotification
+                                               object:nil];
+
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(disableTVMenuKey)
+                                                 name:RCTTVDisableMenuKeyNotification
+                                               object:nil];
+    for (NSString *key in [self.tvRemoteGestureRecognizers allKeys]) {
+      [_view addGestureRecognizer:self.tvRemoteGestureRecognizers[key]];
+    }
+    if ([RCTTVRemoteHandler useMenuKey]) {
+        [self enableTVMenuKey];
+    } else {
+        [self disableTVMenuKey];
+    }
+}
+
+- (void)detachFromView
+{
+    if ([[self.view gestureRecognizers] containsObject:self.tvMenuKeyRecognizer]) {
+        [self.view removeGestureRecognizer:self.tvMenuKeyRecognizer];
+    }
+    for (NSString *key in [self.tvRemoteGestureRecognizers allKeys]) {
+      [_view removeGestureRecognizer:self.tvRemoteGestureRecognizers[key]];
+    }
+    [[NSNotificationCenter defaultCenter] removeObserver:self
+                                                    name:RCTTVEnableMenuKeyNotification
+                                                  object:nil];
+    [[NSNotificationCenter defaultCenter] removeObserver:self
+                                                    name:RCTTVDisableMenuKeyNotification
+                                                  object:nil];
+    
+}
+
+# pragma mark -
+# pragma mark Notification handlers
+
+- (void)enableTVMenuKey
+{
+    dispatch_async(dispatch_get_main_queue(), ^{
+        if (![[self.view gestureRecognizers] containsObject:self.tvMenuKeyRecognizer]) {
+            [self.view addGestureRecognizer:self.tvMenuKeyRecognizer];
+        }
+    });
 }
 
+- (void)disableTVMenuKey
+{
+    dispatch_async(dispatch_get_main_queue(), ^{
+        if ([[self.view gestureRecognizers] containsObject:self.tvMenuKeyRecognizer]) {
+            [self.view removeGestureRecognizer:self.tvMenuKeyRecognizer];
+        }
+    });
+}
+
+# pragma mark -
+# pragma mark Gesture handlers
+
 - (void)playPausePressed:(UIGestureRecognizer *)r
 {
   [self sendAppleTVEvent:RCTTVRemoteEventPlayPause toView:r.view];
@@ -189,6 +291,7 @@ NSString *const RCTTVRemoteEventSwipeDown = @"swipeDown";
 }
 
 #pragma mark -
+#pragma mark Convenience methods for adding gesture recognizers
 
 - (void)addLongPressGestureRecognizerWithSelector:(nonnull SEL)selector
                                         pressType:(UIPressType)pressType