Навигатор с вложенными вкладками и заголовком

Question

Я пытаюсь добиться чего-то похожего на изображение ниже.

По сути, я хочу иметь навигатор с вложенными вкладками и разместить его под пользовательским заголовком. Основная вкладка навигатора находится внизу. Навигатор с вложенными вкладками находится вверху с надписью «Recent, Tab2, Tab3». Пока все готово, но я не могу заставить вложенный навигатор поместить себя под пользовательский заголовок. Есть ли способ, которым я могу это сделать? Любая помощь будет принята с благодарностью.

Вот код навигаторов:

const TopNav = TabNavigator(
  {
    Recent: { screen: Recent },
    Tab2: { screen: Tab2 },
    Tab3: { screen: Tab3 },
  },
  {
    tabBarOptions: {
      activeTintColor: "#f67425",
      activeBackgroundColor: "#ffffff",
      inactiveTintColor: "#4a4a4a",
      inactiveBackgroundColor: "#ffffff",
      // showLabel: false,
    },
    tabBarComponent: TabBarBottom,
    initialRouteName: "Messages",
    tabBarPosition: "top",
    swipeEnabled: false,
    animationEnabled: false,
  }
);

const BottomNav = TabNavigator(
  {
    Search: { screen: Search },
    Messages: { screen: TopNav },
    Contacts: { screen: Contacts },
    More: { screen: More },
  },
  {
    tabBarOptions: {
      activeTintColor: "#f67425",
      activeBackgroundColor: "#ffffff",
      inactiveTintColor: "#4a4a4a",
      inactiveBackgroundColor: "#ffffff",
      // showLabel: false,
    },
    tabBarComponent: TabBarBottom,
    initialRouteName: "Messages",
    tabBarPosition: "bottom",
    swipeEnabled: false,
  }
);