How to replace createAppContainer with NavigationContainer? (using compatibility layer module)

Question

I am trying to migrate from v4 to v5, and they've removed createAppContainer and are saying to use NavigationContainer in its place.

I'm using the createCompatNavigatorFactory stuff from the compatibility layer docs.

Before, I'd pass my main navigator to createAppContainer, and then use that component to wrap my entire app.

Now the docs say to simply use NavigationContainer, but they don't say anything about how to apply this to people using the compatibility layer.

It's confusing. My code use to look like this:

const MainNavigator = createStackNavigator(...)
const AppNavigator = createAppNavigator(MainNavigator)

and in App.js

render() {
   <View>
    <AppNavigator ref={navigationRef} />
  </View>
}

Now I've switched to the following:

 const MainNavigator = createCompatNavigatorFactory(createStackNavigator)(...)

and in App.js

render() {
   <View>
    <NavigationContainer ref={navigationRef} />
  </View>
}

I'm wondering how you connect the navigationContainer to the stuff made by the compat navigator factory function. I'm wondering why there's nothing about this in the docs...

Gravitative

Answer 1

render() {
  return (
    <NavigationContainer ref={navigationRef}>
      <MainNavigator />
    </NavigationContainer>
  );
}

https://reactnavigation.org/docs/en/getting-started.html

Jamboree

Thanks! In the docs it says: <NavigationContainer> {/* Rest of your app code */} </NavigationContainer> – Gravitative