React Native error message: Trying to add a root view with an explicit id already set

Question

I am currently developing an application with React Native. The basis was Ignite. At the moment, very often when I start the application, I get an error message that I do not un

Answer 1

If you are getting something like the screenshot below , Please try reloading the app by tapping the reload button. I was getting this error if I made some changes in code that already had some exception/error.

Answer 2

Shake the phone and you will get popup options, Stop the following things,

• Debug JS Remotely
• Disable Live Reload
• Disable Hot Relaoding

After that just reload the page, It will work.

Answer 3

I noticed that this happens when you declare variables or properties after exporting your component. For example if you do the following:

export default SignInLayout extends React.Component {
    render() {
        <Header />
        <Content />
        <Footer />
    }
}

const styles = Stylesheet.create({
    red: {
      color: red
    }
});

You get the error Trying to add a root view with an explicit id already set.

To fix this, either move your variable declarations up, before exporting your component. Or You can still keep your variable declarations at the bottom by changing the above code to only export the component at the end.

SignInLayout extends React.Component {
    render() {
        <Header />
        <Content />
        <Footer />
    }
}

const styles = Stylesheet.create({
    red: {
      color: red
    }
});

export default SignInLayout;