React.children.only expected to receive a single react element child Navigator

Question

I tried too many topic helps but that doesn't help me to fix this error, maybe cuz i'm newbie to react-native.

here is the code which gives error.

render() {
  return (

  <Provider store={store}>

    <Navigator
      initialRoute={{ name: 'Wake' }}
      configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
      renderScene={RouteMapper}
    />

    <Tabs />



  </Provider>


 );
}

"React.children.only expected to receive a single react element child" i get this error when i run it. please help. iam aware that there are lot of other topics posted similar but none gives a proper solution to my problem.

Answer 1

The react-redux <Provider /> component expects its child prop to be a single ReactElement, the root component of your application. That is probably where this error is coming from.

Props

• store (Redux Store): The single Redux store in your application.
• children (ReactElement) The root of your component hierarchy.

Example

ReactDOM.render(
  <Provider store={store}>
    <div>
        <MyRootComponent/>
        <OtherComponent1/>
        <OtherComponent2/>
        // {...} as longer you let the component inside one global component 
        // - here the divs - React considers you have only one child. That it. 
    </div>
  </Provider>,
  rootEl
);

Source: https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store

Answer 2

Might be late to the post, but you could wrap React.Fragment around your Navigator and Tab to get around that error. https://reactjs.org/docs/fragments.html

render() {
  return (

  <Provider store={store}>
    <React.Fragment>
       <Navigator
         initialRoute={{ name: 'Wake' }}
         configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
         renderScene={RouteMapper}
       />

       <Tabs />
    </React.Fragment>


  </Provider>


 );
}

Answer 3

The above answers did not give you a code example, I will add some code that applies to your situation:

const Root = () => {
  return (
   <div>
    <Navigator
      initialRoute={{ name: 'Wake' }}
      configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
      renderScene={RouteMapper}
    />

    <Tabs />
   </div>
 )   
}


render() {
  return (
    <Provider store={store}>
      <Root />
    </Provider>
  );
}

You basically need to wrap up your Nav and Tabs components inside a Root component to render it within the Provider component, as said in other answers. Hope this helps!