'React Native : Unexpected view type nested under text node

I've got this error on Android. Just in case, I use react-native-maps. Do you know what is it from?

react-native

Solution 1:^[1]

I also got this error when I was conditionally rendering a element based on the truthiness of a non-boolean value:

<View>
  {stringVariable && <Text>{stringVariable}</Text>}
</View>

This code gives me the error. However, if I double negate string variable like so:

<View>
  {!!stringVariable && <Text>{stringVariable}</Text>}
</View>

it works.

Kind of a dumb error on my part, but it took me a while to figure out.

Solution 2:^[2]

The problem for me with this error was that somehow I managed to end up with a <View> inside of <Text>. That was not very obvious because I had a Button component that was accepting some children wrapped in a <Text> and I was using some custom component for an Icon when instantiating Button. After a while somebody wrapped the Icon in a <View> to give it some padding and that caused the issue in the end.

It took some time to figure it out but in the end I solved it. It may differ from case to case but I hope my problem inspires you in your debugging session.

Cheers!

Solution 3:^[3]

The <Text> node should not have any other child node in it. It might be that <View> is nested inside it or just any other component. So you can check for any child in the <Text> node and change your code. Also, this issue occurs only on Android.

Solution 4:^[4]

Text rendered without a `<Text>` tag

Problem

<View> some text </View>

solution

<View>
   <Text> some text </Text>
</View>

this works with me

Solution 5:^[5]

I probably have the dumbest answer to this question, because its a problem with the basics, but I looked this one up because I accidently wrote a outside the initial return statement.

so this:

return ( <View> <Text> example text </Text> ) </View>

should have been this:

return ( <View> <Text> exapmle text </Text> </View> )

Solution 6:^[6]

Always wrap plain text inside "< Text> </ Text>" if you are using "< View>".

example: //Wrong way: < View> Hello</ View>

//Right way: < View>< Text> Hello </ Text></ View>

Solution 7:^[7]

For me it was a simple space outside of a Text tag. Really hard to find. So I had

<View>
  <View>
    <Text>Some text</Text>
  </View> <- Space here
</View>

To narrow it done I had to just comment out chunks until I figured it out.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	glassy321
Solution 2	Peter_Fretter
Solution 3
Solution 4	Ù…ØµØ·ÙÙ‰
Solution 5	akili Sosa
Solution 6	MD ALI SHAHANSHAH
Solution 7

'React Native : Unexpected view type nested under text node

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Text rendered without a <Text> tag

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]