react-native: "Text strings must be rendered within a Text component" when && operator is used in JSX

@hramos here. This issue has been modified from its original content, in order to convey the latest status of this issue. You may refer to the edit history to see what @mattermoran originally reported.

Environment:

[skip envinfo]

This issue only affected Android in older releases, but is now consistent across both iOS and Android platforms as of 0.57.8.

Description

Using JSX that conditionally renders a Text element can lead to a RedBox error, “Invariant Violation: Text strings must be rendered within a Text component”, if the condition is “falsy”, as in the following example:

<View>
  {someTextValue && <Text>{someTextValue}</Text>}
</View>

This can lead to a confusing development experience, as the pattern is documented in React’s JSX docs.

Workaround

Use a ternary operator.

<View>
  {someTextValue ? <Text>{someTextValue}</Text> : null}
</View>

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 7
Comments: 24 (4 by maintainers)

Most upvoted comments

For anyone that wants to see the errors in person Will crash

{0 && <Text>0</Text>}
{'' && <Text>isEmptyString</Text>}

Will not crash

{undefined && <Text>isUndefined</Text>}
{true && <Text>isTrue</Text>}
{false && <Text>isFalse</Text>}
{1 && <Text>isNumber</Text>}
{null && <Text>isNull</Text>}
{'string' && <Text>isString</Text>}

{!undefined && <Text>!isUndefined</Text>}
{!true && <Text>!isTrue</Text>}
{!false && <Text>!isFalse</Text>}
{!0 && <Text>!0</Text>}
{!1 && <Text>!isNumber</Text>}
{!null && <Text>!isNull</Text>}
{!'string' && <Text>!isString</Text>}
{!'' && <Text>!isEmptyString</Text>}

+18

jimji1005 on Feb 27, 2019

I know whats going wrong,

The below code works without crashing in iOS whereas it crashes in Android. I checked it snack.expo v29.0.0.

<View style={styles.container}>
        {'' && <Text style={styles.paragraph}>I am here</Text>}
</View>

Leaving aside the crash, you should not render a empty string without wrapping it in Text for now in React-Native. In these case you must do,

<View style={styles.container}>
        // Change any variable to boolean using double exclamation !!
        {!!'' && <Text style={styles.paragraph}>I am here</Text>}
</View>

By the way still this is a bug in RN, to maintain compatability either it should crash in both iOS and Android or it should emit omit empty string(‘’) altogether.

+14

ravirajn22 on Aug 21, 2018

Got the same error today with React Native 0.58.4. Was able to make it work by adding !! before a boolean expression. Hope this bug will be fixed in later React Native releases.

ArGeoph on May 6, 2019

@jamonholmgren I would expect empty strings / 0 to not crash personally, I got bit by this too, only in release.

ericlewis on Feb 23, 2019

got hit by this today 😕 Strange error message though. Workaround with ternary works; apart from a fix, maybe an eslint rule could help here too? (react-native-cli: 2.0.1 react-native: 0.58.5)

arnotixe on May 3, 2019

@hramos Would you expect an empty string and/or 0 to not crash (and instead just act as if false or null or undefined were passed)? (That would be my vote!)

We got bit by this again last week due to the client’s API switching to returning 0 instead of null in a particular area, so it started crashing without warning.

Exacerbating the problem was this ongoing issue with our exception handler, where this problem can just show a white screen and the handler doesn’t actually catch the invariant exception:

https://github.com/master-atul/react-native-exception-handler/issues/52

jamonholmgren on Feb 11, 2019

Using the ternary operator is the right approach here.

hramos on Aug 23, 2018

@ATShiTou btw interesting thing that I noticed. Let’s say I have the state nickname: null and when I fetch data and the state becomes nickname: 'alex' then app will crash. I did more tests and apparently it doesn’t work with strings on android but other types like null, undefined or an object are fine. iOS handles that without a problem though. I can check logs now

UPDATE: so actually it crashes ONLY with empty string like nickname: ''

mattermoran on Aug 21, 2018