react / react/react-native

StyleSheet.flatten with a falsy value returns undefined

Offen
#46,293 3 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

API: StyleSheet Issue: Author Provided Repro
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

On iOS and Android (not web), calling StyleSheet.flatten with null/undefined/false returns undefined.

The TypeScript signature of flatten is flatten<T>(style?: StyleProp<T>): T. null/undefined/false are valid StyleProps, so passing them to flatten should be valid, but flatten is supposed to return T (some style object), and undefined is usually not a valid T.

Widening the return type of flatten to T | undefined is an option, but would be a public API change. I think changing the function to return {} for falsy values is more correct, since you probably want to get a final computed, flattened style object, and don't care what the input was or if it was falsy.

Steps to reproduce

On iOS or Android:

console.log(typeof StyleSheet.flatten(false)) // => 'undefined'
React Native Version

0.75.2

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info
System:
  OS: macOS 14.2
  CPU: (8) arm64 Apple M2
  Memory: 339.17 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.3.0
    path: ~/.volta/tools/image/node/22.3.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.volta/tools/image/yarn/4.3.1/bin/yarn
  npm:
    version: 10.8.1
    path: ~/.volta/tools/image/node/22.3.0/bin/npm
  Watchman:
    version: 2024.07.01.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/hazel/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.7.4
    path: /Users/hazel/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.2
    wanted: 0.75.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: fals
Stacktrace or Logs
N/A
Reproducer

https://snack.expo.dev/@catboyfan/stylesheet-flatten-undefined

Screenshots and Videos

No response

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, die Implementierung von StyleSheet.flatten und ihre TypeScript-Deklaration zu finden, und reproduziere anschließend das Verhalten unter iOS oder Android mit dem verknüpften Snack. Prüfe die Eingaben null, undefined und false; die Aufgabe ist abgeschlossen, wenn falsy-Werte konsistent ein leeres Style-Objekt entsprechend dem öffentlichen Rückgabetyp erzeugen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native, typescript
Bereich
mobile-dev
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

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