Skip to content

shadowColor/shadowOffset/shadowOpacity/shadowRadius do not respect borderRadius on View — shadow renders as rectangle #16216

@gpiomb

Description

@gpiomb

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

  1. Create a with borderRadius, backgroundColor, and shadow props (shadowColor, shadowOffset, shadowOpacity, shadowRadius)
  2. Run the app on Windows
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs: Triage 🔍New issue that needs to be reviewed by the issue management team (label applied by bot)bug

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions