Add an example for Text mouse hover events

amgleitman · Jul 25, 2024 · 0f54a24 · 0f54a24
1 parent 553619e
commit 0f54a24
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/packages/rn-tester/js/examples/Text/TextExample.ios.js b/packages/rn-tester/js/examples/Text/TextExample.ios.js
@@ -1343,6 +1343,27 @@ const examples = [
     },
   },
   // [macOS
+  {
+    title: 'Mouse hover events on nested Text elements',
+    render: function (): React.Node {
+      function mouseProps(name) {
+        return {
+          onMouseEnter: () => console.log(`Enter ${name}`),
+          onMouseLeave: () => console.log(`Leave ${name}`),
+        };
+      }
+
+      return (
+        <Text {...mouseProps('outer')}>
+          This is some text with{' '}
+          <Text style={{color: 'red'}} {...mouseProps('inner')}>
+            a nested element
+          </Text>{' '}
+          that tracks mouse hover events
+        </Text>
+      )
+    }
+  },
   {
     title: 'Text components inheriting color from parent',
     render: function (): React.Node {