"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>

[jimji1005]

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>}

[ravirajn22]

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.