StyleSheet.flatten with a falsy value returns undefined

[fractalbeauty]

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

[cipolleschi]

Hi @hazelmeow, thanks for the report. Out of curiosity, have you tried this in 0.74 also? How doest that behaves there?

[fractalbeauty]

@cipolleschi Just tested on RN 0.74.5, same behavior on iOS at least (and I would assume Android is the same). The snack is Expo 51 so I think that should also be 0.74 but I'm not 100% sure.

[m3hari]

Same ✋, here is a reproduction.

We are on: "react-native": "0.79.5"

React Native's type definition

export function flatten<T>(
    style?: StyleProp<T>,  // accepts undefined
  ): T extends (infer U)[] ? U : T;  // but return type is always defined

We have this

interface Props {
  style?: StyleProp<TextStyle>
}

function MyComp(props:Props){
    const flatStyle = StyleSheet.flatten(style);  // TS thinks: TextStyle
    //  crashes at runtime: Cannot read property 'color' of undefined
    return <Text style={{ color: flatStyle.color ?? 'black' }}>Hi</Text>;
}