Как настроить навигацию React с помощью BottomTabNav и MaterialTopTabNavigator

Question

Желаемый результат

Я создаю приложение, которое использует BottomTabNav в качестве основной навигации между экранами.

Я также хочувключить три кнопки в панели в верхней части большинства экранов.Самая левая кнопка должна открывать ящик с левой стороны экрана, а две другие кнопки будут переходить к определенным экранам.

Каков наилучший способ управления навигацией для верхней панели, как указано?

Что я пробовал

Я создал bottomTabNav, но я не уверен, что лучший способ создать верхнюю панель навигации, так как яне знаю, как использовать оба на одном экране в React Navigation 3.0, и потому что мне нужно, чтобы одна из кнопок открыла ящик с левой стороны экрана.

BottomTabNav

const BottomTabNav = createBottomTabNavigator({
    Home: {
      screen: HomeScreen,
    },
    Instant: {
      screen: Instant
    },
    Profile:{
      screen: Profile
    },
    Log: {
      screen: StartCompConfirm
    },
    InstantCompScreen: {
      screen: InstantCompScreen
    },
    Stats: {
      screen: StatsComponent
    }
  },
  {
    tabBarComponent: CustomTabNav,
    initialRouteName: "Home",  
  });

Навигатор переключателя аутентификации

const AuthStack = createSwitchNavigator({ //this was a stack navigator in the example but that was causing state issue in guesture file so I switched to Switch Navigator
  Signup: {
    screen: SignupScreen
  },
  SignupAddFriends: {
    screen: SignupAddFriends
  },
  Login: {
    screen: LoginScreen
  },
  ForgotPassword: {
    screen: ForgotPasswordScreen
  },
});

AppContainer

const AppContainer = createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: BottomTabNav,
    Auth: AuthStack,
    TopNav: TopTabNav //TODO: I need to figure out how to nest the top navigator inside of the bottom navigator I think
  },
  {
    initialRouteName: 'AuthLoading' 
  }
));

export default AppContainer;