Invariant Violation: Text strings must be rendered within a component

Question

I\'ve upgraded from RN 0.54 to 0.57 and my app has pretty much fallen over due to using React Native Elements.

I took use of their error functionality on TextI

Answer 1

For me, it happened because of an unopened curly brace inside JSX.

<View>
        {events.map(event => {
          return (
            <Card title={event.summary}>
              <Text>Date: {event.start.dateTime}</Text>
            </Card>
          );
        })}
        } <------------ that was the culprit
</View>

Answer 2

{this.state.password.length > 0 && <Text>}

This will throw the same error, because it returns undefined. We can render it like this -

{this.state.password.length > ? <Text> : null}

Answer 3

For me the following code works fine, as long as this.state.error === undefined or it is not an empty string.

render() {
  return (
    <View>
      {this.state.error &&

        <Text>
          Error message: {this.state.error}
        </Text>
      }
    </View>
  );
}

If the error state is changed to empty string '', you will have the aforementioned exception: Invariant Violation: Text strings must be rendered within a <Text> component

The reason of that is, when this.state.error === '', the following expression will be evaluated as empty string, i.e., '', and this will cause Invariant Violation: Text strings must be rendered within a <Text> component

{this.state.error &&

  <Text>
    Error message: {this.state.error}
  </Text>
}

When this.state.error === undefined, the expression will be evaluated as undefined, which is what we expect, and it's fine.

Answer 4

I've shot myself in the foot too many times over this, so I'm leaving this here for the next person not to...

Whenever you see

Invariant Violation: Text strings must be rendered within a <Text> component

99% of cases will be caused by using conditional rendering with only && instead of ternary ? : statements. Why? Because when your condition is null or undefined, there are no components there, as opposed to empty array which would have showed an empty space and save your life from the red screen of hell.

Change ALL OF YOUR LOGICAL CONDITIONAL RENDERS into ternary renditions.

ie:

DON'T DO

widgetNumber === 10 && <MyComponent />

DO DO

widgetNumber === 10 ? <MyComponent /> : []

Every Single Time. Please. For the love of react native.

Answer 5

Sometimes Prettier or your code formatter will add this to your JSX when you save.

<View>
{' '}
</View>

Remove this and you should be fine.

Answer 6

From reading other answers here, this error message is vague and is shown for various reasons. I've gotten it when writing comments or even small white-space within views (crazy yeah...)

for example: <View> {props.children} </View>

must be changed to: <View>{props.children}</View>