From d490354cd8dd2f673ff87a6f3066df237f6582a1 Mon Sep 17 00:00:00 2001
From: Joe Vilches <joevilches@meta.com>
Date: Thu, 15 Aug 2024 20:59:11 -0700
Subject: [PATCH] Add View box shadow e2e tests (#46054)

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

tsia, more test = good

Changelog: [Internal]

Reviewed By: necolas

Differential Revision: D60938608

fbshipit-source-id: abce5ab7d42a7f7f626f0edc852aa1374f8029f0
---
 .../rn-tester/js/examples/View/ViewExample.js | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
index 5cda36f53f3..6657ae7d4c4 100644
--- a/packages/rn-tester/js/examples/View/ViewExample.js
+++ b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -452,6 +452,87 @@ function LayoutConformanceBox(): React.Node {
   );
 }
 
+function BoxShadowExample(): React.Node {
+  const defaultStyleSize = {width: 75, height: 75};
+
+  return (
+    <View testID="view-test-box-shadow" style={{gap: 20}}>
+      <View style={{flexDirection: 'row', gap: 15}}>
+        <View
+          style={{
+            ...defaultStyleSize,
+            borderRadius: 10,
+            borderWidth: 5,
+            borderColor: 'red',
+            experimental_boxShadow: '0 0 10px 0 black',
+          }}
+        />
+        <View
+          style={{
+            ...defaultStyleSize,
+            borderRadius: 30,
+            borderWidth: 5,
+            borderColor: 'red',
+            experimental_boxShadow: 'inset 0 0 10px 0 black',
+          }}
+        />
+        <View
+          style={{
+            ...defaultStyleSize,
+            borderRadius: 30,
+            borderWidth: 5,
+            borderColor: 'red',
+            experimental_boxShadow:
+              'inset 15px -5px 5px 5px cyan, inset 15px -5px 20px 10px orange, -5px 5px 5px 0px green, 0px -10px 0px 5px black',
+          }}
+        />
+      </View>
+      <View style={{flexDirection: 'row', gap: 15}}>
+        <View
+          style={{
+            ...defaultStyleSize,
+            experimental_boxShadow: '0px 0px 5px 5px black',
+          }}>
+          <View
+            style={{
+              left: -10,
+              width: 25,
+              height: 25,
+              backgroundColor: 'cyan',
+            }}
+          />
+        </View>
+        <View
+          style={{
+            ...defaultStyleSize,
+            backgroundColor: 'red',
+            experimental_boxShadow: 'inset 0px 0px 5px 5px black',
+          }}
+        />
+        <View style={{...defaultStyleSize, flexDirection: 'row'}}>
+          <View style={{width: 25, height: 25, backgroundColor: 'cyan'}} />
+          <View
+            style={{
+              ...defaultStyleSize,
+              experimental_boxShadow: ' 0px 0px 20px 5px black',
+            }}
+          />
+          <View style={{width: 25, height: 25, backgroundColor: 'cyan'}} />
+        </View>
+      </View>
+      <View style={{flexDirection: 'row', gap: 15}}>
+        <View
+          style={{
+            ...defaultStyleSize,
+            backgroundColor: 'green',
+            experimental_boxShadow: '0px 10px',
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
 export default ({
   title: 'View',
   documentationURL: 'https://reactnative.dev/docs/view',
@@ -1078,5 +1159,10 @@ export default ({
       name: 'layout-conformance',
       render: LayoutConformanceExample,
     },
+    {
+      title: 'Box Shadow',
+      name: 'box-shadow',
+      render: BoxShadowExample,
+    },
   ],
 }: RNTesterModule);