react-native-windows 0.82.0-preview.1 → 0.82.0-preview.11

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -18,7 +18,6 @@ import type {AnimatedNodeConfig} from './AnimatedNode';
 import type AnimatedTracking from './AnimatedTracking';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
-import InteractionManager from '../../Interaction/InteractionManager';
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
@@ -312,10 +311,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
    * See https://reactnative.dev/docs/animatedvalue#animate
    */
   animate(animation: Animation, callback: ?EndCallback): void {
-    let handle = null;
-    if (animation.__isInteraction) {
-      handle = InteractionManager.createInteractionHandle();
-    }
     const previousAnimation = this._animation;
     this._animation && this._animation.stop();
     this._animation = animation;
@@ -328,9 +323,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
       },
       result => {
         this._animation = null;
-        if (handle !== null) {
-          InteractionManager.clearInteractionHandle(handle);
-        }
         callback && callback(result);
       },
       previousAnimation,

package/Libraries/BatchedBridge/BatchedBridge.js

@@ -6,6 +6,7 @@
  *
  * @flow strict
  * @format
+ * @deprecated
  */
 
 'use strict';

package/Libraries/BatchedBridge/MessageQueue.js

@@ -6,6 +6,7 @@
  *
  * @flow strict
  * @format
+ * @deprecated
  */
 
 'use strict';

package/Libraries/Components/Switch/Switch.js

@@ -264,7 +264,7 @@ const Switch: component(
       disabled,
       onTintColor: trackColorForTrue,
       style: StyleSheet.compose(
-        {height: 31, width: 51},
+        {alignSelf: 'flex-start' as const},
         StyleSheet.compose(
           style,
           ios_backgroundColor == null

package/Libraries/Components/Switch/Switch.windows.js

@@ -272,7 +272,7 @@ const Switch: component(
       disabled,
       onTintColor: trackColorForTrue,
       style: StyleSheet.compose(
-        {height: 31, width: 51},
+        {height: 31, width: 51}, // #windows
         StyleSheet.compose(
           style,
           ios_backgroundColor == null

package/Libraries/Core/ReactNativeVersion.js

@@ -28,8 +28,8 @@
 export default class ReactNativeVersion {
   static major: number = 0;
   static minor: number = 82;
-  static patch: number = 0;
-  static prerelease: string | null = 'rc.0';
+  static patch: number = 1;
+  static prerelease: string | null = null;
 
   static getVersionString(): string {
     return `${this.major}.${this.minor}.${this.patch}${this.prerelease != null ? `-${this.prerelease}` : ''}`;

package/Libraries/Core/Timers/JSTimers.js

@@ -6,6 +6,7 @@
  *
  * @flow
  * @format
+ * @deprecated
  */
 
 import NativeTiming from './NativeTiming';

package/Libraries/Core/Timers/NativeTiming.js

@@ -6,6 +6,7 @@
  *
  * @flow strict
  * @format
+ * @deprecated
  */
 
 export * from '../../../src/private/specs_DEPRECATED/modules/NativeTiming';

package/Libraries/Core/Timers/immediateShim.js

@@ -6,6 +6,7 @@
  *
  * @flow
  * @format
+ * @deprecated
  */
 
 'use strict';

package/Libraries/Core/setUpPerformance.js

@@ -4,19 +4,17 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  */
 
+import setUpPerformanceModern from '../../src/private/setup/setUpPerformanceModern';
 import NativePerformance from '../../src/private/webapis/performance/specs/NativePerformance';
 
 // In case if the native implementation of the Performance API is available, use it,
 // otherwise fall back to the legacy/default one, which only defines 'Performance.now()'
 if (NativePerformance) {
-  const Performance =
-    require('../../src/private/webapis/performance/Performance').default;
-  // $FlowExpectedError[cannot-write]
-  global.performance = new Performance();
+  setUpPerformanceModern();
 } else {
   if (!global.performance) {
     // $FlowExpectedError[cannot-write]

package/Libraries/Interaction/PanResponder.js

@@ -12,7 +12,6 @@
 
 import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 
-const InteractionManager = require('./InteractionManager').default;
 const TouchHistoryMath = require('./TouchHistoryMath').default;
 
 const currentCentroidXOfTouchesChangedAfter =
@@ -31,9 +30,6 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY;
  * single-touch gestures resilient to extra touches, and can be used to
  * recognize simple multi-touch gestures.
  *
- * By default, `PanResponder` holds an `InteractionManager` handle to block
- * long-running JS events from interrupting active gestures.
- *
  * It provides a predictable wrapper of the responder handlers provided by the
  * [gesture responder system](docs/gesture-responder-system.html).
  * For each handler, it provides a new `gestureState` object alongside the
@@ -405,9 +401,6 @@ const PanResponder = {
     getInteractionHandle: () => ?number,
     panHandlers: GestureResponderHandlerMethods,
   } {
-    const interactionState = {
-      handle: (null: ?number),
-    };
     const gestureState: PanResponderGestureState = {
       // Useful for debugging
       stateID: Math.random(),
@@ -464,10 +457,6 @@ const PanResponder = {
       },
 
       onResponderGrant(event: GestureResponderEvent): boolean {
-        if (!interactionState.handle) {
-          interactionState.handle =
-            InteractionManager.createInteractionHandle();
-        }
         gestureState.x0 = currentCentroidX(event.touchHistory);
         gestureState.y0 = currentCentroidY(event.touchHistory);
         gestureState.dx = 0;
@@ -482,21 +471,11 @@ const PanResponder = {
       },
 
       onResponderReject(event: GestureResponderEvent): void {
-        clearInteractionHandle(
-          interactionState,
-          config.onPanResponderReject,
-          event,
-          gestureState,
-        );
+        config.onPanResponderReject?.call(undefined, event, gestureState);
       },
 
       onResponderRelease(event: GestureResponderEvent): void {
-        clearInteractionHandle(
-          interactionState,
-          config.onPanResponderRelease,
-          event,
-          gestureState,
-        );
+        config.onPanResponderRelease?.call(undefined, event, gestureState);
         PanResponder._initializeGestureState(gestureState);
       },
 
@@ -529,21 +508,11 @@ const PanResponder = {
       onResponderEnd(event: GestureResponderEvent): void {
         const touchHistory = event.touchHistory;
         gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
-        clearInteractionHandle(
-          interactionState,
-          config.onPanResponderEnd,
-          event,
-          gestureState,
-        );
+        config.onPanResponderEnd?.call(undefined, event, gestureState);
       },
 
       onResponderTerminate(event: GestureResponderEvent): void {
-        clearInteractionHandle(
-          interactionState,
-          config.onPanResponderTerminate,
-          event,
-          gestureState,
-        );
+        config.onPanResponderTerminate?.call(undefined, event, gestureState);
         PanResponder._initializeGestureState(gestureState);
       },
 
@@ -556,27 +525,13 @@ const PanResponder = {
     return {
       panHandlers,
       getInteractionHandle(): ?number {
-        return interactionState.handle;
+        // TODO: Deprecate and delete this method.
+        return null;
       },
     };
   },
 };
 
-function clearInteractionHandle(
-  interactionState: {handle: ?number, ...},
-  callback: ?(ActiveCallback | PassiveCallback),
-  event: GestureResponderEvent,
-  gestureState: PanResponderGestureState,
-) {
-  if (interactionState.handle) {
-    InteractionManager.clearInteractionHandle(interactionState.handle);
-    interactionState.handle = null;
-  }
-  if (callback) {
-    callback(event, gestureState);
-  }
-}
-
 export type PanResponderInstance = ReturnType<(typeof PanResponder)['create']>;
 
 export default PanResponder;

package/Microsoft.ReactNative/ComponentView.idl

@@ -106,6 +106,8 @@ namespace Microsoft.ReactNative
     DOC_STRING("Used to handle key up events when this component is focused, or if a child component did not handle the key up")
     event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.KeyRoutedEventArgs> KeyUp;
     event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.CharacterReceivedRoutedEventArgs> CharacterReceived;
+    DOC_STRING("Used to handle context menu key events (SHIFT+F10 or Context Menu key) when this component is focused")
+    event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.ContextMenuKeyEventArgs> ContextMenuKey;
     event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs> PointerPressed;
     event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs> PointerReleased;
     event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs> PointerMoved;

package/Microsoft.ReactNative/Composition.Input.idl

@@ -34,6 +34,13 @@ namespace Microsoft.ReactNative.Composition.Input
     KeyboardSource KeyboardSource { get; };
   };
 
+  DOC_STRING("Event arguments for context menu key events (SHIFT+F10 or Context Menu key)")
+  interface ContextMenuKeyEventArgs requires RoutedEventArgs
+  {
+    DOC_STRING("Gets or sets whether the event was handled. Set to true to prevent default behavior.")
+    Boolean Handled { get; set; };
+  };
+
   interface IPointerPointTransform
   {
     IPointerPointTransform Inverse { get; };

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -154,6 +154,9 @@ namespace Microsoft.ReactNative.Composition
   [webhosthidden]
   [default_interface]
   runtimeclass ScrollViewComponentView : ViewComponentView {
+    // Issue #15557: Event fired when scroll position changes.
+    // ContentIslandComponentView uses this to update LocalToParentTransformMatrix.
+    event Windows.Foundation.EventHandler<IInspectable> ViewChanged;
   };
 
   [experimental]

package/Microsoft.ReactNative/Fabric/ComponentView.cpp

@@ -469,6 +469,16 @@ void ComponentView::CharacterReceived(winrt::event_token const &token) noexcept
   m_characterReceivedEvent.remove(token);
 }
 
+winrt::event_token ComponentView::ContextMenuKey(
+    winrt::Windows::Foundation::EventHandler<
+        winrt::Microsoft::ReactNative::Composition::Input::ContextMenuKeyEventArgs> const &handler) noexcept {
+  return m_contextMenuKeyEvent.add(handler);
+}
+
+void ComponentView::ContextMenuKey(winrt::event_token const &token) noexcept {
+  m_contextMenuKeyEvent.remove(token);
+}
+
 winrt::event_token ComponentView::PointerPressed(
     winrt::Windows::Foundation::EventHandler<
         winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs> const &handler) noexcept {
@@ -609,6 +619,14 @@ void ComponentView::OnCharacterReceived(
   }
 }
 
+void ComponentView::OnContextMenuKey(
+    const winrt::Microsoft::ReactNative::Composition::Input::ContextMenuKeyEventArgs &args) noexcept {
+  m_contextMenuKeyEvent(*this, args);
+  if (m_parent && !args.Handled()) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->OnContextMenuKey(args);
+  }
+}
+
 bool ComponentView::focusable() const noexcept {
   return false;
 }

package/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -167,6 +167,10 @@ struct ComponentView
       winrt::Windows::Foundation::EventHandler<
           winrt::Microsoft::ReactNative::Composition::Input::CharacterReceivedRoutedEventArgs> const &handler) noexcept;
   void CharacterReceived(winrt::event_token const &token) noexcept;
+  winrt::event_token ContextMenuKey(
+      winrt::Windows::Foundation::EventHandler<
+          winrt::Microsoft::ReactNative::Composition::Input::ContextMenuKeyEventArgs> const &handler) noexcept;
+  void ContextMenuKey(winrt::event_token const &token) noexcept;
   winrt::event_token PointerPressed(
       winrt::Windows::Foundation::EventHandler<
           winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs> const &handler) noexcept;
@@ -253,6 +257,8 @@ struct ComponentView
   virtual void OnKeyUp(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept;
   virtual void OnCharacterReceived(
       const winrt::Microsoft::ReactNative::Composition::Input::CharacterReceivedRoutedEventArgs &args) noexcept;
+  virtual void OnContextMenuKey(
+      const winrt::Microsoft::ReactNative::Composition::Input::ContextMenuKeyEventArgs &args) noexcept;
 
  protected:
   winrt::com_ptr<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder> m_builder;
@@ -277,6 +283,9 @@ struct ComponentView
   winrt::event<winrt::Windows::Foundation::EventHandler<
       winrt::Microsoft::ReactNative::Composition::Input::CharacterReceivedRoutedEventArgs>>
       m_characterReceivedEvent;
+  winrt::event<winrt::Windows::Foundation::EventHandler<
+      winrt::Microsoft::ReactNative::Composition::Input::ContextMenuKeyEventArgs>>
+      m_contextMenuKeyEvent;
   winrt::event<winrt::Windows::Foundation::EventHandler<
       winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs>>
       m_pointerPressedEvent;

package/Microsoft.ReactNative/Fabric/Composition/Composition.Input.cpp

@@ -136,6 +136,18 @@ winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource CharacterRecei
   return m_source;
 }
 
+ContextMenuKeyEventArgs::ContextMenuKeyEventArgs(facebook::react::Tag tag) : m_tag(tag) {}
+
+int32_t ContextMenuKeyEventArgs::OriginalSource() noexcept {
+  return m_tag;
+}
+bool ContextMenuKeyEventArgs::Handled() noexcept {
+  return m_handled;
+}
+void ContextMenuKeyEventArgs::Handled(bool value) noexcept {
+  m_handled = value;
+}
+
 Pointer::Pointer(winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType type, uint32_t id)
     : m_type(type), m_id(id) {}
 

package/Microsoft.ReactNative/Fabric/Composition/Composition.Input.h

@@ -78,6 +78,21 @@ struct CharacterReceivedRoutedEventArgs
   const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource m_source;
 };
 
+struct ContextMenuKeyEventArgs : winrt::implements<
+                                     ContextMenuKeyEventArgs,
+                                     winrt::Microsoft::ReactNative::Composition::Input::ContextMenuKeyEventArgs,
+                                     winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> {
+  ContextMenuKeyEventArgs(facebook::react::Tag tag);
+
+  int32_t OriginalSource() noexcept;
+  bool Handled() noexcept;
+  void Handled(bool value) noexcept;
+
+ private:
+  facebook::react::Tag m_tag{-1};
+  bool m_handled{false};
+};
+
 struct Pointer : PointerT<Pointer> {
   Pointer(winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType type, uint32_t id);
 

package/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp

@@ -320,6 +320,32 @@ void CompositionEventHandler::Initialize() noexcept {
             }
           }
         });
+
+    m_contextMenuKeyToken =
+        keyboardSource.ContextMenuKey([wkThis = weak_from_this()](
+                                          winrt::Microsoft::UI::Input::InputKeyboardSource const & /*source*/,
+                                          winrt::Microsoft::UI::Input::ContextMenuKeyEventArgs const &args) {
+          if (auto strongThis = wkThis.lock()) {
+            if (auto strongRootView = strongThis->m_wkRootView.get()) {
+              if (strongThis->SurfaceId() == -1)
+                return;
+
+              auto focusedComponent = strongThis->RootComponentView().GetFocusedComponent();
+              if (focusedComponent) {
+                auto tag =
+                    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(focusedComponent)
+                        ->Tag();
+                auto contextMenuArgs = winrt::make<
+                    winrt::Microsoft::ReactNative::Composition::Input::implementation::ContextMenuKeyEventArgs>(tag);
+                winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(focusedComponent)
+                    ->OnContextMenuKey(contextMenuArgs);
+                if (contextMenuArgs.Handled()) {
+                  args.Handled(true);
+                }
+              }
+            }
+          }
+        });
   }
 }
 
@@ -336,6 +362,7 @@ CompositionEventHandler::~CompositionEventHandler() {
       keyboardSource.KeyDown(m_keyDownToken);
       keyboardSource.KeyUp(m_keyUpToken);
       keyboardSource.CharacterReceived(m_characterReceivedToken);
+      keyboardSource.ContextMenuKey(m_contextMenuKeyToken);
     }
   }
 
@@ -443,6 +470,54 @@ int64_t CompositionEventHandler::SendMessage(HWND hwnd, uint32_t msg, uint64_t w
       }
       return 0;
     }
+    case WM_RBUTTONDOWN: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerPressed(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_RBUTTONUP: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerReleased(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_MBUTTONDOWN: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerPressed(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_MBUTTONUP: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerReleased(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_XBUTTONDOWN: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerPressed(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_XBUTTONUP: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerReleased(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
     case WM_POINTERUP: {
       if (auto strongRootView = m_wkRootView.get()) {
         auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(

package/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h

@@ -175,6 +175,7 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
   winrt::event_token m_keyDownToken;
   winrt::event_token m_keyUpToken;
   winrt::event_token m_characterReceivedToken;
+  winrt::event_token m_contextMenuKeyToken;
 };
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp

@@ -36,10 +36,11 @@ constexpr float FOCUS_VISUAL_RADIUS = 3.0f;
 
 // m_outerVisual
 //   |
-//   |
 //   ----- m_visual <-- Background / clip - Can be a custom visual depending on Component type
 //            |
 //            ----- Border Visuals x N (BorderPrimitive attached to m_visual)
+//            ----- <children> (default: directly in m_visual after border visuals)
+//            ----- m_childrenContainer (created on demand when overflow:hidden, children moved here)
 //   ------Focus Visual Container (created when hosting focus visuals)
 //           |
 //           |------Inner Focus Visual
@@ -708,7 +709,9 @@ void ComponentView::applyShadowProps(const facebook::react::ViewProps &viewProps
       shadow.Color(theme()->Color(*viewProps.shadowColor));
   }
 
-  Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
+  // Apply shadow to OuterVisual (not Visual) because Visual may have a rounded-corner clip
+  // from updateClippingPath, which would clip the shadow. OuterVisual is not clipped.
+  OuterVisual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
 }
 
 void ComponentView::updateTransformProps(
@@ -892,23 +895,26 @@ void ComponentView::updateClippingPath(
     const facebook::react::ViewProps &viewProps) noexcept {
   auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
 
-  if (borderMetrics.borderRadii.topLeft.horizontal == 0 && borderMetrics.borderRadii.topRight.horizontal == 0 &&
-      borderMetrics.borderRadii.bottomLeft.horizontal == 0 && borderMetrics.borderRadii.bottomRight.horizontal == 0 &&
-      borderMetrics.borderRadii.topLeft.vertical == 0 && borderMetrics.borderRadii.topRight.vertical == 0 &&
-      borderMetrics.borderRadii.bottomLeft.vertical == 0 && borderMetrics.borderRadii.bottomRight.vertical == 0) {
-    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
-  } else {
+  bool hasRoundedCorners = borderMetrics.borderRadii.topLeft.horizontal != 0 ||
+      borderMetrics.borderRadii.topRight.horizontal != 0 || borderMetrics.borderRadii.bottomLeft.horizontal != 0 ||
+      borderMetrics.borderRadii.bottomRight.horizontal != 0 || borderMetrics.borderRadii.topLeft.vertical != 0 ||
+      borderMetrics.borderRadii.topRight.vertical != 0 || borderMetrics.borderRadii.bottomLeft.vertical != 0 ||
+      borderMetrics.borderRadii.bottomRight.vertical != 0;
+
+  const float scale = layoutMetrics.pointScaleFactor;
+  const float viewWidth = layoutMetrics.frame.size.width * scale;
+  const float viewHeight = layoutMetrics.frame.size.height * scale;
+
+  // Apply clipping to m_visual only for rounded corners
+  // overflow:hidden clipping is handled separately via m_childrenContainer in ViewComponentView
+  if (hasRoundedCorners) {
     winrt::com_ptr<ID2D1PathGeometry> pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry(
-        m_compContext,
-        borderMetrics.borderRadii,
-        {0, 0, 0, 0},
-        {0,
-         0,
-         layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-         layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+        m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight});
 
     Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
         pathGeometry.get());
+  } else {
+    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
   }
 }
 
@@ -1083,6 +1089,11 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual
 ViewComponentView::VisualToMountChildrenInto() noexcept {
   if (m_builder && m_builder->VisualToMountChildrenIntoHandler())
     return m_builder->VisualToMountChildrenIntoHandler()(*this);
+  // When overflow:hidden, children are hosted in m_childrenContainer (child of m_visual)
+  // so we can apply clipping without affecting borders/background.
+  // Otherwise children go directly into Visual() (the original behavior).
+  if (m_childrenContainer)
+    return m_childrenContainer;
   return Visual();
 }
 
@@ -1091,9 +1102,14 @@ void ViewComponentView::MountChildComponentView(
     uint32_t index) noexcept {
   base_type::MountChildComponentView(childComponentView, index);
 
-  indexOffsetForBorder(index);
   ensureVisual();
 
+  // When children are in Visual() directly, offset past border visuals.
+  // When children are in m_childrenContainer, no offset needed.
+  if (!m_childrenContainer) {
+    indexOffsetForBorder(index);
+  }
+
   if (auto compositionChild = childComponentView.try_as<ComponentView>()) {
     auto visualIndex = index;
     // Most of the time child index will align with visual index.
@@ -1105,6 +1121,7 @@ void ViewComponentView::MountChildComponentView(
         }
       }
     }
+
     VisualToMountChildrenInto().InsertAt(compositionChild->OuterVisual(), visualIndex);
   } else {
     m_hasNonVisualChildren = true;
@@ -1116,7 +1133,6 @@ void ViewComponentView::UnmountChildComponentView(
     uint32_t index) noexcept {
   base_type::UnmountChildComponentView(childComponentView, index);
 
-  indexOffsetForBorder(index);
   if (auto compositionChild = childComponentView.try_as<ComponentView>()) {
     VisualToMountChildrenInto().Remove(compositionChild->OuterVisual());
   }
@@ -1316,6 +1332,57 @@ void ViewComponentView::updateLayoutMetrics(
   Visual().Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+
+  // Update children container clipping for overflow:hidden
+  updateChildrenClippingPath(layoutMetrics, *viewProps());
+}
+
+void ViewComponentView::updateChildrenClippingPath(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    const facebook::react::ViewProps &viewProps) noexcept {
+  const float scale = layoutMetrics.pointScaleFactor;
+  const float viewWidth = layoutMetrics.frame.size.width * scale;
+  const float viewHeight = layoutMetrics.frame.size.height * scale;
+
+  if (viewProps.getClipsContentToBounds()) {
+    // Create m_childrenContainer on demand (like iOS _containerView pattern)
+    // m_childrenContainer is a child of m_visual, placed after border visuals.
+    if (!m_childrenContainer) {
+      m_childrenContainer = m_compContext.CreateSpriteVisual();
+
+      // Insert at the end of m_visual's children (after border visuals + existing children)
+      // Then move existing children from m_visual into m_childrenContainer
+      uint32_t borderCount = 0;
+      indexOffsetForBorder(borderCount);
+
+      // Move existing child visuals from m_visual to m_childrenContainer
+      uint32_t childVisualIndex = 0;
+      for (auto it = m_children.begin(); it != m_children.end(); ++it) {
+        if (auto compositionChild = (*it).try_as<ComponentView>()) {
+          Visual().Remove(compositionChild->OuterVisual());
+          m_childrenContainer.InsertAt(compositionChild->OuterVisual(), childVisualIndex++);
+        }
+      }
+
+      // Insert m_childrenContainer after border visuals in m_visual
+      Visual().InsertAt(m_childrenContainer, borderCount);
+
+      // Use relative sizing so container automatically tracks parent's size
+      m_childrenContainer.RelativeSizeWithOffset({0, 0}, {1, 1});
+    }
+
+    // Clip children to view bounds using outer border radii (matches iOS default behavior)
+    auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
+    winrt::com_ptr<ID2D1PathGeometry> pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry(
+        m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight});
+
+    m_childrenContainer.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+        pathGeometry.get());
+  } else if (m_childrenContainer) {
+    // overflow changed from hidden to visible. Keep container, just remove clip.
+    m_childrenContainer.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+        nullptr);
+  }
 }
 
 void ViewComponentView::prepareForRecycle() noexcept {}