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
This commit is contained in:
D N
2024-03-11 06:00:36 -07:00
committed by Facebook GitHub Bot
parent 80891468d2
commit 1ea269f42c
2 changed files with 12 additions and 4 deletions
+1 -1
View File
@@ -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`. */
@@ -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