React Native : Unexpected view type nested under text node

Question

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

Answer 1

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!

Answer 2

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.

Answer 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.

Answer 4

Text rendered without a <Text> tag

Problem

<View> some text </View>

solution

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

this works with me