callstack / callstack/react-native-paper

[Surface] `shadowColor` should follow the current theme by default

Open
#4,637 1 comment 3 reactions 0 assignees View on GitHub
bug Surface
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour

It looks like the `shadowColor` of the `Surface` component has been hardcoded to pure black [here](https://github.com/callstack/react-native-paper/blob/366e0d63fd5ae0d5dc7799dbd97eee8e4062134c/src/components/Surface.tsx#L98).

That causes the shadow not to show up on other components that are backed by `Surface` (e.g. `Card`).

### Expected behaviour

I'm not 100% sure of what the spec says but I believe the `shadowColor` should be set to something like `theme.colors.onBackground` by default to provide the necessary contrast.

### How to reproduce?
1. set a dark theme (e.g. where `theme.colors.background = 'black'`)
2. place a `Card` on the screen

### Preview

* With the current `shadowColor`:

Image

* With the `shadowColor` set to `theme.colors.onBackground`:

Image

### What have you tried so far?

I need to manually set `shadowColor` on each elevated component that requires a shadow.

### Your Environment

| software | version
| --------------------- | -------
| ios | Unnecessary
| android | Unnecessary
| react-native | Unnecessary
| react-native-paper | 5.13.1
| node | Unnecessary
| npm or yarn | Unnecessary
| expo sdk | Unnecessary

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.