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

package/Libraries/Components/TV/TVFocusGuideView.js

@@ -10,10 +10,11 @@
 
 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';
 
 type TVFocusGuideViewProps = $ReadOnly<{
   ...ViewProps,
@@ -28,7 +29,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 +37,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 it's 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 `focus()`, `blur()`, etc. and 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 +122,10 @@ const styles = ReactNative.StyleSheet.create({
   },
 });
 
-module.exports = TVFocusGuideView;
+const ForwardedTVFocusGuideView: React.AbstractComponent<
+  TVFocusGuideViewProps,
+  React.ElementRef<HostComponent<mixed>> & TVFocusGuideViewImperativeMethods,
+> = React.forwardRef(TVFocusGuideView);
+ForwardedTVFocusGuideView.displayName = 'TVFocusGuideView';
+
+module.exports = ForwardedTVFocusGuideView;

package/Libraries/Components/View/ViewNativeComponent.js

@@ -96,7 +96,7 @@ interface NativeCommands {
   // Apple TV focus guide API
   +setDestinations: (
     viewRef: React.ElementRef<HostComponent<mixed>>,
-    destinations: Array<React.ElementRef<HostComponent<mixed>>>,
+    destinations: Array<number>, // Node handles are basically integers
   ) => void;
 }
 

package/Libraries/Core/ReactNativeVersion.js

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

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/RCTVersion.m

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

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,7 +532,7 @@ using namespace facebook::react;
         [destinations addObject:view];
       }
     }
-    [self addFocusDestinations:destinations];
+    [self setFocusDestinations:destinations];
     return;
 #endif
   }
@@ -851,12 +902,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 +995,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,7 @@
 - (void)removeParallaxMotionEffects;
 
 
-- (void)addFocusGuide:(NSArray*)destinations;
+- (void)setFocusDestinations:(NSArray*)destinations;
 
 @property (nonatomic, strong) UIFocusGuide * focusGuide;
 

package/React/Views/RCTTVView.m

@@ -23,6 +23,9 @@
   __weak RCTBridge *_bridge;
   UITapGestureRecognizer *_selectRecognizer;
   BOOL motionEffectsAdded;
+  NSArray* focusDestinations;
+  id<UIFocusItem> previouslyFocusedItem;
+  
 }
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge {
@@ -255,6 +258,23 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
   motionEffectsAdded = NO;
 }
 
+- (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
 {
@@ -267,9 +287,8 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
     // 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.isTVSelectable ) {
@@ -445,10 +464,10 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
 
 - (void)setAutoFocus:(BOOL)autoFocus
 {
-    if (_autoFocus != autoFocus) {
-        _autoFocus = autoFocus;
-        [self addFocusGuide:@[self]];
-    }
+  if (_autoFocus != autoFocus) {
+    _autoFocus = autoFocus;
+    [self handleFocusGuide];
+  }
 }
 
 - (void)addFocusGuide:(NSArray*)destinations {
@@ -465,4 +484,43 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
   self.focusGuide.preferredFocusEnvironments = destinations;
 }
 
+- (void)removeFocusGuide {
+	if (self.focusGuide != nil) {
+    focusDestinations = nil;
+    previouslyFocusedItem = nil;
+
+    [self removeLayoutGuide:self.focusGuide];
+    self.focusGuide = nil;
+	}
+}
+
+/// 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];
+}
+
 @end

package/React/Views/RCTViewManager.m

@@ -138,6 +138,10 @@ RCT_EXPORT_VIEW_PROPERTY(nextFocusDown, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(nextFocusLeft, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(nextFocusRight, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(autoFocus, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(trapFocusUp, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(trapFocusDown, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(trapFocusLeft, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(trapFocusRight, BOOL)
 #endif
 
 // Accessibility related properties
@@ -452,7 +456,7 @@ RCT_EXPORT_METHOD(setDestinations : (nonnull NSNumber *)viewTag reactTags : (NSA
         [destinations addObject:destination];
       }
     }
-    [view addFocusGuide:destinations];
+    [view setFocusDestinations:destinations];
   }];  
 }
 #endif

package/ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=0.69.6-3
+VERSION_NAME=0.69.8-0rc
 GROUP=com.facebook.react
 
 POM_NAME=ReactNative

package/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java

@@ -105,7 +105,13 @@ public class ReactFeatureFlags {
   public static boolean enableDelayedViewStateDeletion = false;
 
   /**
-   * Send key down events as well as key up events
+   * Android TV: Send key down events as well as key up events. 
+   * Enabling this flag will result in two 'select' TVRemoteEventHandler events
+   * (one with key action 0 and one with key action 1) for each press of the center
+   * DPad button. (Similarly for arrow keys.)
+   * Note: If you enable this flag, long presses of the select or center button will
+   * result in an initial 'select' with eventKeyAction = 0 (ACTION_DOWN), before
+   * the expected 'longSelect' events are fired. (Similarly for arrow keys.)
    */
   public static boolean enableKeyDownEvents = false;