microsoft / microsoft/react-native-windows
shadowColor/shadowOffset/shadowOpacity/shadowRadius do not respect borderRadius on View — shadow renders as rectangle
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no implementation files or tests. Start by reproducing the rounded View shadow on Windows, then trace the Windows View shadow-rendering path; done means the shadow follows borderRadius instead of the rectangular bounds, with coverage for the reported case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100