React Native error: Raw “ ” must be wrapped in an explicit 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

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

Answer 2

I have already solved the problem, the answer is need to add a space:

 <View style={{width:40, height:40, backgroundColor:"green", margin:5}}>
                    <Text style={{fontSize:18}}>格子{this.state.size1}</Text>
                </View>

not

格子{this.state.size1}

Answer 3

You need to remove whitespace between tag. Take a look at each or put show whitespace in webstorm Preferences | Editor | General | Appearance

Answer 4

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 5

I also encounter this error, but in my case I accidentally modified / auto formatted some .js files and messed up the JSX. And I cannot easily trace the source of the JSX component I messed up. The way I solved my problem surprisingly is to delete the node_module folder and reinstall all the node packages by npm install at the root folder of your project.

Answer 6

On latest releases, you can try the following, getting stack traces