StyleSheet.flatten with a falsy value returns undefined
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the StyleSheet.flatten implementation and its TypeScript declaration, then reproduce the behavior on iOS or Android with the linked Snack. Check null, undefined, and false inputs; done means falsy values produce an empty style object consistently with the public return type.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100