Fix Transform flip example on new renderer (#39259)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39259

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

fbshipit-source-id: 56dea38da94ae32a88bbce3f29c3cce9ddbbf010

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -371,6 +371,11 @@ using namespace facebook::react;
     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<const ViewProps>(props);

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',