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
This commit is contained in:
Joe Vilches
2024-08-15 20:59:11 -07:00
committed by Facebook GitHub Bot
parent de39ebb9f8
commit d490354cd8
@@ -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);