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

Just remove the comments from the code, then it will work fine. I don't know any other alternative by the way! :)

Answer 2

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.

Answer 3

In my case it occurred because comments in render function

// Some comment here

Solutions:

• Remove the comment
• or make it like this {/* Same comment here*/}

Answer 4

Had the same problem and @serdasenay comment made me realize the root cause.

Using the syntax {condition && <Element/>} is not wrong per se, but it's important to know whats going on.

The root of the problem is logic short-circuiting. In Javascript logic expressions evaluates, and && evaluates to the last true equivalent value. But not to true, but to the actual value before it's cast to boolean. That's what acctually allow this syntax to begin with. Since <Element/> is always true if condition is true, the expression evaluates to <Element/>

The problem arises when the condition is false. When a && expression fails, it evaluates to the first value i.e condition. But before it being cast to boolean. So, if you use a direct string or number as condition and it evaluates to false the logic expression will evaluate to that string or number. Ex.: {array.length && <List/>} with a empty array evaluates to {0} which throws the error.

The solution is to make sure condition is a real boolean value (and that works because React can deal with rendering booleans - it think React just ignores them). So do the following: {array.length > 0 && <List/>}

Answer 5

This occurred for me because I was using a lower-case function name by accident:

export const p = (props) => {
  return (
    <Text style={[styles.p]}>{props.children}</Text>
  );
};

Should be:

export const P = (props) => {
  return (
    <Text style={[styles.p]}>{props.children}</Text>
  );
};

Notice in the second one the p is capitalized. This is needed in order for the components to be detected as React Native components.

Answer 6

Use this code given below if the initial value is an empty string. Or conditionaly check with the initial value. Here I conditionaly check when the error is not empty then show the error.

{this.state.error !== '' && (
    <Text>
      {this.state.error}
    </Text>
)}