Handle view flattening

facebook · Mar 1, 2024 · 90bdbcf · 90bdbcf
1 parent 447752b
commit 90bdbcf
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp
@@ -60,7 +60,7 @@ void ViewShadowNode::initialize() noexcept {
       viewProps.accessibilityElementsHidden ||
       viewProps.accessibilityViewIsModal ||
       viewProps.importantForAccessibility != ImportantForAccessibility::Auto ||
-      viewProps.removeClippedSubviews ||
+      viewProps.removeClippedSubviews || viewProps.cursor != Cursor::Auto ||
       HostPlatformViewTraitsInitializer::formsStackingContext(viewProps);
 
   bool formsView = formsStackingContext ||

diff --git a/packages/rn-tester/js/examples/Cursor/CursorExample.js b/packages/rn-tester/js/examples/Cursor/CursorExample.js
@@ -10,9 +10,13 @@
 'use strict';
 
 const React = require('react');
-const {StyleSheet, View} = require('react-native');
+const {StyleSheet, Text, View} = require('react-native');
 
 const styles = StyleSheet.create({
+  invisibleBox: {
+    width: 100,
+    height: 100,
+  },
   box: {
     width: 100,
     height: 100,
@@ -22,14 +26,14 @@ const styles = StyleSheet.create({
     width: 100,
     height: 100,
     borderWidth: 2,
-    borderRadius: 50,
+    borderRadius: 100,
   },
   halfcircle: {
     width: 100,
     height: 100,
     borderWidth: 2,
-    borderTopStartRadius: 50,
-    borderBottomStartRadius: 50,
+    borderTopStartRadius: 100,
+    borderBottomStartRadius: 100,
   },
   solid: {
     backgroundColor: 'blue',
@@ -42,6 +46,10 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     gap: 10,
   },
+  centerContent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });
 
 function CursorExampleAuto() {
@@ -70,6 +78,29 @@ function CursorExamplePointer() {
   );
 }
 
+function CursorExamplePointer() {
+  return (
+    <View style={styles.row}>
+      <View style={[styles.box, styles.pointer]} />
+      <View style={[styles.circle, styles.pointer]} />
+      <View style={[styles.halfcircle, styles.pointer]} />
+      <View style={[styles.box, styles.solid, styles.pointer]} />
+      <View style={[styles.circle, styles.solid, styles.pointer]} />
+      <View style={[styles.halfcircle, styles.solid, styles.pointer]} />
+    </View>
+  );
+}
+
+function CursorExampleViewFlattening() {
+  return (
+    <View style={styles.row}>
+      <View style={[styles.invisibleBox, styles.centerContent, styles.pointer]}>
+        <Text>pointer</Text>
+      </View>
+    </View>
+  );
+}
+
 exports.title = 'Cursor';
 exports.category = 'UI';
 exports.description =
@@ -85,4 +116,9 @@ exports.examples = [
     description: 'cursor: pointer',
     render: CursorExamplePointer,
   },
+  {
+    title: 'Pointer',
+    description: 'Views with a cursor do not get flattened',
+    render: CursorExampleViewFlattening,
+  },
 ];