Merge remote-tracking branch 'upstream/main' into fix/ios-textinput-ime-composition

Author: kdwkr

packages/react-native/Libraries/Animated/__tests__/AnimatedBackendSuspense-itest.js

@@ -12,8 +12,10 @@ import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {ImageProps} from './ImageProps';
+import type {ImageSourceHeaders} from './ImageSourceUtils';
 import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
@@ -194,37 +196,55 @@ let BaseImage: AbstractImageAndroid = ({
     );
   }
 
-  const nativeProps = restProps as {
-    ...React.PropsOf<ImageViewNativeComponent>,
-  };
-
+  let style_: ImageStyleProp;
+  let sources_;
+  let headers_: ?ImageSourceHeaders;
   if (Array.isArray(source_)) {
     const {
       headers: sourceHeaders,
       width: sourceWidth,
       height: sourceHeight,
     } = source_[0];
-    if (sourceHeaders != null) {
-      nativeProps.headers = sourceHeaders;
-    }
+    headers_ = sourceHeaders;
     // Default to the first source's width and height if only one is provided
-    nativeProps.style = [
-      source_.length === 1 && {width: sourceWidth, height: sourceHeight},
-      styles.base,
-      style,
-    ];
-    nativeProps.source = source_;
+    if (ReactNativeFeatureFlags.fixImageSrcDimensionPropagation()) {
+      style_ = [
+        source_.length === 1 && {width: sourceWidth, height: sourceHeight},
+        styles.base,
+        style,
+      ];
+    } else {
+      style_ = [styles.base, style];
+    }
+    sources_ = source_;
   } else {
     const {uri, width: sourceWidth, height: sourceHeight} = source_;
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
-    nativeProps.style = [
+    style_ = [
       {width: sourceWidth ?? width, height: sourceHeight ?? height},
       styles.base,
       style,
     ];
-    nativeProps.source = [source_];
+    sources_ = [source_];
+  }
+
+  const nativeProps = restProps as {
+    ...React.PropsOf<ImageViewNativeComponent>,
+  };
+
+  // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
+  // (for historical reasons). So in the latter case we populate both "src" and "source",
+  // in order to have a better alignment between platforms in the future.
+  // TODO: `src` should be eventually removed from the API on Android.
+  nativeProps.src = sources_;
+  nativeProps.source = sources_;
+
+  nativeProps.style = style_;
+
+  if (headers_ != null) {
+    nativeProps.headers = headers_;
   }
 
   if (onLoadStart != null) {

packages/react-native/Libraries/Image/Image.android.js

@@ -5,13 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
+ * @fantom_flags fixImageSrcDimensionPropagation:*
  * @format
  */
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import type {AccessibilityProps, HostInstance} from 'react-native';
 
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {createRef} from 'react';
@@ -475,14 +477,23 @@ describe('<Image>', () => {
             .getRenderedOutput({props: ['source', 'width', 'height']})
             .toJSX(),
         ).toEqual(
-          <rn-image
-            source-scale="1"
-            source-type="remote"
-            source-size="{40, 40}"
-            source-uri="https://reactnative.dev/img/tiny_logo.png"
-            width="40"
-            height="40"
-          />,
+          ReactNativeFeatureFlags.fixImageSrcDimensionPropagation() ? (
+            <rn-image
+              source-scale="1"
+              source-type="remote"
+              source-size="{40, 40}"
+              source-uri="https://reactnative.dev/img/tiny_logo.png"
+              width="40"
+              height="40"
+            />
+          ) : (
+            <rn-image
+              source-scale="1"
+              source-type="remote"
+              source-size="{40, 40}"
+              source-uri="https://reactnative.dev/img/tiny_logo.png"
+            />
+          ),
         );
       });
     });

packages/react-native/Libraries/Image/__tests__/Image-itest.js

@@ -372,6 +372,8 @@ const validAttributesForNonEventProps = {
 
   direction: true,
 
+  focusable: true,
+
   style: ReactNativeStyleAttributes,
 } as const;
 

packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import type {HostInstance} from 'react-native';
+
+import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance';
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {createRef, startTransition, useDeferredValue, useState} from 'react';
+import {View} from 'react-native';
+import {NativeEventCategory} from 'react-native/src/private/testing/fantom/specs/NativeFantom';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
+
+function ensureReactNativeElement(value: unknown): ReactNativeElement {
+  return ensureInstance(value, ReactNativeElement);
+}
+
+describe('stale event handlers from interrupted render', () => {
+  // This test demonstrates a bug where canonical.currentProps (which stores
+  // event handlers) is updated during completeWork (render phase), not during
+  // commit. Since the canonical object is shared between the committed fiber
+  // and work-in-progress fiber, this is an eager mutation. During concurrent
+  // rendering, if a render is interrupted after a component's completeWork has
+  // run but before commit, events dispatched at that point read stale
+  // (never-committed) handlers instead of the last committed ones.
+  //
+  // The test uses sibling rendering order to exploit this:
+  // 1. First sibling: a View with an onPointerUp handler that captures
+  //    deferredLabel. Its completeWork runs first, eagerly updating
+  //    canonical.currentProps with the in-progress handler.
+  // 2. Second sibling: InterruptTrigger, which dispatches a discrete event on
+  //    the View during render. By this point, the View's completeWork has
+  //    already updated canonical.currentProps with the new (uncommitted) handler.
+  it('calls stale handler from discarded render instead of committed handler', () => {
+    const root = Fantom.createRoot();
+    const viewRef = createRef<HostInstance>();
+    const handlerCallLog: Array<string> = [];
+    let shouldDispatchDuringRender = false;
+
+    function App({label}: {label: string}) {
+      const deferredLabel = useDeferredValue(label);
+      const [, setInterrupt] = useState(false);
+
+      return (
+        <>
+          <View
+            ref={viewRef}
+            onPointerUp={() => {
+              handlerCallLog.push(deferredLabel);
+              // Trigger a high-priority update to interrupt the deferred render.
+              setInterrupt(prev => !prev);
+            }}
+          />
+          <InterruptTrigger label={label} deferredLabel={deferredLabel} />
+        </>
+      );
+    }
+
+    // This component dispatches a discrete native event during render when
+    // we're in the deferred re-render (deferredLabel has caught up to label).
+    // By the time this component renders, the View sibling's completeWork has
+    // already eagerly updated canonical.currentProps with the in-progress
+    // (not-yet-committed) handler.
+    function InterruptTrigger({
+      label,
+      deferredLabel,
+    }: {
+      label: string,
+      deferredLabel: string,
+    }) {
+      if (shouldDispatchDuringRender && deferredLabel === label) {
+        shouldDispatchDuringRender = false;
+        const element = ensureReactNativeElement(viewRef.current);
+        Fantom.dispatchNativeEvent(
+          element,
+          'onPointerUp',
+          {x: 0, y: 0},
+          {
+            category: NativeEventCategory.Discrete,
+          },
+        );
+      }
+      return null;
+    }
+
+    // Initial render: commits handler capturing deferredLabel="initial".
+    Fantom.runTask(() => {
+      root.render(<App label="initial" />);
+    });
+
+    shouldDispatchDuringRender = true;
+
+    // startTransition triggers:
+    // 1. First transition render: useDeferredValue("transition") returns
+    //    "initial" (deferred) → commits, handler still captures "initial".
+    // 2. Deferred re-render: useDeferredValue("transition") returns
+    //    "transition" → View's completeWork eagerly updates
+    //    canonical.currentProps with handler capturing "transition" →
+    //    InterruptTrigger renders and dispatches discrete event →
+    //    The stale (uncommitted) handler is called, logging "transition" →
+    //    setState in the handler interrupts and discards the deferred render.
+    Fantom.runTask(() => {
+      startTransition(() => {
+        root.render(<App label="transition" />);
+      });
+    });
+
+    // CORRECT behavior: the last committed handler (capturing "initial")
+    // should be called, because the deferred render hasn't committed yet.
+    // expect(handlerCallLog).toEqual(['initial']);
+
+    // ACTUAL (buggy) behavior: the stale handler from the interrupted
+    // (discarded) render is called because canonical.currentProps is eagerly
+    // updated during completeWork (render phase), before the commit.
+    expect(handlerCallLog).toEqual(['transition']);
+  });
+});

packages/react-native/Libraries/ReactNative/__tests__/StaleEventHandlersFromInterruptedRender-itest.js

@@ -39,6 +39,11 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) NSTimeInterval loadingViewFadeDuration;
 @property (nonatomic, assign) CGSize minimumSize;
 
+#if TARGET_OS_TV
+@property (nonatomic, copy, nullable) NSArray<id<UIFocusEnvironment>> *reactPreferredFocusEnvironments;
+@property (nonatomic, weak, nullable) UIView *reactPreferredFocusedView;
+#endif
+
 - (instancetype)init NS_UNAVAILABLE;
 + (instancetype)new NS_UNAVAILABLE;
 - (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;

packages/react-native/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingProxyRootView.h

@@ -121,6 +121,13 @@ - (void)surface:(RCTSurface *)surface didChangeStage:(RCTSurfaceStage)stage
   [super surface:surface didChangeStage:stage];
   if (RCTSurfaceStageIsRunning(stage)) {
     [_bridge.performanceLogger markStopForTag:RCTPLTTI];
+#if TARGET_OS_TV
+    dispatch_async(dispatch_get_main_queue(), ^{
+      self.reactPreferredFocusedView = nil;
+      [self setNeedsFocusUpdate];
+      [self updateFocusIfNeeded];
+    });
+#endif
   }
 }
 
@@ -154,4 +161,23 @@ - (void)cancelTouches
   // Not supported.
 }
 
+#if TARGET_OS_TV
+#pragma mark - UIFocusEnvironment
+
+- (NSArray<id<UIFocusEnvironment>> *)preferredFocusEnvironments
+{
+  if (self.reactPreferredFocusEnvironments != nil && self.reactPreferredFocusedView.window != nil) {
+    NSArray<id<UIFocusEnvironment>> *tempReactPreferredFocusEnvironments = self.reactPreferredFocusEnvironments;
+    self.reactPreferredFocusEnvironments = nil;
+    return tempReactPreferredFocusEnvironments;
+  }
+
+  if (self.reactPreferredFocusedView && self.reactPreferredFocusedView.window != nil) {
+    return @[ self.reactPreferredFocusedView ];
+  }
+
+  return [super preferredFocusEnvironments];
+}
+#endif
+
 @end