react-native-tvos 0.66.3-1 → 0.66.3-2

package/Libraries/Components/AppleTV/TVFocusGuideView.js

@@ -8,10 +8,11 @@
  * @format
  */
 
-const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
 const React = require('react');
 const ReactNative = require('react-native');
+import ReactNativeShims from '../../Renderer/shims/ReactNative';
 const Platform = require('../../Utilities/Platform');
+import {Commands} from '../../Components/View/ViewNativeComponent';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 type FocusGuideProps = $ReadOnly<{
@@ -23,26 +24,21 @@ type FocusGuideProps = $ReadOnly<{
   destinations: ?(Object[]),
 }>;
 
-class TVFocusGuideView extends React.Component<FocusGuideProps> {
-  _focusGuideRef: ?Object;
-  _destinationTags: ?(number[]);
+const TVFocusGuideView = (props: FocusGuideProps) => {
+  const focusGuideRef = React.useRef(null);
 
-  componentDidUpdate() {
-    const destinations = this.props.destinations || [];
-    this._destinationTags = destinations.map(
-      c => ReactNative.findNodeHandle(c) || 0,
-    );
-    this._focusGuideRef &&
-      this._focusGuideRef.setNativeProps({
-        destinationTags: this._destinationTags,
-      });
-  }
+  React.useEffect(() => {
+    const nativeDestinations = (props.destinations || [])
+                                 .map(d => ReactNative.findNodeHandle(d))
+                                 .filter(c => c !== 0 && c !== null && c !== undefined);
+    const hostComponentRef = ReactNativeShims.findHostInstance_DEPRECATED(focusGuideRef?.current);
+    hostComponentRef && Commands.setDestinations(hostComponentRef, nativeDestinations);
+  }, [props.destinations]);
 
-  render(): React.Node {
-    return (
-      // Container view must have nonzero size
-      <ReactNative.View style={[{minHeight: 1, minWidth: 1}, this.props.style]}>
-        {
+  return (
+    // Container view must have nonzero size
+    <ReactNative.View style={[{minHeight: 1, minWidth: 1}, 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.
@@ -51,20 +47,21 @@ class TVFocusGuideView extends React.Component<FocusGuideProps> {
            * 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, styles.focusGuideLayout]}
-            ref={ref => (this._focusGuideRef = ref)}
-            destinationTags={this._destinationTags}>
-            {this.props.children}
-          </RNFocusGuide>
-        ) : (
-          this.props.children
-        )}
-      </ReactNative.View>)
-  }
-}
+      }
+      {Platform.isTVOS ? (
+        <ReactNative.View
+          style={[props.style, styles.focusGuideLayout]}
+          ref={focusGuideRef}
+        >
+          {props.children}
+        </ReactNative.View>
+      ) : (
+          props.children
+      )}
+    </ReactNative.View>
+  );
+
+};
 
 const styles = ReactNative.StyleSheet.create({
   focusGuideLayout: {
@@ -79,6 +76,4 @@ const styles = ReactNative.StyleSheet.create({
   },
 });
 
-const RNFocusGuide = requireNativeComponent('RCTTVFocusGuideView');
-
 module.exports = TVFocusGuideView;

package/Libraries/Components/AppleTV/TVViewPropTypes.js

@@ -78,31 +78,4 @@ export type TVViewProps = $ReadOnly<{|
    */
   tvParallaxProperties?: TVParallaxPropertiesType,
 
-  /**
-   * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 2.0.
-   *
-   * @platform ios
-   */
-  tvParallaxShiftDistanceX?: number,
-
-  /**
-   * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 2.0.
-   *
-   * @platform ios
-   */
-  tvParallaxShiftDistanceY?: number,
-
-  /**
-   * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 0.05.
-   *
-   * @platform ios
-   */
-  tvParallaxTiltAngle?: number,
-
-  /**
-   * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 1.0.
-   *
-   * @platform ios
-   */
-  tvParallaxMagnification?: number,
 |}>;

package/Libraries/Components/Pressable/Pressable.js

@@ -193,6 +193,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     pressRetentionOffset,
     style,
     testOnly_pressed,
+    tvParallaxProperties,
     unstable_pressDelay,
     ...restProps
   } = props;
@@ -319,6 +320,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
       ref={viewRef}
       isTVSelectable={isTVSelectable !== false && accessible !== false}
       style={typeof style === 'function' ? style({pressed, focused}) : style}
+      tvParallaxProperties={tvParallaxProperties}
       collapsable={false}>
       {typeof children === 'function' ? children({pressed, focused}) : children}
       {__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}

package/Libraries/Components/View/ViewNativeComponent.js

@@ -34,10 +34,15 @@ interface NativeCommands {
     viewRef: React.ElementRef<HostComponent<mixed>>,
     pressed: boolean,
   ) => void;
+  // Apple TV focus guide API
+  +setDestinations: (
+    viewRef: React.ElementRef<HostComponent<mixed>>,
+    destinations: Array<React.ElementRef<HostComponent<mixed>>>,
+  ) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['hotspotUpdate', 'setPressed'],
+  supportedCommands: ['hotspotUpdate', 'setPressed', 'setDestinations'],
 });
 
 export default ViewNativeComponent;

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -63,6 +63,7 @@ function LogBoxButton(props: Props): React.Node {
     content
   ) : (
     <LogBoxTouchable
+      tvParallaxProperties={{enabled: false}}
       hitSlop={props.hitSlop}
       onPress={props.onPress}
       onPressIn={() => setPressed(true)}

package/React/Base/RCTTVRemoteHandler.h

@@ -19,6 +19,9 @@ extern NSString *const RCTTVRemoteEventRight;
 extern NSString *const RCTTVRemoteEventUp;
 extern NSString *const RCTTVRemoteEventDown;
 
+extern NSString *const RCTTVRemoteEventPageUp;
+extern NSString *const RCTTVRemoteEventPageDown;
+
 extern NSString *const RCTTVRemoteEventSwipeLeft;
 extern NSString *const RCTTVRemoteEventSwipeRight;
 extern NSString *const RCTTVRemoteEventSwipeUp;

package/React/Base/RCTTVRemoteHandler.m

@@ -32,6 +32,9 @@ NSString *const RCTTVRemoteEventRight = @"right";
 NSString *const RCTTVRemoteEventUp = @"up";
 NSString *const RCTTVRemoteEventDown = @"down";
 
+NSString *const RCTTVRemoteEventPageUp = @"pageUp";
+NSString *const RCTTVRemoteEventPageDown = @"pageDown";
+
 NSString *const RCTTVRemoteEventSwipeLeft = @"swipeLeft";
 NSString *const RCTTVRemoteEventSwipeRight = @"swipeRight";
 NSString *const RCTTVRemoteEventSwipeUp = @"swipeUp";
@@ -102,6 +105,17 @@ static __volatile BOOL __useMenuKey = NO;
   [self addTapGestureRecognizerWithSelector:@selector(selectPressed:)
                                   pressType:UIPressTypeSelect
                                        name:RCTTVRemoteEventSelect];
+    
+  // Page Up/Down
+  if (@available(tvOS 14.3, *)) {
+      [self addTapGestureRecognizerWithSelector:@selector(tappedPageUp:)
+                                      pressType:UIPressTypePageUp
+                                           name:RCTTVRemoteEventPageUp];
+        
+      [self addTapGestureRecognizerWithSelector:@selector(tappedPageDown:)
+                                      pressType:UIPressTypePageDown
+                                           name:RCTTVRemoteEventPageDown];
+  }
 
   // Up
   [self addTapGestureRecognizerWithSelector:@selector(tappedUp:)
@@ -280,6 +294,16 @@ static __volatile BOOL __useMenuKey = NO;
   [self sendAppleTVEvent:RCTTVRemoteEventDown toView:r.view];
 }
 
+- (void)tappedPageUp:(UIGestureRecognizer *)r
+{
+  [self sendAppleTVEvent:RCTTVRemoteEventPageUp toView:r.view];
+}
+
+- (void)tappedPageDown:(UIGestureRecognizer *)r
+{
+  [self sendAppleTVEvent:RCTTVRemoteEventPageDown toView:r.view];
+}
+
 - (void)tappedLeft:(UIGestureRecognizer *)r
 {
   [self sendAppleTVEvent:RCTTVRemoteEventLeft toView:r.view];

package/React/Fabric/Mounting/ComponentViews/Modal/RCTFabricModalHostViewController.mm

@@ -24,7 +24,7 @@
 
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
-  if (@available(iOS 13.0, *)) {
+  if (@available(iOS 13.0, tvOS 13.0, *)) {
     self.modalInPresentation = YES;
   }
 #endif

package/React/Fabric/Mounting/ComponentViews/Root/RCTRootComponentView.h

@@ -9,6 +9,10 @@
 
 #import <React/RCTViewComponentView.h>
 
+#if TARGET_OS_TV
+#import "RCTTVRemoteHandler.h"
+#endif
+
 NS_ASSUME_NONNULL_BEGIN
 
 /**
@@ -16,6 +20,11 @@ NS_ASSUME_NONNULL_BEGIN
  */
 @interface RCTRootComponentView : RCTViewComponentView
 
+#if TARGET_OS_TV
+@property (nonatomic, strong, nullable) RCTTVRemoteHandler *tvRemoteHandler;
+@property (nonatomic, weak, nullable) UIView *reactPreferredFocusedView;
+#endif
+
 @end
 
 NS_ASSUME_NONNULL_END

package/React/Fabric/Mounting/ComponentViews/Root/RCTRootComponentView.mm

@@ -20,11 +20,29 @@ using namespace facebook::react;
   if (self = [super initWithFrame:frame]) {
     static const auto defaultProps = std::make_shared<const RootProps>();
     _props = defaultProps;
+#if TARGET_OS_TV
+      self.tvRemoteHandler = [[RCTTVRemoteHandler alloc] initWithView:self];
+#endif
   }
 
   return self;
 }
 
+#if TARGET_OS_TV
+- (void)dealloc
+{
+  self.tvRemoteHandler = nil;
+}
+
+- (NSArray<id<UIFocusEnvironment>> *)preferredFocusEnvironments {
+  if (self.reactPreferredFocusedView) {
+    return @[self.reactPreferredFocusedView];
+  }
+  return [super preferredFocusEnvironments];
+}
+#endif
+
+
 #pragma mark - RCTComponentViewProtocol
 
 + (ComponentDescriptorProvider)componentDescriptorProvider

package/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.h

@@ -69,6 +69,10 @@ NS_ASSUME_NONNULL_BEGIN
  */
 @property (nonatomic, assign) UIEdgeInsets hitTestEdgeInsets;
 
+#if TARGET_OS_TV
+@property(nonatomic, nullable) UIFocusGuide *focusGuide;
+#endif
+
 /**
  * Enforcing `call super` semantic for overridden methods from `RCTComponentViewProtocol`.
  * The methods update the instance variables.