React-navigation "you should only render one navigator warning" conflicts with React context

Viewed 285

In my app I have a stacknavigator that renders a tabnavigator. I want to share data between the tabs and for that I decided to use the Context API React provides.

let Tabs = createMaterialTopTabNavigator(
  {
    Info: (e: any) => <TabOne />,
    Media: (e: any) => <TabTwo />,
  }
)

If I export this and hand it to the stacknavigator everything is working fine. But when implementing the Context API with another class:

class ContextWrapper extends React.Component {
  render() {
    return (
      <MyContext.Provider value={data}>
        <Tabs />
      </MyContext.Provider>
    )
  }
}

And hand this class to the stacknavigator I get this warning of

"you should only render one navigator "

The app still works this way, but I have this warning in the console.

I am aware of this page: https://reactnavigation.org/docs/en/common-mistakes.html and it's proposed solution of static router but this way it gives me this error:

Cannot read property 'router' of undefined

Any on has a working solution for use with the Context API. Or any other way of sharing data between tabs?

0 Answers
Related