Expo drawer and @react-navigation/material-top-tabs conflict

I’m getting to grips with React Native and have been following the official guide to go the Expo route.

I have implemented the Expo drawer nav, but with one of my routes I am wanting tabs on the top which led me to @react-navigation/material-top-tabs. However, after adding this to my page file, I am facing the error:

Uncaught Error
Looks like you have nested a ‘NavigationContainer’ inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, wrap the container in ‘NavigationIndependentTree’ explicitly. Note that this will make the child navigators disconnected from the parent and you won’t be able to navigate between them.

After looking into the error a bit more it sounds like there will be a NavigationContainer used in both the Expo drawer and the react-navigation components, and anything else I’ve looked into shows examples of using react-navigation’s own drawer nav.

Is there a way in which I can integrate Expo’s drawer with the react-navigation tabs? Or is it worth refactoring to use react-navigation’s drawer instead, given it’s still early stages?

app/_layout.tsx

export default function Layout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer>
        {/* other drawer screens */}
        <Drawer.Screen
          name="history" // This is the name of the page and must match the url from root
          options={{
            drawerLabel: 'History',
            title: 'History',
          }}
        />
      </Drawer>
    </GestureHandlerRootView>
  )
}

app/index.tsx

const MyTabs = createMaterialTopTabNavigator({
  screens: {
    Day: HistoryDay, // app/history/day.tsx
    // other screens
  },
});

const TabNavigation = createStaticNavigation(MyTabs);

export default function Index() {
  return (
    <View style={layoutStyles.centeredView}>
      <TabNavigation />
    </View>
  );
}