callstack / callstack/react-native-paper

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

Offen
#4,637 1 Kommentar 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug Surface
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`:

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

Beitragsleitfaden

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.