react-native-tvos 0.73.4-0rc1 → 0.73.6-1

package/Libraries/Components/TV/TVFocusGuideView.js

@@ -8,13 +8,14 @@
  * @format
  */
 
-const React = require('react');
-const ReactNative = require('react-native');
-
-import {Commands} from '../View/ViewNativeComponent';
-import type {ViewProps} from '../View/ViewPropTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+
 import setAndForwardRef from '../../Utilities/setAndForwardRef';
+import {Commands} from '../View/ViewNativeComponent';
+
+const React = require('react');
+const ReactNative = require('react-native');
 
 const {View} = ReactNative;
 
@@ -44,6 +45,11 @@ type TVFocusGuideViewProps = $ReadOnly<{
   trapFocusDown?: boolean,
   trapFocusLeft?: boolean,
   trapFocusRight?: boolean,
+
+  /**
+   * When set to false, this view and all its subviews will be NOT focusable.
+   */
+  focusable?: boolean | undefined,
 }>;
 
 export type TVFocusGuideViewImperativeMethods = $ReadOnly<{
@@ -57,6 +63,8 @@ function TVFocusGuideView(
     enabled = true,
     safePadding,
     destinations: destinationsProp,
+    autoFocus,
+    focusable,
     ...props
   }: TVFocusGuideViewProps,
   forwardedRef,
@@ -106,6 +114,11 @@ function TVFocusGuideView(
   const enabledStyle = {display: enabled ? 'flex' : 'none'};
   const style = [styles.container, props.style, enabledStyle];
 
+  // If there are no destinations and the autoFocus is false the the default value of focusable should be false
+  // It is then properly handled by the native code
+  const tvOSSelectable =
+    destinationsProp || autoFocus ? focusable !== false : false;
+
   return (
     // $FlowFixMe[prop-missing]
     <ReactNative.View
@@ -113,6 +126,11 @@ function TVFocusGuideView(
       style={style}
       ref={_setNativeRef}
       collapsable={false}
+      autoFocus={autoFocus}
+      // tvOS only prop
+      isTVSelectable={tvOSSelectable}
+      // Android TV only prop
+      tvFocusable={focusable}
     />
   );
 }

package/Libraries/Core/ReactNativeVersion.js

@@ -12,6 +12,6 @@
 exports.version = {
   major: 0,
   minor: 73,
-  patch: 4,
-  prerelease: '0rc1',
+  patch: 6,
+  prerelease: '1',
 };

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -192,7 +192,7 @@ export function parseComponentStack(message: string): ComponentStack {
       if (!s) {
         return null;
       }
-      const match = s.match(/(.*) \(at (.*\.js):([\d]+)\)/);
+      const match = s.match(/(.*) \(at (.*\.(?:js|jsx|ts|tsx)):([\d]+)\)/);
       if (!match) {
         return null;
       }

package/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm

@@ -158,6 +158,8 @@
     [attributedText insertAttributedString:propertyAttributedText atIndex:0];
   }
 
+  [self postprocessAttributedText:attributedText];
+
   NSAttributedString *newAttributedText;
   if (![_previousAttributedText isEqualToAttributedString:attributedText]) {
     // We have to follow `set prop` pattern:
@@ -191,6 +193,52 @@
   }];
 }
 
+- (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText
+{
+  __block CGFloat maximumLineHeight = 0;
+
+  [attributedText enumerateAttribute:NSParagraphStyleAttributeName
+                             inRange:NSMakeRange(0, attributedText.length)
+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                          usingBlock:^(NSParagraphStyle *paragraphStyle, __unused NSRange range, __unused BOOL *stop) {
+                            if (!paragraphStyle) {
+                              return;
+                            }
+
+                            maximumLineHeight = MAX(paragraphStyle.maximumLineHeight, maximumLineHeight);
+                          }];
+
+  if (maximumLineHeight == 0) {
+    // `lineHeight` was not specified, nothing to do.
+    return;
+  }
+
+  __block CGFloat maximumFontLineHeight = 0;
+
+  [attributedText enumerateAttribute:NSFontAttributeName
+                             inRange:NSMakeRange(0, attributedText.length)
+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                          usingBlock:^(UIFont *font, NSRange range, __unused BOOL *stop) {
+                            if (!font) {
+                              return;
+                            }
+
+                            if (maximumFontLineHeight <= font.lineHeight) {
+                              maximumFontLineHeight = font.lineHeight;
+                            }
+                          }];
+
+  if (maximumLineHeight < maximumFontLineHeight) {
+    return;
+  }
+
+  CGFloat baseLineOffset = maximumLineHeight / 2.0 - maximumFontLineHeight / 2.0;
+
+  [attributedText addAttribute:NSBaselineOffsetAttributeName
+                         value:@(baseLineOffset)
+                         range:NSMakeRange(0, attributedText.length)];
+}
+
 #pragma mark -
 
 - (NSAttributedString *)measurableAttributedText

package/README.md

@@ -59,12 +59,12 @@ yarn create react-native-app TestApp --template https://github.com/react-native-
 cd TestApp
 # Now build and start the app in the tvOS Simulator - this will only work on a macOS machine.
 # This command can also be run via "yarn tvos".
-npx expo run:ios --scheme MyApp-tvOS --device "Apple TV"
+npx expo run:ios --scheme TestApp-tvOS --device "Apple TV"
 # You can also build and start the app on an iOS phone simulator.
 # This command can also be run via "yarn ios".
 npx expo run:ios
 # or specify a simulator:
-npx expo run:ios --scheme MyApp --device "iPhone 15"
+npx expo run:ios --scheme TestApp --device "iPhone 15"
 # This command builds and starts the app in an Android TV emulator or a phone emulator (needs to be created in advance).
 # This command can also be run via "yarn android".
 npx expo run:android --device tv_api_31
@@ -204,15 +204,25 @@ class Game2048 extends React.Component {
 
 - _TVFocusGuideView_: This component provides support for Apple's `UIFocusGuide` API and is implemented in the same way for Android TV, to help ensure that focusable controls can be navigated to, even if they are not directly in line with other controls.  An example is provided in `RNTester` that shows two different ways of using this 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. `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. |
-
-More information on the focus handling improvements above can be found in [this article](https://medium.com/xite-engineering/revolutionizing-focus-management-in-tv-applications-with-react-native-10ba69bd90).
-
-- _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. 
-
-- _TVTextScrollView_: On Apple TV, a ScrollView will not scroll unless there are focusable items inside it or above/below it.  This component wraps ScrollView and uses tvOS-specific native code to allow scrolling using swipe gestures from the remote control.
-
+  | 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. `destinations` prop takes precedence over this prop when used together. |
+  | focusable | boolean? | When set to false, this view and all its subviews will be NOT focusable. |
+  | trapFocus* (Up, Down, Left, Right) | Prevents focus escaping from the container for the given directions. |
+  
+  More information on the focus handling improvements above can be found in [this article](https://medium.com/xite-engineering/revolutionizing-focus-management-in-tv-applications-with-react-native-10ba69bd90).
+  
+  - _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. 
+  
+  - _TVTextScrollView_: On Apple TV, a ScrollView will not scroll unless there are focusable items inside it or above/below it.  This component wraps ScrollView and uses tvOS-specific native code to allow scrolling using swipe gestures from the remote control.
+
+- VirtualizedList: We extend `VirtualizedList` to make virtualization work well with focus management in mind. All of the improvements that we made are automatically available to all the VirtualizedList based components such as `FlatList`.
+  - Defaults
+    - VirtualizeList contents are automatically wrapped with a `TVFocusGuideView` with `trapFocus*` properties enabled depending on the orientation of the list. This default makes sure that focus doesn't leave the list accidentally due to a virtualization issue etc. until reaching the beginning or the end of the list.
+
+  New Props:
+
+  | Prop | Value | Description | 
+  |---|---|---|
+  | additionalRenderRegions | {first: number; last: number;}[]? | Array of `RenderRegions` that allows you to define regions in the list that are not subject to virtualization, ensuring they are always rendered. This is particularly useful for preventing blank areas in critical parts of the list. These regions are rendered lazily after the initial render and are specified as an array of objects, each with `first` and `last` indices marking the beginning and end of the non-virtualized region based on index. See the [feature proposal](https://github.com/react-native-tvos/react-native-tvos/discussions/663) for more context. |

package/React/Base/RCTVersion.m

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

package/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

@@ -24,9 +24,14 @@
 #import "RCTEnhancedScrollView.h"
 #import "RCTFabricComponentsPlugins.h"
 
+#if TARGET_OS_TV
+#import "RCTTVRemoteHandler.h"
+#endif
+
 using namespace facebook::react;
 
 static const CGFloat kClippingLeeway = 44.0;
+static const float TV_DEFAULT_SWIPE_DURATION = 0.3;
 
 static UIScrollViewKeyboardDismissMode RCTUIKeyboardDismissModeFromProps(const ScrollViewProps &props)
 {
@@ -105,6 +110,9 @@ static void RCTSendScrollEventForNativeAnimations_DEPRECATED(UIScrollView *scrol
 
   CGRect _prevFirstVisibleFrame;
   __weak UIView *_firstVisibleView;
+    
+  BOOL _blockFirstTouch;
+  NSMutableDictionary *_tvRemoteGestureRecognizers;
 }
 
 + (RCTScrollViewComponentView *_Nullable)findScrollViewComponentViewForView:(UIView *)view
@@ -139,6 +147,8 @@ static void RCTSendScrollEventForNativeAnimations_DEPRECATED(UIScrollView *scrol
     } else {
       _scrollEventThrottle = INFINITY;
     }
+      
+    _tvRemoteGestureRecognizers = [NSMutableDictionary new];
   }
 
   return self;
@@ -792,6 +802,242 @@ static void RCTSendScrollEventForNativeAnimations_DEPRECATED(UIScrollView *scrol
   }
 }
 
+#pragma mark Apple TV swipe and focus handling
+
+#if TARGET_OS_TV
+- (void)didUpdateFocusInContext:(UIFocusUpdateContext *)context
+       withAnimationCoordinator:(UIFocusAnimationCoordinator *)coordinator
+{
+    if (context.previouslyFocusedView == context.nextFocusedView || !_props->isTVSelectable) {
+        return;
+    }
+    if (context.nextFocusedView == self) {
+        [self becomeFirstResponder];
+        [self addSwipeGestureRecognizers];
+        [self sendFocusNotification];
+        // if we enter the scroll view from different view then block first touch event since it is the event that triggered the focus
+        _blockFirstTouch = (unsigned long)context.focusHeading != 0;
+        [self addArrowsListeners];
+    } else if (context.previouslyFocusedView == self) {
+        [self removeArrowsListeners];
+        [self sendBlurNotification];
+        [self removeSwipeGestureRecognizers];
+        [self resignFirstResponder];
+        // if we leave the scroll view and go up, then scroll to top; if going down,
+        // scroll to bottom
+        // Similarly for left and right
+        RCTEnhancedScrollView *scrollView = (RCTEnhancedScrollView *)_scrollView;
+        if (context.focusHeading == UIFocusHeadingUp && scrollView.snapToStart) {
+            [self swipeVerticalScrollToOffset:0.0];
+        } else if(context.focusHeading == UIFocusHeadingDown && scrollView.snapToEnd) {
+            [self swipeVerticalScrollToOffset:scrollView.contentSize.height];
+        } else if(context.focusHeading == UIFocusHeadingLeft && scrollView.snapToStart) {
+            [self swipeHorizontalScrollToOffset:0.0];
+        } else if(context.focusHeading == UIFocusHeadingRight && scrollView.snapToEnd) {
+            [self swipeHorizontalScrollToOffset:scrollView.contentSize.width];
+        }
+    }
+}
+
+- (void)addArrowsListeners
+{
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(handleTVNavigationEventNotification:)
+                                                 name:@"RCTTVNavigationEventNotification"
+                                               object:nil];
+}
+
+- (void)removeArrowsListeners
+{
+    [[NSNotificationCenter defaultCenter] removeObserver:self
+                                                    name:@"RCTTVNavigationEventNotification"
+                                                  object:nil];
+}
+
+- (void)handleTVNavigationEventNotification:(NSNotification *)notif
+{
+    NSArray *supportedEvents = [NSArray arrayWithObjects:@"up", @"down", @"left", @"right", nil];
+
+    if (notif.object == nil || notif.object[@"eventType"] == nil || ![supportedEvents containsObject:notif.object[@"eventType"]] ) {
+        return;
+    }
+
+    if (_blockFirstTouch) {
+        _blockFirstTouch = NO;
+        return;
+    }
+
+    BOOL isHorizontal = _scrollView.contentSize.width > self.frame.size.width;
+    if (!isHorizontal) {
+        if ([notif.object[@"eventType"] isEqual: @"down"]) {
+            [self swipedDown];
+            return;
+        }
+
+        if ([notif.object[@"eventType"] isEqual: @"up"]) {
+            [self swipedUp];
+            return;
+        }
+    }
+
+    if ([notif.object[@"eventType"] isEqual: @"left"]) {
+        [self swipedLeft];
+        return;
+    }
+
+    if ([notif.object[@"eventType"] isEqual: @"right"]) {
+        [self swipedRight];
+        return;
+    }
+}
+
+- (BOOL)shouldUpdateFocusInContext:(UIFocusUpdateContext *)context
+{
+    BOOL isHorizontal = _scrollView.contentSize.width > self.frame.size.width;
+    // Keep focus inside the scroll view till the end of the content
+    if (isHorizontal) {
+        if ((context.focusHeading == UIFocusHeadingLeft && self.scrollView.contentOffset.x > 0)
+            || (context.focusHeading == UIFocusHeadingRight && self.scrollView.contentOffset.x < self.scrollView.contentSize.width - self.scrollView.visibleSize.width)
+        ) {
+            return [UIFocusSystem environment:self containsEnvironment:context.nextFocusedItem];
+        }
+    } else {
+        if ((context.focusHeading == UIFocusHeadingUp && self.scrollView.contentOffset.y > 0)
+            || (context.focusHeading == UIFocusHeadingDown && self.scrollView.contentOffset.y < self.scrollView.contentSize.height - self.scrollView.visibleSize.height)
+        ) {
+            return [UIFocusSystem environment:self containsEnvironment:context.nextFocusedItem];
+        }
+    }
+
+    return [super shouldUpdateFocusInContext:context];
+}
+
+- (void)sendFocusNotification
+{
+    [[NSNotificationCenter defaultCenter] postNotificationName:@"RCTTVNavigationEventNotification"
+                                                        object:@{ @"eventType": @"focus", @"tag": @([self tag]) }];
+}
+
+- (void)sendBlurNotification
+{
+    [[NSNotificationCenter defaultCenter] postNotificationName:@"RCTTVNavigationEventNotification"
+                                                        object:@{ @"eventType": @"blur", @"tag": @([self tag]) }];
+}
+
+- (NSInteger)swipeVerticalInterval
+{
+    RCTEnhancedScrollView *scrollView = (RCTEnhancedScrollView *)_scrollView;
+    if (scrollView.snapToInterval) {
+        return scrollView.snapToInterval;
+    }
+    return scrollView.visibleSize.height / 2;
+}
+
+- (NSInteger)swipeHorizontalInterval
+{
+    RCTEnhancedScrollView *scrollView = (RCTEnhancedScrollView *)_scrollView;
+    if (scrollView.snapToInterval) {
+        return scrollView.snapToInterval;
+    }
+    return scrollView.visibleSize.width / 2;
+}
+
+- (NSTimeInterval)swipeDuration
+{
+    auto pressDuration = _props->tvParallaxProperties.pressDuration;
+    auto duration = pressDuration.has_value() ? pressDuration.value() : TV_DEFAULT_SWIPE_DURATION;
+    if (duration == 0.0) {
+        duration = TV_DEFAULT_SWIPE_DURATION;
+    }
+    return duration;
+}
+
+- (void)swipeVerticalScrollToOffset:(CGFloat)yOffset
+{
+    _blockFirstTouch = NO;
+    dispatch_async(dispatch_get_main_queue(), ^{
+        CGFloat limitedOffset = yOffset;
+        limitedOffset = MAX(limitedOffset, 0.0);
+        limitedOffset = MIN(limitedOffset, self.scrollView.contentSize.height - self.scrollView.visibleSize.height);
+        [UIView animateWithDuration:[self swipeDuration] animations:^{
+            self.scrollView.contentOffset =
+                CGPointMake(self.scrollView.contentOffset.x, limitedOffset);
+        }];
+    });
+}
+
+- (void)swipeHorizontalScrollToOffset:(CGFloat)xOffset
+{
+    _blockFirstTouch = NO;
+    dispatch_async(dispatch_get_main_queue(), ^{
+        CGFloat limitedOffset = xOffset;
+        limitedOffset = MAX(limitedOffset, 0.0);
+        limitedOffset = MIN(limitedOffset, self.scrollView.contentSize.width - self.scrollView.visibleSize.width);
+        [UIView animateWithDuration:[self swipeDuration] animations:^{
+            self.scrollView.contentOffset =
+                CGPointMake(limitedOffset, self.scrollView.contentOffset.y);
+        }];
+    });
+}
+
+- (void)swipedUp
+{
+    CGFloat newOffset = self.scrollView.contentOffset.y - [self swipeVerticalInterval];
+    NSLog(@"Swiped up to %f", newOffset);
+    [self swipeVerticalScrollToOffset:newOffset];
+}
+
+- (void)swipedDown
+{
+    CGFloat newOffset = self.scrollView.contentOffset.y + [self swipeVerticalInterval];
+    NSLog(@"Swiped down to %f", newOffset);
+    [self swipeVerticalScrollToOffset:newOffset];
+}
+
+- (void)swipedLeft
+{
+    CGFloat newOffset = self.scrollView.contentOffset.x - [self swipeHorizontalInterval];
+    NSLog(@"Swiped left to %f", newOffset);
+    [self swipeHorizontalScrollToOffset:newOffset];
+}
+
+- (void)swipedRight
+{
+    CGFloat newOffset = self.scrollView.contentOffset.x + [self swipeHorizontalInterval];
+    NSLog(@"Swiped right to %f", newOffset);
+    [self swipeHorizontalScrollToOffset:newOffset];
+}
+
+- (void)addSwipeGestureRecognizers
+{
+    [self addSwipeGestureRecognizerWithSelector:@selector(swipedUp) direction:UISwipeGestureRecognizerDirectionUp name:RCTTVRemoteEventSwipeUp];
+    [self addSwipeGestureRecognizerWithSelector:@selector(swipedDown) direction:UISwipeGestureRecognizerDirectionDown name:RCTTVRemoteEventSwipeDown];
+    [self addSwipeGestureRecognizerWithSelector:@selector(swipedLeft) direction:UISwipeGestureRecognizerDirectionLeft name:RCTTVRemoteEventSwipeLeft];
+    [self addSwipeGestureRecognizerWithSelector:@selector(swipedRight) direction:UISwipeGestureRecognizerDirectionRight name:RCTTVRemoteEventSwipeRight];
+}
+
+- (void)addSwipeGestureRecognizerWithSelector:(nonnull SEL)selector
+                                    direction:(UISwipeGestureRecognizerDirection)direction
+                                         name:(NSString *)name
+{
+    UISwipeGestureRecognizer *recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:selector];
+    recognizer.direction = direction;
+
+    _tvRemoteGestureRecognizers[name] = recognizer;
+    [self.scrollView addGestureRecognizer:recognizer];
+}
+
+- (void)removeSwipeGestureRecognizers
+{
+    NSArray *names = [self->_tvRemoteGestureRecognizers allKeys];
+    for (NSString *name in names) {
+        UIGestureRecognizer *r = self->_tvRemoteGestureRecognizers[name];
+        [self.scrollView removeGestureRecognizer:r];
+        [self->_tvRemoteGestureRecognizers removeObjectForKey:name];
+    }
+}
+#endif // TARGET_OS_TV
+
 @end
 
 Class<RCTComponentViewProtocol> RCTScrollViewCls(void)

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

@@ -45,7 +45,7 @@ using namespace facebook::react;
 
 @implementation RCTViewComponentView {
   UIColor *_backgroundColor;
-  CALayer *_borderLayer;
+  __weak CALayer *_borderLayer;
   BOOL _needsInvalidateLayer;
   BOOL _isJSResponder;
   BOOL _removeClippedSubviews;
@@ -415,13 +415,29 @@ using namespace facebook::react;
 }
 
 
+- (BOOL)isTVFocusGuide
+{
+  #if TARGET_OS_TV
+    return self.focusGuide != nil;
+  #endif
+  
+  return NO;
+}
+
+
 - (BOOL)isUserInteractionEnabled
 {
-    return YES;
+  if ([self isTVFocusGuide]) {
+    return _props->isTVSelectable;
+  }
+  return YES;
 }
 
 - (BOOL)canBecomeFocused
 {
+  if ([self isTVFocusGuide]) {
+    return NO;
+  }
   return _props->isTVSelectable;
 }
 
@@ -433,6 +449,9 @@ using namespace facebook::react;
 //
 - (void)enableDirectionalFocusGuides
 {
+  if (!self.isFocused) {
+    return;
+  }
   if (self->_nextFocusUp != nil) {
     if (self.focusGuideUp == nil) {
       self.focusGuideUp = [UIFocusGuide new];
@@ -545,7 +564,7 @@ using namespace facebook::react;
       [self handleFocusGuide];
     }
 
-    if (context.nextFocusedView == self && self.isUserInteractionEnabled ) {
+    if (context.nextFocusedView == self && self.isUserInteractionEnabled && ![self isTVFocusGuide]) {
       [self becomeFirstResponder];
       [self enableDirectionalFocusGuides];
       [coordinator addCoordinatedAnimations:^(void){
@@ -895,7 +914,7 @@ using namespace facebook::react;
 #if TARGET_OS_TV
   // `isTVSelectable`
   if (oldViewProps.isTVSelectable != newViewProps.isTVSelectable) {
-    if (newViewProps.isTVSelectable) {
+    if (newViewProps.isTVSelectable && ![self isTVFocusGuide]) {
       UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                                                    action:@selector(handleSelect:)];
       recognizer.allowedPressTypes = @[ @(UIPressTypeSelect) ];
@@ -942,6 +961,7 @@ using namespace facebook::react;
     if (newViewProps.nextFocusUp.has_value()) {
       UIView *rootView = [self containingRootView];
       _nextFocusUp = [rootView viewWithTag:newViewProps.nextFocusUp.value()];
+      [self enableDirectionalFocusGuides];
     } else {
       _nextFocusUp = nil;
     }
@@ -951,6 +971,7 @@ using namespace facebook::react;
     if (newViewProps.nextFocusDown.has_value()) {
       UIView *rootView = [self containingRootView];
       _nextFocusDown = [rootView viewWithTag:newViewProps.nextFocusDown.value()];
+      [self enableDirectionalFocusGuides];
     } else {
       _nextFocusDown = nil;
     }
@@ -960,6 +981,7 @@ using namespace facebook::react;
     if (newViewProps.nextFocusLeft.has_value()) {
       UIView *rootView = [self containingRootView];
       _nextFocusLeft = [rootView viewWithTag:newViewProps.nextFocusLeft.value()];
+      [self enableDirectionalFocusGuides];
     } else {
       _nextFocusLeft = nil;
     }
@@ -969,6 +991,7 @@ using namespace facebook::react;
     if (newViewProps.nextFocusRight.has_value()) {
       UIView *rootView = [self containingRootView];
       _nextFocusRight = [rootView viewWithTag:newViewProps.nextFocusRight.value()];
+      [self enableDirectionalFocusGuides];
     } else {
       _nextFocusRight = nil;
     }
@@ -1013,9 +1036,7 @@ using namespace facebook::react;
   _layoutMetrics = layoutMetrics;
   _needsInvalidateLayer = YES;
 
-  if (_borderLayer) {
-    _borderLayer.frame = self.layer.bounds;
-  }
+  _borderLayer.frame = self.layer.bounds;
 
   if (_contentView) {
     _contentView.frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
@@ -1232,10 +1253,7 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
 
   if (useCoreAnimationBorderRendering) {
     layer.mask = nil;
-    if (_borderLayer) {
-      [_borderLayer removeFromSuperlayer];
-      _borderLayer = nil;
-    }
+    [_borderLayer removeFromSuperlayer];
 
     layer.borderWidth = (CGFloat)borderMetrics.borderWidths.left;
     CGColorRef borderColor = RCTCreateCGColorRefFromSharedColor(borderMetrics.borderColors.left);
@@ -1248,11 +1266,12 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
     layer.backgroundColor = _backgroundColor.CGColor;
   } else {
     if (!_borderLayer) {
-      _borderLayer = [CALayer new];
-      _borderLayer.zPosition = -1024.0f;
-      _borderLayer.frame = layer.bounds;
-      _borderLayer.magnificationFilter = kCAFilterNearest;
-      [layer addSublayer:_borderLayer];
+      CALayer *borderLayer = [CALayer new];
+      borderLayer.zPosition = -1024.0f;
+      borderLayer.frame = layer.bounds;
+      borderLayer.magnificationFilter = kCAFilterNearest;
+      [layer addSublayer:borderLayer];
+      _borderLayer = borderLayer;
     }
 
     layer.backgroundColor = nil;
@@ -1293,6 +1312,10 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
       }
     }
 
+    // If mutations are applied inside of Animation block, it may cause _borderLayer to be animated.
+    // To stop that, imperatively remove all animations from _borderLayer.
+    [_borderLayer removeAllAnimations];
+
     // Stage 2.5. Custom Clipping Mask
     CAShapeLayer *maskLayer = nil;
     CGFloat cornerRadius = 0;

package/React/React-RCTFabric.podspec

@@ -20,6 +20,7 @@ folly_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_C
 folly_compiler_flags = folly_flags + ' ' + '-Wno-comma -Wno-shorten-64-to-32'
 folly_version = '2022.05.16.00'
 boost_compiler_flags = '-Wno-documentation'
+new_arch_flags = ENV['RCT_NEW_ARCH_ENABLED'] == '1' ? ' -DRCT_NEW_ARCH_ENABLED=1' : ''
 
 header_search_paths = [
   "\"$(PODS_TARGET_SRCROOT)/ReactCommon\"",
@@ -56,13 +57,13 @@ Pod::Spec.new do |s|
                              "Fabric/**/RCTSurfacePointerHandler.mm"
   s.ios.exclude_files      = "Fabric/**/RCTSurfaceTouchHandlerTV.mm",
                              "Fabric/**/RCTSurfacePointerHandlerTV.mm"
-  s.compiler_flags         = folly_compiler_flags + ' ' + boost_compiler_flags
+  s.compiler_flags         = folly_compiler_flags + ' ' + boost_compiler_flags + new_arch_flags
   s.header_dir             = header_dir
   s.module_name            = module_name
   s.framework              = ["JavaScriptCore", "MobileCoreServices"]
   s.pod_target_xcconfig    = {
     "HEADER_SEARCH_PATHS" => header_search_paths,
-    "OTHER_CFLAGS" => "$(inherited) -DRN_FABRIC_ENABLED" + " " + folly_flags,
+    "OTHER_CFLAGS" => "$(inherited) -DRN_FABRIC_ENABLED" + " " + folly_flags + new_arch_flags,
     "CLANG_CXX_LANGUAGE_STANDARD" => "c++20"
   }.merge!(ENV['USE_FRAMEWORKS'] != nil ? {
     "PUBLIC_HEADERS_FOLDER_PATH" => "#{module_name}.framework/Headers/#{header_dir}"

package/React/Views/RCTTVView.m

@@ -75,7 +75,7 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
 - (void)setIsTVSelectable:(BOOL)isTVSelectable
 {
   self->_isTVSelectable = isTVSelectable;
-  if (isTVSelectable) {
+  if (isTVSelectable && ![self isTVFocusGuide]) {
     UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                                                  action:@selector(handleSelect:)];
     recognizer.allowedPressTypes = @[ @(UIPressTypeSelect) ];
@@ -138,13 +138,25 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
   }
 }
 
+- (BOOL)isTVFocusGuide
+{
+  return self.focusGuide != nil;
+}
+
 - (BOOL)isUserInteractionEnabled
 {
+  if ([self isTVFocusGuide]) {
+    return (self.isTVSelectable);
+  }
   return YES;
 }
 
 - (BOOL)canBecomeFocused
 {
+  if ([self isTVFocusGuide]) {
+    return NO;
+  }
+
   return (self.isTVSelectable);
 }
 
@@ -311,7 +323,7 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
     [self handleFocusGuide];
   }
     
-  if (context.nextFocusedView == self && self.isTVSelectable ) {
+  if (context.nextFocusedView == self && ![self isTVFocusGuide] && self.isTVSelectable ) {
     [self becomeFirstResponder];
     [self enableDirectionalFocusGuides];
     [coordinator addCoordinatedAnimations:^(void){
@@ -336,6 +348,9 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
 //
 - (void)enableDirectionalFocusGuides
 {
+  if (!self.isFocused) {
+    return;
+  }
   if (self->_nextFocusUp != nil) {
     if (self.focusGuideUp == nil) {
       self.focusGuideUp = [UIFocusGuide new];
@@ -455,18 +470,22 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
 
 - (void)setNextFocusUp:(NSNumber *)nextFocusUp {
   self->_nextFocusUp = [self getViewById: nextFocusUp];
+  [self enableDirectionalFocusGuides];
 }
 
 - (void)setNextFocusDown:(NSNumber *)nextFocusDown {
   self->_nextFocusDown = [self getViewById: nextFocusDown];
+  [self enableDirectionalFocusGuides];
 }
 
 - (void)setNextFocusLeft:(NSNumber *)nextFocusLeft {
   self->_nextFocusLeft = [self getViewById: nextFocusLeft];
+  [self enableDirectionalFocusGuides];
 }
 
 - (void)setNextFocusRight:(NSNumber *)nextFocusRight {
   self->_nextFocusRight = [self getViewById: nextFocusRight];
+  [self enableDirectionalFocusGuides];
 }
 
 - (void)setPreferredFocus:(BOOL)hasTVPreferredFocus

package/ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=0.73.4-0rc1
+VERSION_NAME=0.73.6-1
 
 # react.internal.publishingGroup=com.facebook.react
 # For TV use this group

package/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/ReactNativeVersion.java

@@ -17,6 +17,6 @@ public class ReactNativeVersion {
   public static final Map<String, Object> VERSION = MapBuilder.<String, Object>of(
       "major", 0,
       "minor", 73,
-      "patch", 4,
-      "prerelease", "0rc1");
+      "patch", 6,
+      "prerelease", "1");
 }

package/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java

@@ -1216,7 +1216,7 @@ public class ReactViewGroup extends ViewGroup
      * `mRecoverFocus` flag indicates a temporary focus recovery mode it's in which
      * requires full access to children focusable elements.
      */
-    if (isTVFocusGuide() && !mRecoverFocus) {
+    if (isTVFocusGuide() && !mRecoverFocus && this.getDescendantFocusability() != ViewGroup.FOCUS_BLOCK_DESCENDANTS) {
       View focusedChild = getFocusedChildOfFocusGuide();
 
       /*

package/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java

@@ -12,6 +12,7 @@ import android.graphics.Rect;
 import android.os.Build;
 import android.util.Log;
 import android.view.View;
+import android.view.ViewGroup;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import com.facebook.common.logging.FLog;
@@ -306,6 +307,9 @@ public class ReactViewManager extends ReactClippingViewManager<ReactViewGroup> {
     setFocusable(view, focusable);
     if (!focusable) {
       view.setFocusable(false);
+      view.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
+    } else {
+      view.setDescendantFocusability(ViewGroup.FOCUS_BEFORE_DESCENDANTS);
     }
   }
 

package/ReactCommon/cxxreact/ReactNativeVersion.h

@@ -17,8 +17,8 @@ namespace facebook::react {
 constexpr struct {
   int32_t Major = 0;
   int32_t Minor = 73;
-  int32_t Patch = 4;
-  std::string_view Prerelease = "0rc1";
+  int32_t Patch = 6;
+  std::string_view Prerelease = "1";
 } ReactNativeVersion;
 
 } // namespace facebook::react

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tvos",
-  "version": "0.73.4-0rc1",
+  "version": "0.73.6-1",
   "description": "A framework for building native apps using React",
   "license": "MIT",
   "repository": {
@@ -94,16 +94,16 @@
   },
   "dependencies": {
     "@jest/create-cache-key-function": "^29.6.3",
-    "@react-native-community/cli": "12.3.2",
-    "@react-native-community/cli-platform-android": "12.3.2",
-    "@react-native-community/cli-platform-ios": "12.3.2",
+    "@react-native-community/cli": "12.3.6",
+    "@react-native-community/cli-platform-android": "12.3.6",
+    "@react-native-community/cli-platform-ios": "12.3.6",
     "@react-native/assets-registry": "0.73.1",
-    "@react-native/community-cli-plugin": "0.73.16",
+    "@react-native/community-cli-plugin": "0.73.17",
     "@react-native/codegen": "0.73.3",
     "@react-native/gradle-plugin": "0.73.4",
     "@react-native/js-polyfills": "0.73.1",
     "@react-native/normalize-colors": "0.73.2",
-    "@react-native-tvos/virtualized-lists": "0.73.4-0rc1",
+    "@react-native-tvos/virtualized-lists": "0.73.6-1",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -151,6 +151,6 @@
     ]
   },
   "devDependencies": {
-    "react-native-core": "npm:react-native@0.73.4"
+    "react-native-core": "npm:react-native@0.73.6"
   }
 }

package/scripts/cocoapods/new_architecture.rb

@@ -104,6 +104,10 @@ class NewArchitectureHelper
         current_config = hash["pod_target_xcconfig"] != nil ? hash["pod_target_xcconfig"] : {}
         current_headers = current_config["HEADER_SEARCH_PATHS"] != nil ? current_config["HEADER_SEARCH_PATHS"] : ""
 
+        flags_to_add = new_arch_enabled ?
+            "#{@@folly_compiler_flags} -DRCT_NEW_ARCH_ENABLED=1" :
+            "#{@@folly_compiler_flags}"
+
         header_search_paths = ["\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/Headers/Private/Yoga\""]
         if ENV['USE_FRAMEWORKS']
             header_search_paths << "\"$(PODS_ROOT)/DoubleConversion\""
@@ -123,7 +127,7 @@ class NewArchitectureHelper
                 }
         end
         header_search_paths_string = header_search_paths.join(" ")
-        spec.compiler_flags = compiler_flags.empty? ? @@folly_compiler_flags : "#{compiler_flags} #{@@folly_compiler_flags}"
+        spec.compiler_flags = compiler_flags.empty? ? "$(inherited) #{flags_to_add}" : "$(inherited) #{compiler_flags} #{flags_to_add}"
         current_config["HEADER_SEARCH_PATHS"] = current_headers.empty? ?
             header_search_paths_string :
             "#{current_headers} #{header_search_paths_string}"

package/scripts/cocoapods/utils.rb

@@ -86,6 +86,27 @@ class ReactNativePodsUtils
         end
     end
 
+    def self.fix_flipper_for_xcode_15_3(installer)
+        installer.pods_project.targets.each do |target|
+            if target.name == 'Flipper'
+                file_path = 'Pods/Flipper/xplat/Flipper/FlipperTransportTypes.h'
+                if !File.exist?(file_path)
+                    return
+                end
+
+                contents = File.read(file_path)
+                if contents.include?('#include <functional>')
+                    return
+                end
+                mod_content = contents.gsub("#pragma once", "#pragma once\n#include <functional>")
+                File.chmod(0755, file_path)
+                File.open(file_path, 'w') do |file|
+                    file.puts(mod_content)
+                end
+            end
+        end
+    end
+
     def self.set_use_hermes_build_setting(installer, hermes_enabled)
         Pod::UI.puts("Setting USE_HERMES build settings")
         projects = self.extract_projects(installer)

package/scripts/codegen/generate-artifacts-executor.js

@@ -32,7 +32,13 @@ const REACT_NATIVE_PACKAGE_ROOT_FOLDER = path.join(__dirname, '..', '..');
 
 const CODEGEN_DEPENDENCY_NAME = '@react-native/codegen';
 const CODEGEN_REPO_PATH = `${REACT_NATIVE_REPOSITORY_ROOT}/packages/react-native-codegen`;
-const CODEGEN_NPM_PATH = `${REACT_NATIVE_PACKAGE_ROOT_FOLDER}/../${CODEGEN_DEPENDENCY_NAME}`;
+// This is a change for 0.73-stable only since this piece of code was replaced:
+// https://github.com/facebook/react-native/commit/9071a3a0b0e11ad711927651bcb2412f553b6fe9
+const CODEGEN_NPM_PATH = path.dirname(
+  require.resolve(path.join(CODEGEN_DEPENDENCY_NAME, 'package.json'), {
+    paths: [REACT_NATIVE_PACKAGE_ROOT_FOLDER],
+  }),
+);
 const CORE_LIBRARIES_WITH_OUTPUT_FOLDER = {
   rncore: path.join(REACT_NATIVE_PACKAGE_ROOT_FOLDER, 'ReactCommon'),
   FBReactNativeSpec: null,
@@ -189,33 +195,34 @@ function handleThirdPartyLibraries(
   codegenConfigKey,
 ) {
   // Determine which of these are codegen-enabled libraries
-  const configDir =
-    baseCodegenConfigFileDir ||
-    path.join(REACT_NATIVE_PACKAGE_ROOT_FOLDER, '..');
+  const configDir = baseCodegenConfigFileDir || process.cwd();
   console.log(
     `\n\n[Codegen] >>>>> Searching for codegen-enabled libraries in ${configDir}`,
   );
 
   // Handle third-party libraries
+  const resolveOptions = {paths: [configDir]};
   Object.keys(dependencies).forEach(dependency => {
     if (dependency === REACT_NATIVE_DEPENDENCY_NAME) {
       // react-native should already be added.
       return;
     }
-    const codegenConfigFileDir = path.join(configDir, dependency);
-    const configFilePath = path.join(
-      codegenConfigFileDir,
-      codegenConfigFilename,
-    );
-    if (fs.existsSync(configFilePath)) {
+
+    try {
+      const configFilePath = require.resolve(
+        `${dependency}/${codegenConfigFilename}`,
+        resolveOptions,
+      );
       const configFile = JSON.parse(fs.readFileSync(configFilePath));
       extractLibrariesFromJSON(
         configFile,
         libraries,
         codegenConfigKey,
         dependency,
-        codegenConfigFileDir,
+        path.dirname(configFilePath),
       );
+    } catch (_) {
+      // ignore
     }
   });
 }

package/scripts/react_native_pods.rb

@@ -313,6 +313,7 @@ def react_native_post_install(
   ReactNativePodsUtils.apply_flags_for_fabric(installer, fabric_enabled: fabric_enabled)
   ReactNativePodsUtils.apply_xcode_15_patch(installer)
   ReactNativePodsUtils.updateOSDeploymentTarget(installer)
+  ReactNativePodsUtils.fix_flipper_for_xcode_15_3(installer)
 
   NewArchitectureHelper.set_clang_cxx_language_standard_if_needed(installer)
   NewArchitectureHelper.modify_flags_for_new_architecture(installer, NewArchitectureHelper.new_arch_enabled)

package/scripts/xcode/with-environment.sh

@@ -13,7 +13,7 @@
 # ./with-environment.sh command
 
 # Start with a default
-NODE_BINARY=$(command -v node)
+NODE_BINARY=$(command -v node || echo "")
 export NODE_BINARY
 
 # Override the default with the global environment

package/sdks/.hermesversion

@@ -1 +1 @@
-hermes-2024-01-31-RNv0.73.3-398783c198253f61e0a5eb603f1eb7b55af6baa4
+hermes-2024-03-01-RNv0.73.5-5e3ba8a5ff73efc46f4570492176b0605de77ed6

package/sdks/hermes-engine/hermes-utils.rb

@@ -7,6 +7,7 @@ require 'net/http'
 require 'rexml/document'
 
 HERMES_GITHUB_URL = "https://github.com/facebook/hermes.git"
+ENV_BUILD_FROM_SOURCE = "RCT_BUILD_HERMES_FROM_SOURCE"
 
 module HermesEngineSourceType
     LOCAL_PREBUILT_TARBALL = :local_prebuilt_tarball
@@ -30,7 +31,7 @@ end
 # - To use a specific tarball, install the dependencies with:
 # `HERMES_ENGINE_TARBALL_PATH=<path_to_tarball> bundle exec pod install`
 # - To force a build from source, install the dependencies with:
-# `BUILD_FROM_SOURCE=true bundle exec pod install`
+# `RCT_BUILD_HERMES_FROM_SOURCE=true bundle exec pod install`
 # If none of the two are provided, Cocoapods will check whether there is a tarball for the current version
 # (either release or nightly). If not, it will fall back to building from source (the latest commit on main).
 #
@@ -85,11 +86,11 @@ def hermes_commit_envvar_defined()
 end
 
 def force_build_from_tag(react_native_path)
-    return ENV['BUILD_FROM_SOURCE'] === 'true' && File.exist?(hermestag_file(react_native_path))
+    return ENV[ENV_BUILD_FROM_SOURCE] === 'true' && File.exist?(hermestag_file(react_native_path))
 end
 
 def force_build_from_main(react_native_path)
-    return ENV['BUILD_FROM_SOURCE'] === 'true' && !File.exist?(hermestag_file(react_native_path))
+    return ENV[ENV_BUILD_FROM_SOURCE] === 'true' && !File.exist?(hermestag_file(react_native_path))
 end
 
 def release_artifact_exists(version)

package/template/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "expo": "^50.0.2",
     "react": "18.2.0",
-    "react-native": "npm:react-native-tvos@0.73.4-0rc1"
+    "react-native": "npm:react-native-tvos@0.73.6-1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",