Skip to content

Commit 1ea269f

Browse files
retyuifacebook-github-bot
authored andcommitted
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: #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
1 parent 8089146 commit 1ea269f

File tree

2 files changed

+12
-4
lines changed

2 files changed

+12
-4
lines changed

packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface StyleSheetProperties {
1414
flatten<T extends string>(style: T): T;
1515
}
1616

17-
type Falsy = undefined | null | false;
17+
type Falsy = undefined | null | false | '';
1818
interface RecursiveArray<T>
1919
extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
2020
/** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle<T>` and return `T`. */

packages/react-native/types/__typetests__/index.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,9 @@ class CustomView extends React.Component {
411411
}
412412
}
413413

414-
class Welcome extends React.Component<ElementProps<View> & {color: string}> {
414+
class Welcome extends React.Component<
415+
ElementProps<View> & {color: string; bgColor?: null | undefined | string}
416+
> {
415417
rootViewRef = React.useRef<View>(null);
416418
customViewRef = React.useRef<CustomView>(null);
417419

@@ -436,12 +438,18 @@ class Welcome extends React.Component<ElementProps<View> & {color: string}> {
436438
}
437439

438440
render() {
439-
const {color, ...props} = this.props;
441+
const {color, bgColor, ...props} = this.props;
440442
return (
441443
<View
442444
{...props}
443445
ref={this.rootViewRef}
444-
style={[[styles.container], undefined, null, false]}>
446+
style={[
447+
[styles.container],
448+
undefined,
449+
null,
450+
false,
451+
bgColor && {backgroundColor: bgColor},
452+
]}>
445453
<Text style={styles.welcome}>Welcome to React Native</Text>
446454
<Text style={styles.instructions}>
447455
To get started, edit index.ios.js

0 commit comments

Comments
 (0)