react-native-tvos 0.69.6-2 → 0.69.6-3

package/Libraries/Components/Pressable/Pressable.js

@@ -34,9 +34,10 @@ import type {
   LayoutEvent,
   MouseEvent,
   PressEvent,
+  TVRemoteEvent,
 } from '../../Types/CoreEventTypes';
 import View from '../View/View';
-import typeof TVParallaxPropertiesType from '../TV/TVViewPropTypes';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import Platform from '../../Utilities/Platform';
 import {tvFocusEventHandler} from '../TV/TVFocusEventHandler';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
@@ -317,14 +318,17 @@ function Pressable(props: Props, forwardedRef): React.Node {
       unstable_pressDelay,
     ],
   );
+  // $FlowFixMe[incompatible-call]
   const eventHandlers = usePressability(config);
 
   const pressableTVFocusEventHandler = useCallback(
-    (evt: Event) => {
+    (evt: FocusEvent) => {
       if (isTVSelectable !== false || focusable !== false) {
+        // $FlowFixMe[prop-missing]
         if (evt?.eventType === 'focus') {
           setFocused(true);
           onFocus && onFocus(evt);
+        // $FlowFixMe[prop-missing]
         } else if (evt.eventType === 'blur') {
           onBlur && onBlur(evt);
           setFocused(false);
@@ -333,10 +337,14 @@ function Pressable(props: Props, forwardedRef): React.Node {
       // Use these on tvOS only. Android press events go to onClick() so we don't
       // need to call onPress() again here
       if (Platform.isTVOS) {
+        // $FlowFixMe[prop-missing]
         if (focused && evt.eventType === 'select') {
+        // $FlowFixMe[incompatible-exact]
           onPress && onPress(evt);
         }
+        // $FlowFixMe[prop-missing]
         if (focused && evt.eventType === 'longSelect') {
+        // $FlowFixMe[incompatible-exact]
           onLongPress && onLongPress(evt);
         }
       }
@@ -348,6 +356,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     if (!tvFocusEventHandler) {
       return;
     }
+    // $FlowFixMe[prop-missing]
     const viewTag = viewRef?.current?._nativeTag;
     tvFocusEventHandler.register(viewTag, pressableTVFocusEventHandler);
     return () => {

package/Libraries/Components/ScrollView/ScrollView.js

@@ -1834,6 +1834,7 @@ ForwardedScrollView.Context = ScrollViewContext;
 
 ForwardedScrollView.displayName = 'ScrollView';
 
+// $FlowFixMe[not-an-object]
 module.exports = ((ForwardedScrollView: $FlowFixMe): React.AbstractComponent<
   React.ElementConfig<typeof ScrollView>,
   $ReadOnly<{|

package/Libraries/Components/TV/TVEventHandler.js

@@ -14,20 +14,22 @@ import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
 import Platform from '../../Utilities/Platform';
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
 import NativeTVNavigationEventEmitter from './NativeTVNavigationEventEmitter';
+import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
 
 class TVEventHandler {
   __nativeTVNavigationEventListener: ?EventSubscription = null;
-  __nativeTVNavigationEventEmitter: ?NativeEventEmitter = null;
+  __nativeTVNavigationEventEmitter: ?NativeEventEmitter<TVRemoteEvent> = null;
 
   enable(component: ?any, callback: Function): void {
     if (Platform.OS === 'ios' && !NativeTVNavigationEventEmitter) {
       return;
     }
 
-    this.__nativeTVNavigationEventEmitter = new NativeEventEmitter(
+    this.__nativeTVNavigationEventEmitter = new NativeEventEmitter<TVRemoteEvent>(
       NativeTVNavigationEventEmitter,
     );
     this.__nativeTVNavigationEventListener = this.__nativeTVNavigationEventEmitter.addListener(
+      // $FlowFixMe[prop-missing]
       'onHWKeyEvent',
       data => {
         if (callback) {

package/Libraries/Components/TV/TVFocusEventHandler.js

@@ -14,10 +14,11 @@ import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
 import Platform from '../../Utilities/Platform';
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
 import NativeTVNavigationEventEmitter from './NativeTVNavigationEventEmitter';
+import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
 
 class TVFocusEventHandler {
   __nativeTVNavigationEventListener: ?EventSubscription = null;
-  __nativeTVNavigationEventEmitter: ?NativeEventEmitter = null;
+  __nativeTVNavigationEventEmitter: ?NativeEventEmitter<TVRemoteEvent> = null;
   __callbackMap: Map<any, Function> = new Map();
 
   constructor() {
@@ -25,10 +26,11 @@ class TVFocusEventHandler {
       return;
     }
 
-    this.__nativeTVNavigationEventEmitter = new NativeEventEmitter(
+    this.__nativeTVNavigationEventEmitter = new NativeEventEmitter<TVRemoteEvent>(
       NativeTVNavigationEventEmitter,
     );
     this.__nativeTVNavigationEventListener = this.__nativeTVNavigationEventEmitter.addListener(
+       // $FlowFixMe[prop-missing]
       'onHWKeyEvent',
       data => {
         const callback = this.__callbackMap.get(data.tag);

package/Libraries/Components/TV/TVFocusGuideView.js

@@ -28,12 +28,14 @@ type TVFocusGuideViewProps = $ReadOnly<{
   /**
    * The views the focus should go to
    */
-  destinations: ?(Object[]),
+  destinations?: ?(Object[]),
 
   /**
    * @deprecated Don't use it, no longer necessary.
    */
   safePadding?: 'vertical' | 'horizontal' | 'both' | null,
+
+  autoFocus?: boolean,
 }>;
 
 const TVFocusGuideView = ({
@@ -44,14 +46,24 @@ const TVFocusGuideView = ({
   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} />;
+    return (
+      <FocusGuideViewTVOS {...props} style={style} autoFocus={autoFocus} />
+    );
   }
 
   if (Platform.isTV) {
-    return <FocusGuideViewAndroidTV {...props} style={style} />;
+    return (
+      <FocusGuideViewAndroidTV {...props} style={style} autoFocus={autoFocus} />
+    );
   }
 
+  // $FlowFixMe[prop-missing]
   return <ReactNative.View {...props} style={style} />;
 };
 
@@ -59,17 +71,21 @@ const FocusGuideViewTVOS = (props: TVFocusGuideViewProps) => {
   const focusGuideRef = React.useRef(null);
 
   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);
+    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);
+    }
   }, [props.destinations]);
 
   return (
+    // $FlowFixMe[prop-missing]
     <ReactNative.View ref={focusGuideRef} {...props} collapsable={false} />
   );
 };
@@ -84,6 +100,7 @@ const FocusGuideViewAndroidTV = (props: TVFocusGuideViewProps) => {
   );
 
   return (
+    // $FlowFixMe[prop-missing]
     <ReactNative.View
       {...props}
       focusable={props.focusable ?? true}

package/Libraries/Components/TV/TVViewPropTypes.js

@@ -78,4 +78,11 @@ export type TVViewProps = $ReadOnly<{|
    */
   tvParallaxProperties?: TVParallaxPropertiesType,
 
+  /**
+   * Additional properties needed for flow checks on TVFocusGuideView
+   */
+  destinations?: ?(Object[]),
+  enabled?: boolean,
+  autofocus?: boolean,
+  safePadding?: string | null,
 |}>;

package/Libraries/Components/TV/useTVEventHandler.js

@@ -1,8 +1,9 @@
 // @flow
 import React from 'react';
 import TVEventHandler from './TVEventHandler';
+import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
 
-const useTVEventHandler = (handleEvent: (evt: Event) => void) => {
+const useTVEventHandler = (handleEvent: (evt: TVRemoteEvent) => void) => {
   React.useEffect(() => {
     const handler: TVEventHandler = new TVEventHandler();
     handler.enable(null, function(cmp, evt) {

package/Libraries/Components/TextInput/TextInput.js

@@ -1233,7 +1233,7 @@ function InternalTextInput(props: Props): React.Node {
       (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
       !(props.onChange || props.onChangeText);
 
-    if (props.multiline && Platform.isTVOS) {
+    if (props.multiline === true && Platform.isTVOS) {
       warnOnce(
         'text-input-multiline-tvos',
         'Multiline TextInput not supported on Apple TV.  See https://github.com/react-native-tvos/react-native-tvos/issues/109',

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -187,6 +187,11 @@ class TouchableBounce extends React.Component<Props, State> {
             this.props.onPress(event);
           }
         },
+        onLongPress: event => {
+          if (this.props.onLongPress != null) {
+            this.props.onLongPress(event);
+          }
+        },
       });
     }
   }

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -19,7 +19,7 @@ import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import Platform from '../../Utilities/Platform';
 import View from '../../Components/View/View';
 import type {ViewProps} from '../../Components/View/ViewPropTypes';
-import typeof TVParallaxPropertiesType from '../TV/TVViewPropTypes';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 
@@ -34,7 +34,7 @@ type AndroidProps = $ReadOnly<{|
 type TVProps = $ReadOnly<{|
   hasTVPreferredFocus?: ?boolean,
   isTVSelectable?: ?boolean,
-  tvParallaxProperties?: ?TVParallaxPropertiesType,
+  tvParallaxProperties?: TVParallaxPropertiesType,
   nextFocusDown?: ?number,
   nextFocusForward?: ?number,
   nextFocusLeft?: ?number,
@@ -379,6 +379,11 @@ class TouchableHighlight extends React.Component<Props, State> {
             this.props.onPress(event);
           }
         },
+        onLongPress: event => {
+          if (this.props.onLongPress != null && Platform.OS !== 'android') {
+            this.props.onLongPress(event);
+          }
+        },
       });
     }
   }

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -19,7 +19,7 @@ import Easing from '../../Animated/Easing';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
-import typeof TVParallaxPropertiesType from '../TV/TVViewPropTypes';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 
 import * as React from 'react';
@@ -27,7 +27,7 @@ import * as React from 'react';
 type TVProps = $ReadOnly<{|
   hasTVPreferredFocus?: ?boolean,
   isTVSelectable?: ?boolean,
-  tvParallaxProperties?: ?TVParallaxPropertiesType,
+  tvParallaxProperties?: TVParallaxPropertiesType,
   nextFocusDown?: ?number,
   nextFocusForward?: ?number,
   nextFocusLeft?: ?number,
@@ -292,6 +292,11 @@ class TouchableOpacity extends React.Component<Props, State> {
             this.props.onPress(event);
           }
         },
+        onLongPress: event => {
+          if (this.props.onLongPress != null && Platform.OS !== 'android') {
+            this.props.onLongPress(event);
+          }
+        },
       });
     }
   }

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -13,6 +13,7 @@ import Pressability, {
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import TVTouchable from './TVTouchable';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -65,6 +66,7 @@ type Props = $ReadOnly<{|
   rejectResponderTermination?: ?boolean,
   testID?: ?string,
   touchSoundDisabled?: ?boolean,
+  tvParallaxProperties?: TVParallaxPropertiesType,
 |}>;
 
 type State = $ReadOnly<{|
@@ -156,6 +158,11 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
             this.props.onPress(event);
           }
         },
+        onLongPress: event => {
+          if (this.props.onLongPress != null) {
+            this.props.onLongPress(event);
+          }
+        },
       });
     }
   }

package/Libraries/Core/ReactNativeVersion.js

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

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -19,10 +19,6 @@ import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {PressEvent} from '../../Types/CoreEventTypes';
 
-const LogBoxTouchable = Platform.isTVOS ?
-                            TouchableHighlight :
-                            TouchableWithoutFeedback;
-
 type Props = $ReadOnly<{|
   backgroundColor: $ReadOnly<{|
     default: string,
@@ -61,15 +57,23 @@ function LogBoxButton(props: Props): React.Node {
 
   return props.onPress == null ? (
     content
+  ) : Platform.isTV ? (
+        <TouchableHighlight
+          tvParallaxProperties={{enabled: false}}
+          hitSlop={props.hitSlop}
+          onPress={props.onPress}
+          onPressIn={() => setPressed(true)}
+          onPressOut={() => setPressed(false)}>
+          {content}
+        </TouchableHighlight>
   ) : (
-    <LogBoxTouchable
-      tvParallaxProperties={{enabled: false}}
-      hitSlop={props.hitSlop}
-      onPress={props.onPress}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}>
-      {content}
-    </LogBoxTouchable>
+        <TouchableWithoutFeedback
+          hitSlop={props.hitSlop}
+          onPress={props.onPress}
+          onPressIn={() => setPressed(true)}
+          onPressOut={() => setPressed(false)}>
+          {content}
+        </TouchableWithoutFeedback>
   );
 }
 

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -67,7 +67,7 @@ function LogBoxLogNotification(props: Props): React.Node {
           }}>
           <View
             style={toastStyles.tvDismissContainer}>
-            <Message message={{content: 'Dismiss'}} />
+            <Message message={{content: 'Dismiss', substitutions: []}} />
           </View>
         </LogBoxButton>
       ) : null}

package/Libraries/NativeAnimation/RCTNativeAnimatedTurboModule.mm

@@ -26,9 +26,6 @@ typedef void (^AnimatedOperation)(RCTNativeAnimatedNodesManager *nodesManager);
   NSMutableArray<AnimatedOperation> *_operations;
   // Operations called before views have been updated.
   NSMutableArray<AnimatedOperation> *_preOperations;
-  NSMutableDictionary<NSNumber *, NSNumber *> *_animIdIsManagedByFabric;
-  // A set of nodeIDs managed by Fabric.
-  NSMutableSet<NSNumber *> *_nodeIDsManagedByFabric;
 }
 
 RCT_EXPORT_MODULE();
@@ -43,8 +40,6 @@ RCT_EXPORT_MODULE();
   if (self = [super init]) {
     _operations = [NSMutableArray new];
     _preOperations = [NSMutableArray new];
-    _animIdIsManagedByFabric = [NSMutableDictionary new];
-    _nodeIDsManagedByFabric = [NSMutableSet new];
   }
   return self;
 }
@@ -113,9 +108,6 @@ RCT_EXPORT_METHOD(updateAnimatedNodeConfig:(double)tag
 RCT_EXPORT_METHOD(connectAnimatedNodes:(double)parentTag
                   childTag:(double)childTag)
 {
-  if ([_nodeIDsManagedByFabric containsObject:@(childTag)]) {
-    [_nodeIDsManagedByFabric addObject:@(parentTag)];
-  }
   [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
     [nodesManager connectAnimatedNodes:[NSNumber numberWithDouble:parentTag] childTag:[NSNumber numberWithDouble:childTag]];
   }];
@@ -138,11 +130,7 @@ RCT_EXPORT_METHOD(startAnimatingNode:(double)animationId
     [nodesManager startAnimatingNode:[NSNumber numberWithDouble:animationId] nodeTag:[NSNumber numberWithDouble:nodeTag] config:config endCallback:callBack];
   }];
 
-  BOOL isNodeManagedByFabric = [_nodeIDsManagedByFabric containsObject:@(nodeTag)];
-  if (isNodeManagedByFabric) {
-    self->_animIdIsManagedByFabric[[NSNumber numberWithDouble:animationId]] = @YES;
-    [self flushOperationQueues];
-  }
+  [self flushOperationQueues];
 }
 
 RCT_EXPORT_METHOD(stopAnimation:(double)animationId)
@@ -150,9 +138,7 @@ RCT_EXPORT_METHOD(stopAnimation:(double)animationId)
   [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
     [nodesManager stopAnimation:[NSNumber numberWithDouble:animationId]];
   }];
-  if ([_animIdIsManagedByFabric[[NSNumber numberWithDouble:animationId]] boolValue]) {
-    [self flushOperationQueues];
-  }
+  [self flushOperationQueues];
 }
 
 RCT_EXPORT_METHOD(setAnimatedNodeValue:(double)nodeTag
@@ -192,9 +178,6 @@ RCT_EXPORT_METHOD(extractAnimatedNodeOffset:(double)nodeTag)
 RCT_EXPORT_METHOD(connectAnimatedNodeToView:(double)nodeTag
                   viewTag:(double)viewTag)
 {
-  if (RCTUIManagerTypeForTagIsFabric(@(viewTag))) {
-    [_nodeIDsManagedByFabric addObject:@(nodeTag)];
-  }
   [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
     // viewName is not used when node is managed by Fabric, and nodes are always managed by Fabric in Bridgeless.
     [nodesManager connectAnimatedNodeToView:[NSNumber numberWithDouble:nodeTag] viewTag:[NSNumber numberWithDouble:viewTag] viewName:nil];
@@ -291,7 +274,6 @@ RCT_EXPORT_METHOD(getValue:(double)nodeTag saveValueCallback:(RCTResponseSenderB
   _preOperations = [NSMutableArray new];
   _operations = [NSMutableArray new];
 
-
   RCTExecuteOnMainQueue(^{
     for (AnimatedOperation operation in preOperations) {
       operation(self->_nodesManager);

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -16,6 +16,7 @@ import type {NativeColorValue} from './PlatformColorValueTypes';
 
 export type ____ColorValue_Internal = null | string | number | NativeColorValue;
 
+export type ColorValue = ____ColorValue_Internal;
 export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>;
 export type PointValue = {
   x: number,

package/Libraries/Types/CoreEventTypes.js

@@ -164,3 +164,12 @@ export type MouseEvent = SyntheticEvent<
     timestamp: number,
   |}>,
 >;
+
+export type TVRemoteEvent = 
+  $ReadOnly<{|
+    eventType: string,
+    eventKeyAction?: string,
+    // $FlowFixMe[unclear-type]
+    body?: any,
+  |}>;
+

package/README.md

@@ -206,7 +206,8 @@ class Game2048 extends React.Component {
 
 | Prop | Value | Description | 
 |---|---|---|
-| destinations | any[] | Array of `Component`s to register as destinations of the FocusGuideView |
+| 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. |
 
 - _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

@@ -24,7 +24,7 @@ NSDictionary* RCTGetReactNativeVersion(void)
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(69),
                   RCTVersionPatch: @(6),
-                  RCTVersionPrerelease: @"2",
+                  RCTVersionPrerelease: @"3",
                   };
   });
   return __rnVersion;

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

@@ -52,6 +52,7 @@ using namespace facebook::react;
   UIView *_nextFocusLeft;
   UIView *_nextFocusRight;
   UIView *_nextFocusActiveTarget;
+  BOOL _autoFocus;
 }
 
 @synthesize removeClippedSubviews = _removeClippedSubviews;
@@ -131,7 +132,7 @@ using namespace facebook::react;
   return (RCTRootComponentView *)rootview;
 }
 
-- (void)addFocusDestinations:(NSArray*)destinations {
+- (void)addFocusGuide {
   if (self.focusGuide == nil) {
     self.focusGuide = [UIFocusGuide new];
     [self addLayoutGuide:self.focusGuide];
@@ -141,7 +142,17 @@ using namespace facebook::react;
     [self.focusGuide.widthAnchor constraintEqualToAnchor:self.widthAnchor].active = YES;
     [self.focusGuide.heightAnchor constraintEqualToAnchor:self.heightAnchor].active = YES;
   }
+}
 
+- (void)removeFocusGuide {
+  if (self.focusGuide != nil) {
+    [self removeLayoutGuide:self.focusGuide];
+    self.focusGuide = nil;
+  }
+}
+
+- (void)addFocusDestinations:(NSArray*)destinations {
+  [self addFocusGuide];
   self.focusGuide.preferredFocusEnvironments = destinations;
 }
 
@@ -416,6 +427,17 @@ using namespace facebook::react;
     if (context.previouslyFocusedView == context.nextFocusedView) {
       return;
     }
+  
+    if (_autoFocus && self.focusGuide != nil && context.previouslyFocusedItem != nil) {
+      // Whenever focus leaves the container, `nextFocusedView` is the destination, the item outside the container.
+      // 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];
+    }
+
     if (context.nextFocusedView == self && self.isUserInteractionEnabled ) {
       [self becomeFirstResponder];
       [self enableDirectionalFocusGuides];
@@ -825,6 +847,16 @@ using namespace facebook::react;
       _nextFocusRight = nil;
     }
   }
+  
+  // `autoFocus`
+  if (oldViewProps.autoFocus != newViewProps.autoFocus) {
+    _autoFocus = newViewProps.autoFocus;
+    if (_autoFocus == true) {
+      [self addFocusGuide];
+    } else {
+      [self removeFocusGuide];
+    }
+  }
 #endif
 
 
@@ -910,10 +942,22 @@ using namespace facebook::react;
   if ([_propKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN containsObject:@"opacity"]) {
     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 removeLayoutGuide:self.focusGuide];
-    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];
   }
 
   _propKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN = nil;

package/React/Views/RCTTVView.h

@@ -42,6 +42,11 @@
 @property (nonatomic, strong) UIFocusGuide * focusGuideLeft;
 @property (nonatomic, strong) UIFocusGuide * focusGuideRight;
 
+/**
+ * Auto focus
+ */
+@property (nonatomic, assign) BOOL autoFocus;
+
 - (instancetype)initWithBridge:(RCTBridge *)bridge;
 
 /**

package/React/Views/RCTTVView.m

@@ -261,6 +261,17 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
   if (context.previouslyFocusedView == context.nextFocusedView) {
     return;
   }
+    
+  if (_autoFocus && self.focusGuide != nil && context.previouslyFocusedItem != nil) {
+    // Whenever focus leaves the container, `nextFocusedView` is the destination, the item outside the container.
+    // 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];
+  }
+    
   if (context.nextFocusedView == self && self.isTVSelectable ) {
     [self becomeFirstResponder];
     [self enableDirectionalFocusGuides];
@@ -432,6 +443,14 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
   [self setPreferredFocus:hasTVPreferredFocus];
 }
 
+- (void)setAutoFocus:(BOOL)autoFocus
+{
+    if (_autoFocus != autoFocus) {
+        _autoFocus = autoFocus;
+        [self addFocusGuide:@[self]];
+    }
+}
+
 - (void)addFocusGuide:(NSArray*)destinations {
   if (self.focusGuide == nil) {
     self.focusGuide = [UIFocusGuide new];

package/React/Views/RCTViewManager.m

@@ -137,6 +137,7 @@ RCT_EXPORT_VIEW_PROPERTY(nextFocusUp, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(nextFocusDown, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(nextFocusLeft, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(nextFocusRight, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(autoFocus, BOOL)
 #endif
 
 // Accessibility related properties

package/ReactAndroid/gradle.properties

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