react-native-tvos 0.69.6-3 → 0.69.8-0

package/Libraries/Components/TV/TVFocusGuideView.js

@@ -10,10 +10,13 @@
 
 const React = require('react');
 const ReactNative = require('react-native');
-import ReactNativeShims from '../../Renderer/shims/ReactNative';
-const Platform = require('../../Utilities/Platform');
+
 import {Commands} from '../View/ViewNativeComponent';
 import type {ViewProps} from '../View/ViewPropTypes';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
+
+const {View} = ReactNative;
 
 type TVFocusGuideViewProps = $ReadOnly<{
   ...ViewProps,
@@ -28,7 +31,7 @@ type TVFocusGuideViewProps = $ReadOnly<{
   /**
    * The views the focus should go to
    */
-  destinations?: ?(Object[]),
+  destinations?: (?React.ElementRef<HostComponent<mixed>>)[],
 
   /**
    * @deprecated Don't use it, no longer necessary.
@@ -36,79 +39,83 @@ type TVFocusGuideViewProps = $ReadOnly<{
   safePadding?: 'vertical' | 'horizontal' | 'both' | null,
 
   autoFocus?: boolean,
-}>;
 
-const TVFocusGuideView = ({
-  enabled = true,
-  safePadding,
-  ...props
-}: TVFocusGuideViewProps): React.Node => {
-  const enabledStyle = {display: enabled ? 'flex' : 'none'};
-  const style = [styles.container, props.style, enabledStyle];
-
-  // `autoFocus` and `destinations` props shouldn't be used together.
-  // Otherwise they can conflict with each other. So if `destinations` is
-  // provided, we set `autoFocus` prop to false to avoid that conflict.
-  const autoFocus = props.destinations?.length ? false : props.autoFocus;
-
-  if (Platform.isTVOS) {
-    return (
-      <FocusGuideViewTVOS {...props} style={style} autoFocus={autoFocus} />
-    );
-  }
+  trapFocusUp?: boolean,
+  trapFocusDown?: boolean,
+  trapFocusLeft?: boolean,
+  trapFocusRight?: boolean,
+}>;
 
-  if (Platform.isTV) {
-    return (
-      <FocusGuideViewAndroidTV {...props} style={style} autoFocus={autoFocus} />
-    );
-  }
+export type TVFocusGuideViewImperativeMethods = $ReadOnly<{
+  setDestinations: (
+    destinations: (?React.ElementRef<HostComponent<mixed>>)[],
+  ) => void,
+}>;
 
-  // $FlowFixMe[prop-missing]
-  return <ReactNative.View {...props} style={style} />;
-};
+function TVFocusGuideView(
+  {
+    enabled = true,
+    safePadding,
+    destinations: destinationsProp,
+    ...props
+  }: TVFocusGuideViewProps,
+  forwardedRef,
+): React.Node {
+  const focusGuideRef = React.useRef<React.ElementRef<
+    typeof ReactNative.View,
+  > | null>(null);
+
+  const setDestinations = React.useCallback(
+    (destinations: (?React.ElementRef<HostComponent<mixed>>)[]) => {
+      const dests: number[] = (destinations || [])
+        .map(ReactNative.findNodeHandle)
+        .filter(Boolean);
+
+      if (focusGuideRef.current != null) {
+        Commands.setDestinations(focusGuideRef.current, dests);
+      }
+    },
+    [],
+  );
 
-const FocusGuideViewTVOS = (props: TVFocusGuideViewProps) => {
-  const focusGuideRef = React.useRef(null);
+  const _setNativeRef = setAndForwardRef({
+    getForwardedRef: () => forwardedRef,
+    setLocalRef: ref => {
+      focusGuideRef.current = ref;
+
+      // This is a hack. Ideally we would forwardRef to the underlying
+      // host component. However, since TVFocusGuide has its own methods that can be
+      // called as well, if we used the standard forwardRef then these
+      // methods wouldn't be accessible
+      //
+      // Here we mutate the ref, so that the user can use the standard native
+      // methods like `focus()`, `blur()`, etc. while also having access to
+      // imperative methods of this component like `setDestinations()`.
+      if (ref) {
+        ref.setDestinations = setDestinations;
+      }
+    },
+  });
 
   React.useEffect(() => {
-    if (props.destinations) {
-      const nativeDestinations: any = (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);
+    if (destinationsProp != null) {
+      setDestinations(destinationsProp);
     }
-  }, [props.destinations]);
+  }, [setDestinations, destinationsProp]);
 
-  return (
-    // $FlowFixMe[prop-missing]
-    <ReactNative.View ref={focusGuideRef} {...props} collapsable={false} />
-  );
-};
-
-const FocusGuideViewAndroidTV = (props: TVFocusGuideViewProps) => {
-  const nativeDestinations = React.useMemo(
-    () =>
-      (props.destinations || [])
-        .map(d => ReactNative.findNodeHandle(d))
-        .filter(c => c !== 0 && c !== null && c !== undefined),
-    [props.destinations],
-  );
+  const enabledStyle = {display: enabled ? 'flex' : 'none'};
+  const style = [styles.container, props.style, enabledStyle];
 
   return (
     // $FlowFixMe[prop-missing]
     <ReactNative.View
       {...props}
-      focusable={props.focusable ?? true}
-      destinations={nativeDestinations}
+      style={style}
+      ref={_setNativeRef}
       collapsable={false}
     />
   );
-};
+}
 
 const styles = ReactNative.StyleSheet.create({
   container: {
@@ -117,4 +124,10 @@ const styles = ReactNative.StyleSheet.create({
   },
 });
 
-module.exports = TVFocusGuideView;
+const ForwardedTVFocusGuideView: React.AbstractComponent<
+  TVFocusGuideViewProps,
+  React.ElementRef<typeof View> & TVFocusGuideViewImperativeMethods,
+> = React.forwardRef(TVFocusGuideView);
+ForwardedTVFocusGuideView.displayName = 'TVFocusGuideView';
+
+module.exports = ForwardedTVFocusGuideView;

package/Libraries/Components/View/View.js

@@ -13,6 +13,9 @@ import type {ViewProps} from './ViewPropTypes';
 import ViewNativeComponent from './ViewNativeComponent';
 import TextAncestor from '../../Text/TextAncestor';
 import * as React from 'react';
+import {Commands} from './ViewNativeComponent';
+
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
 
 export type Props = ViewProps;
 
@@ -23,13 +26,44 @@ export type Props = ViewProps;
  *
  * @see https://reactnative.dev/docs/view
  */
+type ViewImperativeMethods = $ReadOnly<{
+  requestTVFocus: () => void,
+}>;
+
 const View: React.AbstractComponent<
   ViewProps,
-  React.ElementRef<typeof ViewNativeComponent>,
+  React.ElementRef<typeof ViewNativeComponent> & ViewImperativeMethods,
 > = React.forwardRef((props: ViewProps, forwardedRef) => {
+  const viewRef = React.useRef<?React.ElementRef<typeof View>>(null);
+
+  const requestTVFocus = React.useCallback(() => {
+    if (viewRef.current) {
+      Commands.requestTVFocus(viewRef.current);
+    }
+  }, []);
+
+  const _setNativeRef = setAndForwardRef({
+    getForwardedRef: () => forwardedRef,
+    setLocalRef: ref => {
+      viewRef.current = ref;
+
+      // This is a hack. Ideally we would forwardRef to the underlying
+      // host component. However, since TVFocusGuide has its own methods that can be
+      // called as well, if we used the standard forwardRef then these
+      // methods wouldn't be accessible
+      //
+      // Here we mutate the ref, so that the user can use the standart native
+      // methods like `measureLayout()` etc. while also having access to
+      // imperative methods of this component like `requestTVFocus()`.
+      if (ref) {
+        ref.requestTVFocus = requestTVFocus;
+      }
+    },
+  });
+
   return (
     <TextAncestor.Provider value={false}>
-      <ViewNativeComponent {...props} ref={forwardedRef} />
+      <ViewNativeComponent {...props} ref={_setNativeRef} />
     </TextAncestor.Provider>
   );
 });

package/Libraries/Components/View/ViewNativeComponent.js

@@ -93,15 +93,21 @@ interface NativeCommands {
     viewRef: React.ElementRef<HostComponent<mixed>>,
     pressed: boolean,
   ) => void;
-  // Apple TV focus guide API
+  // Focus Guide API
   +setDestinations: (
     viewRef: React.ElementRef<HostComponent<mixed>>,
-    destinations: Array<React.ElementRef<HostComponent<mixed>>>,
+    destinations: Array<number>, // Node handles are basically integers
   ) => void;
+  +requestTVFocus: (viewRef: React.ElementRef<HostComponent<mixed>>) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['hotspotUpdate', 'setPressed', 'setDestinations'],
+  supportedCommands: [
+    'hotspotUpdate',
+    'setPressed',
+    'setDestinations',
+    'requestTVFocus',
+  ],
 });
 
 export default ViewNativeComponent;

package/Libraries/Core/ReactNativeVersion.js

@@ -12,6 +12,6 @@
 exports.version = {
   major: 0,
   minor: 69,
-  patch: 6,
-  prerelease: '3',
+  patch: 8,
+  prerelease: '0',
 };

package/Libraries/Lists/VirtualizedList.js

@@ -42,6 +42,7 @@ import {
   type ChildListState,
   type ListDebugInfo,
 } from './VirtualizedListContext.js';
+import TVFocusGuideView from '../Components/TV/TVFocusGuideView';
 
 type Item = any;
 
@@ -1116,16 +1117,30 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           unregisterAsNestedChild: this._unregisterAsNestedChild,
           debugInfo: this._getDebugInfo(),
         }}>
-        {React.cloneElement(
-          (
-            this.props.renderScrollComponent ||
-            this._defaultRenderScrollComponent
-          )(scrollProps),
-          {
-            ref: this._captureScrollRef,
-          },
-          cells,
-        )}
+        <TVFocusGuideView
+          trapFocusLeft={
+            horizontalOrDefault(this.props.horizontal) && this.state.first > 0
+          }
+          trapFocusRight={
+            horizontalOrDefault(this.props.horizontal) && this._hasMore
+          }
+          trapFocusUp={
+            !horizontalOrDefault(this.props.horizontal) && this.state.first > 0
+          }
+          trapFocusDown={
+            !horizontalOrDefault(this.props.horizontal) && this._hasMore
+          }>
+          {React.cloneElement(
+            (
+              this.props.renderScrollComponent ||
+              this._defaultRenderScrollComponent
+            )(scrollProps),
+            {
+              ref: this._captureScrollRef,
+            },
+            cells,
+          )}
+        </TVFocusGuideView>
       </VirtualizedListContextProvider>
     );
     let ret: React.Node = innerRet;

package/README.md

@@ -207,7 +207,8 @@ class Game2048 extends React.Component {
 | Prop | Value | Description | 
 |---|---|---|
 | destinations | any[]? | Array of `Component`s to register as destinations of the FocusGuideView |
-| autoFocus | boolean? | If true, `TVFocusGuide` will automatically manage focus for you. It will redirect the focus to the first focusable child on the first visit. It also remembers the last focused child and redirects the focus to it on the subsequent visits. |
+| autoFocus | boolean? | If true, `TVFocusGuide` will automatically manage focus for you. It will redirect the focus to the first focusable child on the first visit. It also remembers the last focused child and redirects the focus to it on the subsequent visits. `destinations` prop takes precedence over this prop when used together. |
+| trapFocus* (Up, Down, Left, Right) | Prevents focus escaping from the container for the given directions. |
 
 - _Next Focus Direction_: the props `nextFocus*` on `View` should work as expected on iOS too (previously android only). One caveat is that if there is no focusable in the `nextFocusable*` direction next to the starting view, iOS doesn't check if we want to override the destination. 
 

package/React/Base/RCTRootView.m

@@ -167,6 +167,12 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : (NSCoder *)aDecoder)
 #if TARGET_OS_TV
 - (NSArray<id<UIFocusEnvironment>> *)preferredFocusEnvironments
 {
+  if (self.reactPreferredFocusEnvironments != nil) {
+    NSArray<id<UIFocusEnvironment>> *tempReactPreferredFocusEnvironments = self.reactPreferredFocusEnvironments;
+    self.reactPreferredFocusEnvironments = nil;
+    return tempReactPreferredFocusEnvironments;
+  }
+
   if (self.reactPreferredFocusedView && self.reactPreferredFocusedView.window != nil) {
     return @[self.reactPreferredFocusedView];
   }

package/React/Base/RCTRootViewInternal.h

@@ -27,6 +27,7 @@
 #if TARGET_OS_TV
 @property (nonatomic, strong) RCTTVRemoteHandler *tvRemoteHandler;
 @property (nonatomic, weak) UIView *reactPreferredFocusedView;
+@property (nonatomic, copy, nullable) NSArray<id<UIFocusEnvironment>> *reactPreferredFocusEnvironments;
 #endif
 
 - (void)contentViewInvalidated;

package/React/Base/RCTVersion.m

@@ -23,8 +23,8 @@ NSDictionary* RCTGetReactNativeVersion(void)
     __rnVersion = @{
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(69),
-                  RCTVersionPatch: @(6),
-                  RCTVersionPrerelease: @"3",
+                  RCTVersionPatch: @(8),
+                  RCTVersionPrerelease: @"0",
                   };
   });
   return __rnVersion;

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

@@ -23,6 +23,7 @@ NS_ASSUME_NONNULL_BEGIN
 #if TARGET_OS_TV
 @property (nonatomic, strong, nullable) RCTTVRemoteHandler *tvRemoteHandler;
 @property (nonatomic, weak, nullable) UIView *reactPreferredFocusedView;
+@property (nonatomic, copy, nullable) NSArray<id<UIFocusEnvironment>> *reactPreferredFocusEnvironments;
 #endif
 
 @end

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

@@ -35,6 +35,12 @@ using namespace facebook::react;
 }
 
 - (NSArray<id<UIFocusEnvironment>> *)preferredFocusEnvironments {
+  if (self.reactPreferredFocusEnvironments != nil) {
+    NSArray<id<UIFocusEnvironment>> *tempReactPreferredFocusEnvironments = self.reactPreferredFocusEnvironments;
+    self.reactPreferredFocusEnvironments = nil;
+    return tempReactPreferredFocusEnvironments;
+  }
+
   if (self.reactPreferredFocusedView && self.reactPreferredFocusedView.window != nil) {
     return @[self.reactPreferredFocusedView];
   }

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

@@ -53,6 +53,12 @@ using namespace facebook::react;
   UIView *_nextFocusRight;
   UIView *_nextFocusActiveTarget;
   BOOL _autoFocus;
+  BOOL _trapFocusUp;
+  BOOL _trapFocusDown;
+  BOOL _trapFocusLeft;
+  BOOL _trapFocusRight;
+  NSArray* _focusDestinations;
+  id<UIFocusItem> _previouslyFocusedItem;
 }
 
 @synthesize removeClippedSubviews = _removeClippedSubviews;
@@ -132,7 +138,7 @@ using namespace facebook::react;
   return (RCTRootComponentView *)rootview;
 }
 
-- (void)addFocusGuide {
+- (void)addFocusGuide:(NSArray*)destinations {
   if (self.focusGuide == nil) {
     self.focusGuide = [UIFocusGuide new];
     [self addLayoutGuide:self.focusGuide];
@@ -142,18 +148,47 @@ using namespace facebook::react;
     [self.focusGuide.widthAnchor constraintEqualToAnchor:self.widthAnchor].active = YES;
     [self.focusGuide.heightAnchor constraintEqualToAnchor:self.heightAnchor].active = YES;
   }
+  
+  self.focusGuide.preferredFocusEnvironments = destinations;
 }
 
 - (void)removeFocusGuide {
   if (self.focusGuide != nil) {
+    _focusDestinations = nil;
+    _previouslyFocusedItem = nil;
+
     [self removeLayoutGuide:self.focusGuide];
     self.focusGuide = nil;
   }
 }
 
-- (void)addFocusDestinations:(NSArray*)destinations {
-  [self addFocusGuide];
-  self.focusGuide.preferredFocusEnvironments = destinations;
+/// Responsible of determining what focusGuide's next state should be based on the active properties of the component.
+- (void)handleFocusGuide
+{
+  // `destinations` should always be favored against `autoFocus` feature, if provided.
+  if (_focusDestinations != nil) {
+    [self addFocusGuide:_focusDestinations];
+  } else if (_autoFocus && _previouslyFocusedItem != nil) {
+    // We also add `self` as the second option in case `previouslyFocusedItem` becomes unreachable (e.g gets detached).
+    // `self` helps redirecting focus to the first focusable element in that case.
+    [self addFocusGuide:@[_previouslyFocusedItem, self]];
+  } else if (_autoFocus) {
+    [self addFocusGuide:@[self]];
+  } else {
+    // Then there's no need to have `focusGuide`, remove it to prevent potential bugs.
+    [self removeFocusGuide];
+  }
+}
+
+- (void)setFocusDestinations:(NSArray*)destinations
+{
+  if(destinations.count == 0) {
+    _focusDestinations = nil;
+  } else {
+    _focusDestinations = destinations;
+  }
+
+  [self handleFocusGuide];
 }
 
 - (void)sendFocusNotification:(__unused UIFocusUpdateContext *)context
@@ -422,6 +457,23 @@ using namespace facebook::react;
   }
 }
 
+- (BOOL)shouldUpdateFocusInContext:(UIFocusUpdateContext *)context
+{
+  // This is  the `trapFocus*` logic that prevents the focus updates if
+  // focus should be trapped and `nextFocusedItem` is not a child FocusEnv.
+  if ((_trapFocusUp && context.focusHeading == UIFocusHeadingUp)
+     || (_trapFocusDown && context.focusHeading == UIFocusHeadingDown)
+     || (_trapFocusLeft && context.focusHeading == UIFocusHeadingLeft)
+     || (_trapFocusRight && context.focusHeading == UIFocusHeadingRight)) {
+    
+    // Checks if `nextFocusedItem` is a child `FocusEnvironment`.
+    // If not, it returns false thus it keeps the focus inside.
+    return [UIFocusSystem environment:self containsEnvironment:context.nextFocusedItem];
+  }
+
+  return [super shouldUpdateFocusInContext:context];
+}
+
 - (void)didUpdateFocusInContext:(UIFocusUpdateContext *)context withAnimationCoordinator:(UIFocusAnimationCoordinator *)coordinator
 {
     if (context.previouslyFocusedView == context.nextFocusedView) {
@@ -433,9 +485,8 @@ using namespace facebook::react;
       // So, `previouslyFocusedItem` is always the last focused child of `TVFocusGuide`.
       // We should update `preferredFocusEnvironments` in this case to make sure `FocusGuide` remembers
       // the last focused element and redirects the focus to it whenever focus comes back.
-      // We also add `self` as the second option in case `previouslyFocusedItem` becomes unreachable (e.g gets detached).
-      // `self` helps redirecting focus to the first focusable element in that case.
-      self.focusGuide.preferredFocusEnvironments = @[context.previouslyFocusedItem, self];
+      _previouslyFocusedItem = context.previouslyFocusedItem;
+      [self handleFocusGuide];
     }
 
     if (context.nextFocusedView == self && self.isUserInteractionEnabled ) {
@@ -481,9 +532,31 @@ using namespace facebook::react;
         [destinations addObject:view];
       }
     }
-    [self addFocusDestinations:destinations];
+    [self setFocusDestinations:destinations];
     return;
 #endif
+  } else if ([commandName isEqualToString:@"requestTVFocus"]) {
+#if TARGET_OS_TV
+    if ([args count] != 0) {
+      RCTLogError(
+          @"%@ command %@ received %d arguments, expected %d.", @"View", commandName, (int)[args count], 0);
+      return;
+    }
+
+    RCTRootComponentView *rootview = [self containingRootView];
+    if (rootview == nil) return;
+
+    if (self.focusGuide != nil) {
+      rootview.reactPreferredFocusEnvironments = self.focusGuide.preferredFocusEnvironments;
+    } else {
+      rootview.reactPreferredFocusEnvironments = @[self];
+    }
+
+    [rootview setNeedsFocusUpdate];
+    [rootview updateFocusIfNeeded];
+    
+#endif
+    return;
   }
 #if RCT_DEBUG
   RCTLogError(@"%@ received command %@, which is not a supported command.", @"View", commandName);
@@ -851,12 +924,13 @@ using namespace facebook::react;
   // `autoFocus`
   if (oldViewProps.autoFocus != newViewProps.autoFocus) {
     _autoFocus = newViewProps.autoFocus;
-    if (_autoFocus == true) {
-      [self addFocusGuide];
-    } else {
-      [self removeFocusGuide];
-    }
+    [self handleFocusGuide];
   }
+
+  _trapFocusUp = newViewProps.trapFocusUp;
+  _trapFocusDown = newViewProps.trapFocusDown;
+  _trapFocusLeft = newViewProps.trapFocusLeft;
+  _trapFocusRight = newViewProps.trapFocusRight;
 #endif
 
 
@@ -943,22 +1017,7 @@ using namespace facebook::react;
     self.layer.opacity = (float)props.opacity;
   }
   
-  // We reset the `preferredFocusEnvironments` in case of recycling to prevent bugs.
-  // Resetting it also introduces a bug but it prevents much worse ones.
-  // The destination `focusEnvironment` reference could be recycled and used in another place so we might
-  // be holding a reference and redirecting the focus to the wrong view.
-  // To make sure that's not the case, we reset the destination to `self` which will
-  // redirect the focus to the first focusable child.
-  if (self.focusGuide != nil) {
-    self.focusGuide.preferredFocusEnvironments = @[self];
-  }
-    
-  // If `autoFocus` is enabled, addition/removal process of `UIFocusGuide` is managed
-  // inside `updateProps` method. Removing `UIFocusGuide` here for that case would cause
-  // weird bugs and state loss.
-  if (!_autoFocus) {
-    [self removeFocusGuide];
-  }
+  [self removeFocusGuide];
 
   _propKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN = nil;
   _eventEmitter.reset();

package/React/Views/RCTTVView.h

@@ -47,6 +47,11 @@
  */
 @property (nonatomic, assign) BOOL autoFocus;
 
+@property (nonatomic, assign) BOOL trapFocusUp;
+@property (nonatomic, assign) BOOL trapFocusDown;
+@property (nonatomic, assign) BOOL trapFocusLeft;
+@property (nonatomic, assign) BOOL trapFocusRight;
+
 - (instancetype)initWithBridge:(RCTBridge *)bridge;
 
 /**
@@ -75,7 +80,9 @@
 - (void)removeParallaxMotionEffects;
 
 
-- (void)addFocusGuide:(NSArray*)destinations;
+- (void)setFocusDestinations:(NSArray*)destinations;
+
+- (void)requestTVFocus;
 
 @property (nonatomic, strong) UIFocusGuide * focusGuide;