React.children.only is expected to receive one child response element navigator

Question

I tried too many questions, but that does not help me fix this error, maybe because I'm new to reacting to it.

here is the code that gives the error.

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

"React.children.only is expected to receive one child of the response." I get this error when I run it. please help. iam knows that there are many other topics published, but no one gives the correct solution to my problem.

Answer 1

The response-redux <Provider /> component expects its child support to be the only ReactElement, the root component of your application. This is probably a mistake.

Props

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

Example

 ReactDOM.render( <Provider store={store}> <MyRootComponent /> </Provider>, rootEl ); 

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

Answer 2

The redux provider component assumes that there is only one child. You give him two children, Navigator and tabs. Wrap everything inside the Supplier in one component.

Answer 3

There is no code example in the above answers, I will add code that is applicable to your situation:

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

Basically you need to wrap the Nav and Tabs components in the root component in order to display it in the Provider component, as said in other answers. Hope this helps!