From d1be494f6a75e054a9ec4c8e582547331e72f4ee Mon Sep 17 00:00:00 2001
From: Jason Zheng <jasonqzheng@meta.com>
Date: Thu, 24 Sep 2026 11:19:56 -0700
Subject: [PATCH] Fix animation artifacting in RNTester example on iOS

Summary:
Prevents the RNTester examples in Animated > Transform Styles from exhibiting the issue referenced in [#43763](https://github.com/react/react-native/issues/43763), where rotateX and rotateY show animation artifacting on iOS.

### Root Cause

Fabric flattens away the parent view that would normally provide a native layer boundary. iOS Core Animation then processes the rotateX/rotateY 3D layer in the same hierarchy as sibling controls, causing incorrect depth composition and rendering artifacts.

### This PR

Modify `TransformStylesExample.js` to add the `isolation: 'isolate'` style on the View wrapper so it is retained in the native stacking context. This doesn't fix the root problem but documents the root cause and a workaround until a framework fix is implemented.

Changelog: [Internal]

Differential Revision: D121559781
---
 .../examples/Animated/TransformStylesExample.js   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
index c9a4942ae7f7..613fcb19f7b1 100644
--- a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
+++ b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
@@ -64,10 +64,12 @@ component AnimatedView(properties: Array<string>, useNativeDriver: boolean) {
         }}>
         Apply Selected Transforms
       </RNTesterButton>
-      <Animated.View
-        // $FlowFixMe[incompatible-type] - properties are not exact
-        style={[styles.animatedView, {transform: transformStyles}]}
-      />
+      <View style={styles.transformIsolation}>
+        <Animated.View
+          // $FlowFixMe[incompatible-type] - properties are not exact
+          style={[styles.animatedView, {transform: transformStyles}]}
+        />
+      </View>
     </>
   );
 }
@@ -153,6 +155,11 @@ const styles = StyleSheet.create({
     width: 100,
     backgroundColor: 'blue',
   },
+  transformIsolation: {
+    // Isolate the 3D-transformed view so iOS does not composite it with sibling
+    // controls, which causes rendering artifacts with rotateX and rotateY.
+    isolation: 'isolate',
+  },
   bottomSeparation: {
     paddingBottom: 6,
     marginBottom: 6,