Problem Description
When shadow props (shadowColor, shadowOffset, shadowOpacity, shadowRadius) are applied to a <View> that also has borderRadius, the shadow renders as a rectangle instead of following the rounded shape. The borderRadius clips the view visually but the shadow is cast from the rectangular bounding box.
Steps To Reproduce
- Create a with borderRadius, backgroundColor, and shadow props (shadowColor, shadowOffset, shadowOpacity, shadowRadius)
- Run the app on Windows
- Observe the shadow around the component
Expected Results
The shadow should follow the rounded corners defined by borderRadius. The corners clipped by borderRadius should not cast a shadow.
Actual result: the shadow renders as a full rectangle regardless of borderRadius.
CLI version
20.0.0
Environment
info Fetching system and libraries information...
System:
OS: Windows 11 10.0.26100
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Memory: 10.83 GB / 31.69 GB
Binaries:
Node:
version: 20.20.0
path: C:\nvm4w\nodejs\node.exe
Yarn:
version: 1.22.22
path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm:
version: 10.8.2
path: C:\nvm4w\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions:
- 10.0.19041.0
- 10.0.22621.0
- 10.0.26100.0
IDEs:
Android Studio: Not Found
Visual Studio:
- 17.14.37216.2 (Visual Studio Professional 2022)
- 16.11.37206.5 (Visual Studio Professional 2019)
Languages:
Java:
version: 2.formatMsgNoLookups
path: C:\Program Files (x86)\Amazon Corretto\jdk1.8.0_482\bin\javac.exe
Ruby:
version: 3.0.2
path: C:\tools\ruby30\bin\ruby.exe
npmPackages:
"@react-native-community/cli":
installed: 20.0.0
wanted: 20.0.0
react:
installed: 19.1.4
wanted: 19.1.4
react-native:
installed: 0.81.6
wanted: 0.81.6
react-native-windows:
installed: 0.81.15
wanted: 0.81.15
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
info React Native v0.85.3 is now available (your project is running on v0.81.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.85.3
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.81.6&to=0.85.3
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".
Community Modules
No response
Target React Native Architecture
None
Target Platform Version
None
Visual Studio Version
None
Build Configuration
None
Snack, code example, screenshot, or link to a repository
No response
Problem Description
When shadow props (
shadowColor,shadowOffset,shadowOpacity,shadowRadius) are applied to a<View>that also hasborderRadius, the shadow renders as a rectangle instead of following the rounded shape. TheborderRadiusclips the view visually but the shadow is cast from the rectangular bounding box.Steps To Reproduce
Expected Results
The shadow should follow the rounded corners defined by borderRadius. The corners clipped by borderRadius should not cast a shadow.
Actual result: the shadow renders as a full rectangle regardless of borderRadius.
CLI version
20.0.0
Environment
info Fetching system and libraries information... System: OS: Windows 11 10.0.26100 CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz Memory: 10.83 GB / 31.69 GB Binaries: Node: version: 20.20.0 path: C:\nvm4w\nodejs\node.exe Yarn: version: 1.22.22 path: C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: version: 10.8.2 path: C:\nvm4w\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled AllowAllTrustedApps: Enabled Versions: - 10.0.19041.0 - 10.0.22621.0 - 10.0.26100.0 IDEs: Android Studio: Not Found Visual Studio: - 17.14.37216.2 (Visual Studio Professional 2022) - 16.11.37206.5 (Visual Studio Professional 2019) Languages: Java: version: 2.formatMsgNoLookups path: C:\Program Files (x86)\Amazon Corretto\jdk1.8.0_482\bin\javac.exe Ruby: version: 3.0.2 path: C:\tools\ruby30\bin\ruby.exe npmPackages: "@react-native-community/cli": installed: 20.0.0 wanted: 20.0.0 react: installed: 19.1.4 wanted: 19.1.4 react-native: installed: 0.81.6 wanted: 0.81.6 react-native-windows: installed: 0.81.15 wanted: 0.81.15 npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: Not found info React Native v0.85.3 is now available (your project is running on v0.81.6). info Changelog: https://github.com/facebook/react-native/releases/tag/v0.85.3 info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.81.6&to=0.85.3 info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".Community Modules
No response
Target React Native Architecture
None
Target Platform Version
None
Visual Studio Version
None
Build Configuration
None
Snack, code example, screenshot, or link to a repository
No response