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.

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

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(even empty string), it must be wrapped with <Text /> in React Native, which is different from web.

In my case, it was a semicolon at the end of JSX syntax.

// wrong:
<View>
  <MyComponent>;
</View>

// correct:
<View>
  <MyComponent>
</View>

This occurs when you use a string or numeric values in && operators.

For example:

const [a, setA] = useState('')
const [b, setB] = useState(0)

Here, both a && <View /> and b && <View /> will throw this error.

You need to have this conditional value as an true/false, null, or undefined data type.

Instead of using the string and numeric data types straight forward, you should convert them to Boolean type.

Correct implementation should be:

!!a && <View /> and !!b && <View />

or

for negation; !a && <View /> and !b && <View />

Delete space between components outside

<Text></Text>

Ex. Don't use

<Button> <Text>hi</Text></Button> 

But use

<Button><Text>hi</Text></Button>

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.

Image of the Error code

As mentioned in the above image I also encountered this error due to the semi-colon ';'

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>

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

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

For me it was the wrong import with IntelliSense. It imported the Button from'react-native-web' instead of 'react-native'. Once you run on the phone you get the this error.

In my case, it was a random letter after the self-closing component like this

<Card />r

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>

i'm an absolute beginner to react native and my mistake was importing Text, Flatlist from react-native-web instead of just react-native, it's automatically happens on vs code and i don't know why!

DON'T

import { Text, FlatList, StyleSheet } from "react-native-web";

DO

import { Text, FlatList, StyleSheet } from "react-native";

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

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

<View>
{' '}
</View>

Remove this and you should be fine.

As for me I had this error because of a trailing ';' I changed :

<Divider orientation="horizontal" />;

To :

<Divider orientation="horizontal" />

In my case, I had to remove space between View tag and Text tag from

<View>  <Text style={{ color: "white"}}>Start</Text> </View>

to

<View><Text style={{ color: "white"}}>Start</Text></View>

If there is any space between your and (in same line) then also this error can come.

**eg: <Text> <Button>click me<Button><Text>**

           ^(make sure that you have no space if it is in same line)



  

make sure to avoid space between two tags if it is in same line.

Solution

!! will resolve this issue.

{!!error && <Text>{error}</Text>}

Explanation

• if we use single not ! operate and assign empty "" string then !"" will become true and will render empty string because we are converting string to boolean !"" => true

I had the same issue and the mistake was space(s) between the opening/closing tag of the element and its child/content, such as <Provider> {children} </Provider>.

Note: Remove any space close to {children}.

Correct:

<Provider value={something}>{children}</BlogContext.Provider>

Wrong:

<Provider value={something}>{children} </BlogContext.Provider>
//                                   ^^^ - space that causes the error

Also wrong:

<Provider value={something}> {children}</BlogContext.Provider>
//                         ^^^ - space that causes the error

I encountered the same error message in VSCode yet I didn't have /* Comments */ or any expressions. The solution was to remove the formatting in something like textedit or word and copy+paste the code back to vscode.

I do not know why or how it works (perhaps it specifically happens in VSCode), but the formatting issue is something I also have experienced with SDL in graphql...

For me it was because I added a comment after another component.

Thankfully, Git helped me with the trial and error process.

None of the answers were working for me as I searched my code up and down and couldn't find a typo or extra spacing as I use prettier, so checked it's settings as well.

The error for me was occurring because I was rendering a UI like this:

distance && (<Text>...

When the value of distance is 0 that is what was causing this error for me. Changing it to distance !=== undefined fixed it.

Hope this helps someone someday as it took me a while to find this culprit.

When I format the code it's putting ; after the ; which causing the error. Before:

export default () => {
  return (
    <BlogProvider>
      <App />;
    </BlogProvider>
  );
};

Now if you remove the ; the error while resolve. So, make sure your formatter does not add ; at the end of line automatically. After:

export default () => {
  return (
    <BlogProvider>
      <App />
    </BlogProvider>
  );

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

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

For me it was due to the misplacement of closing > in TouchableOpacity React native touchable Opacity.

Faulty code :

<TouchableOpacity>
        onPress={() => this.setState({ showOverLay: true })}
          <Image
            source={cardImage}
            resizeMode="contain"
            style={[
              styles.cardImage, cardImageStyle
            ]}
          />
</TouchableOpacity>

Good code :

  <TouchableOpacity
        onPress={() => this.setState({ showOverLay: true })}>
          <Image
            source={cardImage}
            resizeMode="contain"
            style={[
              styles.cardImage, cardImageStyle
            ]}
          />
</TouchableOpacity>

Conditions with '' (empty string) not working. Change them to null

Not Working:

<ButtonBorderLarge
    buttonText={'Choose certificate'}
    onPressHandler={pickCertificate}
    icon={docName ? 'check' : ''}
/>

Working:

<ButtonBorderLarge
    buttonText={'Choose certificate'}
    onPressHandler={pickCertificate}
    icon={docName ? 'check' : null}
/>