From f46dd8840421e575ca4648e7804b26f9345f5ac8 Mon Sep 17 00:00:00 2001 From: Pieter De Baets Date: Wed, 6 Sep 2023 06:54:53 -0700 Subject: [PATCH] Fix Transform flip example on new renderer (#39259) Summary: This matches the [behaviour we had in the old renderer](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Views/UIView%2BReact.m#L145) where zIndex is mapped to the CALayer's zPosition. This is required to prevent clipping of views in rotation transforms as currently used in the TransformExample. Changelog: [iOS][Fixed] Rotation transforms are no longer clipped when zIndex is applied Reviewed By: christophpurrer Differential Revision: D48905010 --- .../Mounting/ComponentViews/View/RCTViewComponentView.mm | 5 +++++ packages/rn-tester/js/examples/Transform/TransformExample.js | 1 + 2 files changed, 6 insertions(+) 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 38f3da01ca76..d06b0aa8d1c2 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm @@ -371,6 +371,11 @@ - (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/rn-tester/js/examples/Transform/TransformExample.js b/packages/rn-tester/js/examples/Transform/TransformExample.js index d0a2e7113c5e..48ac0e0e4be6 100644 --- a/packages/rn-tester/js/examples/Transform/TransformExample.js +++ b/packages/rn-tester/js/examples/Transform/TransformExample.js @@ -255,6 +255,7 @@ const styles = StyleSheet.create({ justifyContent: 'center', backgroundColor: 'blue', backfaceVisibility: 'hidden', + zIndex: 1024, }, flipCard1: { position: 'absolute',