diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm index 6751018c8891..93482868a588 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm @@ -374,11 +374,6 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared & self.accessibilityIdentifier = RCTNSStringFromString(newViewProps.testId); } - // `zIndex` - if (oldViewProps.zIndex != newViewProps.zIndex) { - self.layer.zPosition = newViewProps.zIndex.value_or(0); - } - _needsInvalidateLayer = _needsInvalidateLayer || needsInvalidateLayer; _props = std::static_pointer_cast(props); diff --git a/packages/react-native/ReactCommon/react/renderer/mounting/Differentiator.cpp b/packages/react-native/ReactCommon/react/renderer/mounting/Differentiator.cpp index 5ede0a186314..6441eff18611 100644 --- a/packages/react-native/ReactCommon/react/renderer/mounting/Differentiator.cpp +++ b/packages/react-native/ReactCommon/react/renderer/mounting/Differentiator.cpp @@ -210,6 +210,7 @@ static inline bool shadowNodeIsConcrete(const ShadowNode& shadowNode) { static void sliceChildShadowNodeViewPairsRecursivelyV2( ShadowViewNodePair::NonOwningList& pairList, + size_t& startOfStaticIndex, ViewNodePairScope& scope, Point layoutOffset, const ShadowNode& shadowNode) { @@ -247,11 +248,23 @@ static void sliceChildShadowNodeViewPairsRecursivelyV2( areChildrenFlattened, isConcreteView, storedOrigin}); - pairList.push_back(&scope.back()); - if (areChildrenFlattened) { - sliceChildShadowNodeViewPairsRecursivelyV2( - pairList, scope, origin, childShadowNode); + if (shadowView.layoutMetrics.positionType == PositionType::Static) { + auto it = pairList.begin(); + std::advance(it, startOfStaticIndex); + pairList.insert(it, &scope.back()); + startOfStaticIndex++; + if (areChildrenFlattened) { + sliceChildShadowNodeViewPairsRecursivelyV2( + pairList, startOfStaticIndex, scope, origin, childShadowNode); + } + } else { + pairList.push_back(&scope.back()); + if (areChildrenFlattened) { + size_t pairListSize = pairList.size(); + sliceChildShadowNodeViewPairsRecursivelyV2( + pairList, pairListSize, scope, origin, childShadowNode); + } } } } @@ -270,8 +283,9 @@ ShadowViewNodePair::NonOwningList sliceChildShadowNodeViewPairsV2( return pairList; } + size_t startOfStaticIndex = 0; sliceChildShadowNodeViewPairsRecursivelyV2( - pairList, scope, layoutOffset, shadowNode); + pairList, startOfStaticIndex, scope, layoutOffset, shadowNode); // Sorting pairs based on `orderIndex` if needed. reorderInPlaceIfNeeded(pairList); diff --git a/packages/rn-tester/js/examples/Transform/TransformExample.js b/packages/rn-tester/js/examples/Transform/TransformExample.js index 7741baff11dd..75370c931cc4 100644 --- a/packages/rn-tester/js/examples/Transform/TransformExample.js +++ b/packages/rn-tester/js/examples/Transform/TransformExample.js @@ -247,6 +247,7 @@ const styles = StyleSheet.create({ marginVertical: 40, flex: 1, alignSelf: 'center', + zIndex: 0, }, flipCard: { width: 200, @@ -255,7 +256,6 @@ const styles = StyleSheet.create({ justifyContent: 'center', backgroundColor: 'blue', backfaceVisibility: 'hidden', - zIndex: 1024, }, flipCard1: { position: 'absolute',