react-native-tvos 0.76.1-0 → 0.76.2-0

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -110,6 +110,18 @@ const bubblingEventTypes = {
       bubbled: 'onClick',
     },
   },
+  topFocus: {
+    phasedRegistrationNames: {
+      captured: 'onFocusCapture',
+      bubbled: 'onFocus',
+    },
+  },
+  topBlur: {
+    phasedRegistrationNames: {
+      captured: 'onBlurCapture',
+      bubbled: 'onBlur',
+    },
+  },
 };
 
 const directEventTypes = {
@@ -123,6 +135,13 @@ const directEventTypes = {
     registrationName: 'onGestureHandlerStateChange',
   }),
 
+  topPressIn: {
+    registrationName: 'onPressIn',
+  },
+  topPressOut: {
+    registrationName: 'onPressOut',
+  },
+
   // Direct events from UIManagerModuleConstants.java
   topContentSizeChange: {
     registrationName: 'onContentSizeChange',

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -181,6 +181,12 @@ const directEventTypes = {
   onGestureHandlerStateChange: DynamicallyInjectedByGestureHandler({
     registrationName: 'onGestureHandlerStateChange',
   }),
+  topPressIn: {
+    registrationName: 'onPressIn',
+  },
+  topPressOut: {
+    registrationName: 'onPressOut',
+  },
 };
 
 const validAttributesForNonEventProps = {

package/Libraries/NativeComponent/TVViewConfig.js

@@ -16,6 +16,10 @@ export const validAttributesForTVProps = {
   nextFocusLeft: true,
   nextFocusRight: true,
   nextFocusUp: true,
+  onFocus: true,
+  onBlur: true,
+  onPressIn: true,
+  onPressOut: true,
   trapFocusLeft: true,
   trapFocusRight: true,
   trapFocusDown: true,

package/Libraries/Pressability/Pressability.js

@@ -157,7 +157,8 @@ export type EventHandlers = $ReadOnly<{|
   onResponderTerminate: (event: PressEvent) => void,
   onResponderTerminationRequest: () => boolean,
   onStartShouldSetResponder: () => boolean,
-  onTVEvent: (event: any) => void,
+  onPressIn: (event: any) => void,
+  onPressOut: (event: any) => void,
 |}>;
 
 type TouchState =
@@ -397,6 +398,7 @@ export default class Pressability {
   |}>;
   _touchActivateTime: ?number;
   _touchState: TouchState = 'NOT_RESPONDER';
+  _longPressSent: boolean = false;
 
   constructor(config: PressabilityConfig) {
     this.configure(config);
@@ -436,35 +438,50 @@ export default class Pressability {
   }
 
   _createEventHandlers(): EventHandlers {
-    const tvEventHandlers = {
-      onTVEvent: (evt: any): void => {
-        if (this._config.disabled !== false) {
-          // $FlowFixMe[prop-missing]
-          if (evt?.eventType === 'focus') {
-            const {onFocus} = this._config;
-            onFocus && onFocus(evt);
-            // $FlowFixMe[prop-missing]
-          } else if (evt.eventType === 'blur') {
-            const {onBlur} = this._config;
-            onBlur && onBlur(evt);
-          } else if (evt.eventType === 'select') {
-            const {onPress, onPressIn, onPressOut} = this._config;
-            // $FlowFixMe[incompatible-exact]
-            onPressIn && onPressIn(evt);
-            onPress && onPress(evt);
-            setTimeout(() => {
-              onPressOut && onPressOut(evt);
-            }, this._config.minPressDuration ?? DEFAULT_MIN_PRESS_DURATION);
-          } else if (evt.eventType === 'longSelect') {
-            const {onLongPress, onPressIn, onPressOut} = this._config;
-            onLongPress && onLongPress(evt);
-            evt?.eventKeyAction === 0
-              ? onPressIn && onPressIn(evt)
-              : onPressOut && onPressOut(evt);
+    const tvPressEventHandlers = {
+      onPressIn: (evt: any): void => {
+        if (this._config.disabled === false) {
+          return;
+        }
+
+        this._longPressSent = false;
+
+        const {onPressIn, onLongPress} = this._config;
+        onPressIn && onPressIn(evt);
+
+        const delayPressIn = normalizeDelay(this._config.delayPressIn);
+        const delayLongPress = normalizeDelay(
+          this._config.delayLongPress,
+          10,
+          DEFAULT_LONG_PRESS_DELAY_MS - delayPressIn,
+        );
+        this._longPressDelayTimeout = setTimeout(() => {
+          onLongPress && onLongPress(evt);
+          this._longPressSent = true;
+        }, delayLongPress + delayPressIn);
+      },
+      onPressOut: (evt: any): void => {
+        if (this._config.disabled === false) {
+          return;
+        }
+        this._cancelLongPressDelayTimeout();
+        const {onPress, onLongPress, onPressOut, android_disableSound} =
+          this._config;
+        onPressOut && onPressOut(evt);
+
+        if (onPress != null) {
+          const isPressCanceledByLongPress =
+            onLongPress != null && this._longPressSent;
+          if (!isPressCanceledByLongPress) {
+            if (Platform.OS === 'android' && android_disableSound !== true) {
+              SoundManager.playTouchSound();
+            }
+            onPress(evt);
           }
         }
       },
     };
+
     const focusEventHandlers = {
       onBlur: (event: BlurEvent): void => {
         const {onBlur} = this._config;
@@ -645,7 +662,7 @@ export default class Pressability {
         };
       }
       return {
-        ...tvEventHandlers,
+        ...tvPressEventHandlers,
         ...focusEventHandlers,
         ...responderEventHandlers,
         ...hoverPointerEvents,
@@ -698,7 +715,7 @@ export default class Pressability {
               },
             };
       return {
-        ...tvEventHandlers,
+        ...tvPressEventHandlers,
         ...focusEventHandlers,
         ...responderEventHandlers,
         ...mouseEventHandlers,

package/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h

@@ -35,6 +35,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign, readonly) CGFloat zoomScale;
 @property (nonatomic, assign, readonly) CGPoint contentOffset;
 @property (nonatomic, assign, readonly) UIEdgeInsets contentInset;
+@property (nullable, nonatomic, copy) NSDictionary<NSAttributedStringKey, id> *typingAttributes;
 
 // This protocol disallows direct access to `selectedTextRange` property because
 // unwise usage of it can break the `delegate` behavior. So, we always have to

package/Libraries/Types/CoreEventTypes.d.ts

@@ -246,6 +246,15 @@ export interface GestureResponderEvent
 
 export interface MouseEvent extends NativeSyntheticEvent<NativeMouseEvent> {}
 
+export interface NativeFocusEvent extends TargetedEvent {}
+export interface FocusEvent extends NativeSyntheticEvent<NativeFocusEvent> {}
+
+export interface NativeBlurEvent extends TargetedEvent {}
+export interface BlurEvent extends NativeSyntheticEvent<NativeBlurEvent> {}
+
+export interface NativePressEvent extends TargetedEvent {}
+export interface PressEvent extends NativeSyntheticEvent<NativePressEvent> {}
+
 export interface TargetedEvent {
   target: number;
 }
@@ -265,6 +274,18 @@ export interface PointerEvents {
   onPointerUpCapture?: ((event: PointerEvent) => void) | undefined;
 }
 
+export interface PressEvents {
+  onPressIn?: ((event: PressEvent) => void) | undefined;
+  onPressOut?: ((event: PressEvent) => void) | undefined;
+}
+
+export interface FocusEvents {
+  onFocus?: ((event: FocusEvent) => void) | undefined;
+  onFocusCapture?: ((event: FocusEvent) => void) | undefined;
+  onBlur?: ((event: BlurEvent) => void) | undefined;
+  onBlurCapture?: ((event: BlurEvent) => void) | undefined;
+}
+
 export interface TVRemoteEvent {
   tag?: number | undefined;
   target?: number | undefined;

package/Libraries/Types/CoreEventTypes.js

@@ -282,6 +282,12 @@ export type FocusEvent = SyntheticEvent<
   |}>,
 >;
 
+export type RemotePressEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+  |}>,
+>;
+
 export type MouseEvent = SyntheticEvent<
   $ReadOnly<{|
     clientX: number,

package/README.md

@@ -176,19 +176,21 @@ var running_on_apple_tv = Platform.isTVOS;
 
 - _Common codebase for Android phone and Android TV_: Apps built for Android using this repo will run on both Android phone and Android TV. Most of the changes for TV are specific to handling focus-based navigation on a TV using the D-Pad on the remote control.
 
-- _Access to touchable controls_:  The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight` and `TouchableOpacity` will "just work" on both Apple TV and Android TV. In particular:
+- _Pressable and Touchable controls_:  In RNTV 0.76.1-1 and later, TV controls are supported with fully native events.
+Code has been added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `Pressable`, `TouchableHighlight` and `TouchableOpacity` will "just work" on both Apple TV and Android TV. In particular:
 
   - `onFocus()` will be executed when the touchable view goes into focus
   - `onBlur()` will be executed when the touchable view goes out of focus
   - `onPress()` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote (center button on Apple TV remote, or center button on Android TV DPad).
-  - `onLongPress()` will be executed twice if the "select" button is held down for a length of time. The two events passed into `onLongPress()` will have different values for their `eventKeyAction` property, 0 for key down (start) and 1 for key up (end).
+  - `onPressIn()` will be executed when the TV remote "select" button is pressed down (center button on Apple TV remote, or center button on Android TV DPad)
+  - `onPressOut()` will be executed when the TV remote "select" button is released
+  - `onLongPress()` will be executed if the "select" button is held down for a length of time (this event is generated in the `Pressability` module, the same as for touchscreen long press events).
 
-- _Pressable controls_: The `Pressable` API works with TV.  Additional `onFocus` and `onBlur` props are provided to allow you to customize behavior when a Pressable enters or leaves focus. Similar to the `pressed` state that is true while a user is pressing the component on a touchscreen, the `focused` state will be true when it is focused on TV.  `PressableExample` in RNTester has been modified appropriately. The `onPress()` and `onLongPress()` methods work the same way as with `Touchable` components.
+  `TouchableNativeFeedback` and `TouchableWithoutFeedback` respond to press events, but do not respond to focus and blur events, and are not recommended for TV.
 
-- _Tailwind styles for Pressable controls_: For the 0.76 release, the `Pressable` component also generates the `onPressIn()` and `onPressOut()` events needed to support the [`active:` pseudo class for Tailwind styles](https://www.nativewind.dev/v4/core-concepts/states#hover-focus-and-active-).
-  - For `onPress()` events (the "select" button on the remote is pressed once), `onPressIn()` is generated, then `onPressOut()` is generated a short time later.
-  - For `onLongPress()` events (the "select" button on the remote is held down for a length of time), `onPressIn()` is generated once the press down is detected, and `onPressOut()` is generated when the button is released.
-  - The `focus:` pseudo class is also supported via the `onFocus()` and `onBlur()` events.
+Because focus and blur events are now fully native core events, they will respond correctly to capturing and bubbling event handlers in `View` components. A demo of this has been added to the TVEventHandlerExample in RNTester.
+
+- _Tailwind styles for Pressable and Touchable controls_: The above events allow RNTV to support the [`focus:` and `active:` pseudo classes for Tailwind styles](https://www.nativewind.dev/v4/core-concepts/states#hover-focus-and-active-).
 
 - _TV remote/keyboard input_: Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events.  For a more convenient API, we provide `useTVEventHandler`.
 

package/React/Base/RCTTVRemoteHandler.m

@@ -119,11 +119,6 @@ static __volatile BOOL __gestureHandlersCancelTouches = YES;
                                   pressType:UIPressTypePlayPause
                                        name:RCTTVRemoteEventPlayPause];
 
-  // Select
-  [self addTapGestureRecognizerWithSelector:@selector(selectPressed:)
-                                  pressType:UIPressTypeSelect
-                                       name:RCTTVRemoteEventSelect];
-    
   // Page Up/Down
   if (@available(tvOS 14.3, *)) {
       [self addTapGestureRecognizerWithSelector:@selector(tappedPageUp:)
@@ -162,10 +157,6 @@ static __volatile BOOL __gestureHandlersCancelTouches = YES;
                                         pressType:UIPressTypePlayPause
                                              name:RCTTVRemoteEventLongPlayPause];
 
-  [self addLongPressGestureRecognizerWithSelector:@selector(longSelectPressed:)
-                                        pressType:UIPressTypeSelect
-                                             name:RCTTVRemoteEventLongSelect];
-
   [self addLongPressGestureRecognizerWithSelector:@selector(longUpPressed:)
                                         pressType:UIPressTypeUpArrow
                                              name:RCTTVRemoteEventLongUp];
@@ -355,11 +346,6 @@ static __volatile BOOL __gestureHandlersCancelTouches = YES;
     [[NSNotificationCenter defaultCenter] postNavigationPressEventWithType:RCTTVRemoteEventMenu keyAction:r.eventKeyAction tag:nil target:nil];
 }
 
-- (void)selectPressed:(UIGestureRecognizer *)r
-{
-    [[NSNotificationCenter defaultCenter] postNavigationPressEventWithType:RCTTVRemoteEventSelect keyAction:r.eventKeyAction tag:nil target:nil];
-}
-
 - (void)longPlayPausePressed:(UIGestureRecognizer *)r
 {
     [[NSNotificationCenter defaultCenter] postNavigationPressEventWithType:RCTTVRemoteEventLongPlayPause keyAction:r.eventKeyAction tag:nil target:nil];
@@ -370,11 +356,6 @@ static __volatile BOOL __gestureHandlersCancelTouches = YES;
 #endif
 }
 
-- (void)longSelectPressed:(UIGestureRecognizer *)r
-{
-    [[NSNotificationCenter defaultCenter] postNavigationPressEventWithType:RCTTVRemoteEventLongSelect keyAction:r.eventKeyAction tag:nil target:nil];
-}
-
 - (void)longUpPressed:(UIGestureRecognizer *)r
 {
     [[NSNotificationCenter defaultCenter] postNavigationPressEventWithType:RCTTVRemoteEventLongUp keyAction:r.eventKeyAction tag:nil target:nil];

package/React/Base/RCTTVRemoteSelectHandler.h

@@ -0,0 +1,27 @@
+#import <UIKit/UIKit.h>
+#import <Foundation/Foundation.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@protocol RCTTVRemoteSelectHandlerDelegate <NSObject>
+
+- (void)animatePressIn;
+- (void)animatePressOut;
+
+- (void)emitPressInEvent;
+- (void)emitPressOutEvent;
+
+- (void)sendSelectNotification;
+- (void)sendLongSelectBeganNotification;
+- (void)sendLongSelectEndedNotification;
+
+@end
+
+@interface RCTTVRemoteSelectHandler : NSObject <UIGestureRecognizerDelegate>
+
+- (instancetype _Nonnull )initWithView:(UIView<RCTTVRemoteSelectHandlerDelegate> * _Nonnull)view;
+- (instancetype _Nonnull )init __attribute__((unavailable("init not available, use initWithView:")));
+
+@end
+
+NS_ASSUME_NONNULL_END

package/React/Base/RCTTVRemoteSelectHandler.m

@@ -0,0 +1,120 @@
+#import "RCTTVRemoteSelectHandler.h"
+
+@interface RCTTVRemoteSelectHandler()
+
+@property (nonatomic, strong) UILongPressGestureRecognizer * pressRecognizer;
+@property (nonatomic, strong) UILongPressGestureRecognizer * longPressRecognizer;
+
+@property (nonatomic, weak) UIView<RCTTVRemoteSelectHandlerDelegate> *view;
+
+@end
+
+@implementation RCTTVRemoteSelectHandler {
+  NSMutableDictionary<NSString *, UIGestureRecognizer *> *_tvRemoteGestureRecognizers;
+}
+
+#pragma mark -
+#pragma mark Public methods
+
+- (instancetype)initWithView:(UIView <RCTTVRemoteSelectHandlerDelegate> *)view
+{
+  if ((self = [super init])) {
+      _view = view;
+      [self attachToView];
+  }
+  return self;
+}
+
+- (void)dealloc
+{
+  [self detachFromView];
+  _view = nil;
+}
+
+#pragma mark -
+#pragma UIGestureRecognizerDelegate method
+
+// Press recognizer should allow long press recognizer to work (but not the reverse)
+- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
+  return gestureRecognizer == _pressRecognizer;
+}
+
+#pragma mark -
+#pragma mark Private methods
+
+- (void)attachToView {
+  UILongPressGestureRecognizer *pressRecognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handlePress:)];
+  pressRecognizer.allowedPressTypes = @[ @(UIPressTypeSelect) ];
+  pressRecognizer.minimumPressDuration = 0.0;
+  pressRecognizer.delegate = self; // Press recognizer allows other recognizers to run
+
+  [self.view addGestureRecognizer:pressRecognizer];
+  self.pressRecognizer = pressRecognizer;
+
+  UILongPressGestureRecognizer *longPressRecognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];
+  longPressRecognizer.allowedPressTypes = @[ @(UIPressTypeSelect) ];
+  longPressRecognizer.minimumPressDuration = 0.5;
+
+  [self.view addGestureRecognizer:longPressRecognizer];
+  self.longPressRecognizer = longPressRecognizer;
+}
+
+- (void)detachFromView {
+  if (_pressRecognizer) {
+    [self.view removeGestureRecognizer:_pressRecognizer];
+    self.pressRecognizer = nil;
+  }
+  if (_longPressRecognizer) {
+    [self.view removeGestureRecognizer:_longPressRecognizer];
+    self.longPressRecognizer = nil;
+  }
+}
+
+- (void)handlePress:(UIGestureRecognizer *)r
+{
+  switch (r.state) {
+    case UIGestureRecognizerStateBegan:
+      [self.view emitPressInEvent];
+      [self.view animatePressIn];
+      break;
+    case UIGestureRecognizerStateCancelled:
+    case UIGestureRecognizerStateEnded:
+      if (r.enabled) {
+        [self.view animatePressOut];
+        [self.view emitPressOutEvent];
+        [self.view sendSelectNotification];
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+/*
+ When a long press starts, the press recognizer has already started
+ and called selectGestureBegan(). We disable the press recognizer
+ when the long press starts. At the end of the gesture, we execute the
+ code for pressOut (since the press recognizer cannot), and then reenable
+ the press recgonizer. This guarantees
+ only one pressIn and one pressOut, and only longSelect notifications.
+ */
+- (void)handleLongPress:(UIGestureRecognizer *)r
+{
+  switch (r.state) {
+    case UIGestureRecognizerStateBegan:
+      self.pressRecognizer.enabled = NO;
+      [self.view sendLongSelectBeganNotification];
+      break;
+    case UIGestureRecognizerStateEnded:
+    case UIGestureRecognizerStateCancelled:
+      [self.view animatePressOut];
+      [self.view emitPressOutEvent];
+      [self.view sendLongSelectEndedNotification];
+      self.pressRecognizer.enabled = YES;
+      break;
+    default:
+      break;
+  }
+}
+
+@end

package/React/Base/RCTVersion.m

@@ -23,7 +23,7 @@ NSDictionary* RCTGetReactNativeVersion(void)
     __rnVersion = @{
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(76),
-                  RCTVersionPatch: @(1),
+                  RCTVersionPatch: @(2),
                   RCTVersionPrerelease: @"0",
                   };
   });

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

@@ -27,6 +27,7 @@
 #if TARGET_OS_TV
 #import <React/RCTTVRemoteHandler.h>
 #import <React/RCTTVNavigationEventNotification.h>
+#import "React/RCTI18nUtil.h"
 #endif
 
 using namespace facebook::react;
@@ -1100,22 +1101,25 @@ static inline UIViewAnimationOptions animationOptionsWithCurve(UIViewAnimationCu
 
 - (BOOL)shouldUpdateFocusInContext:(UIFocusUpdateContext *)context
 {
+    // Determine if the layout is Right-to-Left
+    BOOL isRTL = [[RCTI18nUtil sharedInstance] isRTL];
     BOOL isHorizontal = _scrollView.contentSize.width > self.frame.size.width;
-    // Keep focus inside the scroll view till the end of the content
+    // Adjust for horizontal scrolling with RTL support
     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)
-        ) {
+        BOOL isNavigatingToEnd = (isRTL ? context.focusHeading == UIFocusHeadingLeft : context.focusHeading == UIFocusHeadingRight);
+        BOOL isNavigatingToStart = (isRTL ? context.focusHeading == UIFocusHeadingRight : context.focusHeading == UIFocusHeadingLeft);
+
+        if ((isNavigatingToEnd && self.scrollView.contentOffset.x < self.scrollView.contentSize.width - self.scrollView.visibleSize.width) ||
+            (isNavigatingToStart && self.scrollView.contentOffset.x > 0)) {
             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)
-        ) {
+        // Handle vertical scrolling as before
+        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];
 }
 

package/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

@@ -61,6 +61,13 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
    */
   BOOL _comingFromJS;
   BOOL _didMoveToWindow;
+
+  /*
+   * Newly initialized default typing attributes contain a no-op NSParagraphStyle and NSShadow. These cause inequality
+   * between the AttributedString backing the input and those generated from state. We store these attributes to make
+   * later comparison insensitive to them.
+   */
+  NSDictionary<NSAttributedStringKey, id> *_originalTypingAttributes;
 }
 
 #pragma mark - UIView overrides
@@ -76,6 +83,7 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
     _ignoreNextTextInputCall = NO;
     _comingFromJS = NO;
     _didMoveToWindow = NO;
+    _originalTypingAttributes = [_backedTextInputView.typingAttributes copy];
 
     [self addSubview:_backedTextInputView];
     [self initializeReturnKeyType];
@@ -84,6 +92,20 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
   return self;
 }
 
+- (void)updateEventEmitter:(const EventEmitter::Shared &)eventEmitter
+{
+  [super updateEventEmitter:eventEmitter];
+
+  NSMutableDictionary<NSAttributedStringKey, id> *defaultAttributes =
+      [_backedTextInputView.defaultTextAttributes mutableCopy];
+
+  RCTWeakEventEmitterWrapper *eventEmitterWrapper = [RCTWeakEventEmitterWrapper new];
+  eventEmitterWrapper.eventEmitter = _eventEmitter;
+  defaultAttributes[RCTAttributedStringEventEmitterKey] = eventEmitterWrapper;
+
+  _backedTextInputView.defaultTextAttributes = defaultAttributes;
+}
+
 - (void)didMoveToWindow
 {
   [super didMoveToWindow];
@@ -236,8 +258,11 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
   }
 
   if (newTextInputProps.textAttributes != oldTextInputProps.textAttributes) {
-    _backedTextInputView.defaultTextAttributes =
+    NSMutableDictionary<NSAttributedStringKey, id> *defaultAttributes =
         RCTNSTextAttributesFromTextAttributes(newTextInputProps.getEffectiveTextAttributes(RCTFontSizeMultiplier()));
+    defaultAttributes[RCTAttributedStringEventEmitterKey] =
+        _backedTextInputView.defaultTextAttributes[RCTAttributedStringEventEmitterKey];
+    _backedTextInputView.defaultTextAttributes = defaultAttributes;
   }
 
   if (newTextInputProps.selectionColor != oldTextInputProps.selectionColor) {
@@ -418,6 +443,7 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
 
 - (void)textInputDidChangeSelection
 {
+  [self _updateTypingAttributes];
   if (_comingFromJS) {
     return;
   }
@@ -680,9 +706,26 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
     [_backedTextInputView scrollRangeToVisible:NSMakeRange(offsetStart, 0)];
   }
   [self _restoreTextSelection];
+  [self _updateTypingAttributes];
   _lastStringStateWasUpdatedWith = attributedString;
 }
 
+// Ensure that newly typed text will inherit any custom attributes. We follow the logic of RN Android, where attributes
+// to the left of the cursor are copied into new text, unless we are at the start of the field, in which case we will
+// copy the attributes from text to the right. This allows consistency between backed input and new AttributedText
+// https://github.com/facebook/react-native/blob/3102a58df38d96f3dacef0530e4dbb399037fcd2/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/SetSpanOperation.kt#L30
+- (void)_updateTypingAttributes
+{
+  if (_backedTextInputView.attributedText.length > 0) {
+    NSUInteger offsetStart = [_backedTextInputView offsetFromPosition:_backedTextInputView.beginningOfDocument
+                                                           toPosition:_backedTextInputView.selectedTextRange.start];
+
+    NSUInteger samplePoint = offsetStart == 0 ? 0 : offsetStart - 1;
+    _backedTextInputView.typingAttributes = [_backedTextInputView.attributedText attributesAtIndex:samplePoint
+                                                                                    effectiveRange:NULL];
+  }
+}
+
 - (void)_setMultiline:(BOOL)multiline
 {
   [_backedTextInputView removeFromSuperview];
@@ -738,9 +781,10 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
       _backedTextInputView.markedTextRange || _backedTextInputView.isSecureTextEntry || fontHasBeenUpdatedBySystem;
 
   if (shouldFallbackToBareTextComparison) {
-    return ([newText.string isEqualToString:oldText.string]);
+    return [newText.string isEqualToString:oldText.string];
   } else {
-    return ([newText isEqualToAttributedString:oldText]);
+    return RCTIsAttributedStringEffectivelySame(
+        newText, oldText, _originalTypingAttributes, static_cast<const TextInputProps &>(*_props).textAttributes);
   }
 }
 

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

@@ -11,6 +11,9 @@
 #import <React/RCTConstants.h>
 #import <React/RCTTouchableComponentViewProtocol.h>
 #import <React/UIView+ComponentViewProtocol.h>
+#if TARGET_OS_TV
+#import <React/RCTTVRemoteSelectHandler.h>
+#endif
 #import <react/renderer/components/view/ViewEventEmitter.h>
 #import <react/renderer/components/view/ViewProps.h>
 #import <react/renderer/core/EventEmitter.h>
@@ -25,7 +28,11 @@ NS_ASSUME_NONNULL_BEGIN
 /**
  * UIView class for <View> component.
  */
+#if TARGET_OS_TV
+@interface RCTViewComponentView : UIView <RCTComponentViewProtocol, RCTTouchableComponentViewProtocol, RCTTVRemoteSelectHandlerDelegate> {
+#else
 @interface RCTViewComponentView : UIView <RCTComponentViewProtocol, RCTTouchableComponentViewProtocol> {
+#endif
  @protected
   facebook::react::LayoutMetrics _layoutMetrics;
   facebook::react::SharedViewProps _props;
@@ -72,6 +79,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, nullable) UIFocusGuide *focusGuideDown;
 @property(nonatomic, nullable) UIFocusGuide *focusGuideLeft;
 @property(nonatomic, nullable) UIFocusGuide *focusGuideRight;
+@property(nonatomic, nullable, strong) RCTTVRemoteSelectHandler *tvRemoteSelectHandler;
 #endif
 
 /**