mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user