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

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 TextInput components which basically enabled props that you could style the error message and set your error message. Very convenient, however the upgrade has broke these and I'm now greeted with this error:

So I've delete that code and the error disappears, however I'm still receiving the issue when I run this code:

{ this.state.event.cards[i].fields[j].error && 

  <Text style={{ color: '#e74c3c', fontSize: 14, paddingLeft: 5 }}>
    {this.state.event.cards[i].fields[j].error}
  </Text>
}

When I begin to type in to a text input, it sets my error message to an empty string, so if an error is returned typing in the field will make the error go away.

As soon as this.state.event.cards[i].fields[j].error becomes a string, I get returned this error. However you can see I check to see if error exists, then I just display the error, or try to at least.

Another set of eyes would be grateful on this one.

Solution 1:

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 resolves to undefined, there are no components there, as opposed to null or an empty array which would have safely 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 /> : null

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

Solution 2:

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.

Solution 3:

Also occurs when you have /* Comments */ in your return() function.

Solution 4:

I'd use !! which I call bang bang operator to boolianize error. That should work.

{!!this.state.error && (
  <Text>
    Error message: {this.state.error}
  </Text>
)}

If error is a string, whatever your text should be wrapped with <Text /> as the error message says in React Native, which is different from web.