callstack / callstack/react-native-paper
[Surface] `shadowColor` should follow the current theme by default
- Vorherrschende Sprache
- TypeScript
- Sterne
- 14.5k
- Forks
- 2.2k
- Ø Merge
- 5 T. 23 Std.
- Gemergte PRs (30 T.)
- 12
Beschreibung
### 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`:
* With the `shadowColor` set to `theme.colors.onBackground`:
### 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
Beitragsleitfaden
Rechercherichtung
Beginne in src/components/Surface.tsx bei etwa Zeile 98, wo das Issue den fest codierten shadowColor identifiziert, und reproduziere das Verhalten mit einem dunklen Theme und einer Card. Vergleiche das aktuelle Ergebnis mit der vorgeschlagenen themenbasierten Schattenfarbe. Als erledigt gilt die Änderung, wenn erhöhte Komponenten wie Card standardmäßig einen passenden Schatten anzeigen, ohne shadowColor für jede Komponente manuell festlegen zu müssen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react-native, typescript
- Bereich
- frontend, mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 48/100