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

In my case, this error occurred due to the presence of semi-colon ';' at the end of the closing of Text tag. For all those who don't get the appropriate answer above, try this. By removing semi-colon, the error disappeared.

Answer 2

try this :

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

Answer 3

I had the same problem, In my case I had an <AppText> component which shows simple formatted <Text> under the hood.

First code was like

<AppText> </AppText>

while I was trying different things I just wrote it with self-closing syntax

<AppText />

then problem was suddenly solved.

I think it was just about a special & invisible character I wrote between tags by mistake or this character was coming from VSCode by auto-complete feature or snippets, because I couldn't repeat the error by placing a space.

Answer 4

 <React.Fragment>
      {this.props.title ? (
        <React.Fragment> 
          <Text>  true </Text>
        </React.Fragment>
        ):(             
           <React.Fragment> 
          <Text>  false </Text>
          <Text>  false </Text>
        </React.Fragment>

You have to wrap with View tag or React.Fragment tag and inside you need also wrap if element more then one

Answer 5

this.state.recording ?(<Text>{this.secondsToMMSS(this.state.seconds)}</Text>) :                                     (null)

text string must be rendered with in component

Answer 6

This usually happens when you do inline conditional rendering. You should delete white space between Text and your condition like below.

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