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 understand. Maybe someone can tell me about what it says or how to fix the problem.

Trying to add a root view with an explicit id already set. React Native uses the id field to track react tags and will overwrite this field. If that is fine, explicitly overwrite the id field to View.NO_ID before calling addRootView.
addRootViewGroup
    NativeViewHierarchyManager.java:504
addRootView
    NativeViewHierarchyManager.java:496
addRootView
    UIViewOperationQueue.java:572
registerRootView
    UIImplementation.java:129
addRootView
    UIManagerModule.java:211
attachRootViewToInstance
    ReactInstanceManager.java:897
setupReactContext
    ReactInstanceManager.java:855
access$1000
    ReactInstanceManager.java:109
run
    ReactInstanceManager.java:821
handleCallback
    Handler.java:739
dispatchMessage
    Handler.java:95
dispatchMessage
    MessageQueueThreadHandler.java:31
loop
    Looper.java:148
run
    MessageQueueThreadImpl.java:194
run
    Thread.java:818

I'm not sure which information is necessary to help me, but these are at least the dependencies of my project (from package.json):

"dependencies": {
  "apisauce": "^0.14.0",
  "babel-preset-expo": "^4.0.0",
  "format-json": "^1.0.3",
  "lodash": "^4.17.2",
  "native-base": "^2.3.2",
  "prop-types": "^15.5.10",
  "querystringify": "0.0.4",
  "ramda": "^0.24.1",
  "react": "16.0.0-alpha.12",
  "react-native": "0.48.4",
  "react-native-animatable": "^1.2.4",
  "react-native-config": "^0.6.0",
  "react-native-elements": "^0.17.0",
  "react-native-i18n": "^2.0.6",
  "react-native-responsive-ui": "^1.1.1",
  "react-native-simple-encryption": "^1.2.1",
  "react-native-swiper": "^1.5.13",
  "react-native-vector-icons": "^4.4.0",
  "react-navigation": "^1.0.0-beta.13",
  "react-redux": "^5.0.2",
  "redux": "^3.6.0",
  "redux-persist": "^4.1.0",
  "redux-saga": "^0.15.6",
  "reduxsauce": "0.4.1",
  "seamless-immutable": "^7.0.1"
},
"devDependencies": {
  "@storybook/addon-storyshots": "^3.2.12",
  "@storybook/react-native": "^3.2.12",
  "babel-jest": "21.2.0",
  "babel-plugin-ignite-ignore-reactotron": "^0.3.0",
  "babel-preset-es2015": "^6.18.0",
  "babel-preset-react-native": "3.0.2",
  "enzyme": "^2.6.0",
  "husky": "^0.13.1",
  "ignite-ir-boilerplate": "^2.1.1",
  "jest": "21.2.1",
  "mockery": "^2.0.0",
  "react-addons-test-utils": "~15.4.1",
  "react-dom": "16.0.0-alpha.12",
  "react-test-renderer": "16.0.0-alpha.12",
  "reactotron-react-native": "^1.12.0",
  "reactotron-redux": "^1.11.1",
  "reactotron-redux-saga": "^1.11.1"
},

Answer 1

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;