From 1ea269f42c2ef10e95fcf4751e71fba8bb5fe80d Mon Sep 17 00:00:00 2001
From: D N <4661784+retyui@users.noreply.github.com>
Date: Mon, 11 Mar 2024 06:00:36 -0700
Subject: [PATCH] fix: [TypeScript] Allow to pass empty string as style
 (#43404)

Summary:
```tsx
import {Text} from 'react-native'

interface Props {
  foregroundColor?: string | undefined | null
}

function Test({foregroundColor}: Props){
  return <Text style=[styles.icon, foregroundColor && { color: foregroundColor }] />
  // ^^^ Error: Type "" is not assignable to type TextStyle | Falsy | RegisteredStyle<TextStyle> | RecursiveArray<TextStyle...
}
```

## Changelog:

[GENERAL] [ADDED] - [TypeScript] Allow to pass empty string as style

Pull Request resolved: https://github.com/facebook/react-native/pull/43404

Test Plan:
Change `Falsy` type locally and test it on the next code

```tsx
const styles = StyleSheet.create({
  text: {
    color: 'red',
  },
});
export const a = <Text style={[styles.text, null, '', undefined, false]} />;
```

Reviewed By: rshest

Differential Revision: D54744517

Pulled By: javache

fbshipit-source-id: c5b934616cc0501c2b6a7907e6be522187a2cc20
---
 .../Libraries/StyleSheet/StyleSheet.d.ts           |  2 +-
 .../react-native/types/__typetests__/index.tsx     | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts
index 6d9fda4dac2..17ab55d6bc9 100644
--- a/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts
+++ b/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts
@@ -14,7 +14,7 @@ export interface StyleSheetProperties {
   flatten<T extends string>(style: T): T;
 }
 
-type Falsy = undefined | null | false;
+type Falsy = undefined | null | false | '';
 interface RecursiveArray<T>
   extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
 /** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle<T>` and return `T`. */
diff --git a/packages/react-native/types/__typetests__/index.tsx b/packages/react-native/types/__typetests__/index.tsx
index 33a3a2bba74..80a615b036c 100644
--- a/packages/react-native/types/__typetests__/index.tsx
+++ b/packages/react-native/types/__typetests__/index.tsx
@@ -411,7 +411,9 @@ class CustomView extends React.Component {
   }
 }
 
-class Welcome extends React.Component<ElementProps<View> & {color: string}> {
+class Welcome extends React.Component<
+  ElementProps<View> & {color: string; bgColor?: null | undefined | string}
+> {
   rootViewRef = React.useRef<View>(null);
   customViewRef = React.useRef<CustomView>(null);
 
@@ -436,12 +438,18 @@ class Welcome extends React.Component<ElementProps<View> & {color: string}> {
   }
 
   render() {
-    const {color, ...props} = this.props;
+    const {color, bgColor, ...props} = this.props;
     return (
       <View
         {...props}
         ref={this.rootViewRef}
-        style={[[styles.container], undefined, null, false]}>
+        style={[
+          [styles.container],
+          undefined,
+          null,
+          false,
+          bgColor && {backgroundColor: bgColor},
+        ]}>
         <Text style={styles.welcome}>Welcome to React Native</Text>
         <Text style={styles.instructions}>
           To get started, edit index.ios.js