React Native error: Raw " " must be wrapped in an explicit <Text> Component

Question

Hi, I am having this error in react native and cannot figure out what is causing it. Help would be greatly appreciated.

Thank you

Answer 1

The issue is whitespace. Using tabs however does not count as whitespace. Try removing the space between the tag and the comment in lines 32 and 37.

<View> {/*green*/}

should be either

<View>{/*green*/}

or

<View>
    {/*green*/}

Answer 2

I encountered a similar error when checking whether to render a component in the following manner:

{somevariable && <Text>abcd</Text>}

Whenever somevariable was 0, that somevariable would be interpreted as something that was supposed to be rendered and thus 0 is an invalid React Element. To resolve this, I made sure that the first expression always evaluated to a boolean.

{!!somevariable && <Text>abcd</Text>}