Реагировать на собственный createStackNavigator внутри createSwitchNavigator

Question

Я пытаюсь создать такую ​​структуру:

- Landing page
  - Login button
  - Search button

Когда я нажимаю на кнопку входа, я перехожу на страницу №проблема:

Однако, если я нажимаю кнопку поиска, она показывает это:

Вот как выглядит целевая страница только с заголовком createStackView.

Предполагается, что содержимое после нажатия кнопки поиска представляет собой страницу с целевым текстом поиска.

Вот мой код:

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { createStackNavigator, createSwitchNavigator } from "react-navigation";

import Landing from "./src/components/Landing";
import Login from "./src/components/Login";

import SearchLanding from "./src/components/Landing";
import SearchByText from "./src/components/SearchByText";
import SearchByScan from "./src/components/SearchByScan";

const AppStack = createSwitchNavigator({
 Landing: { screen: Landing },
 Login: { screen: Login },
 Search: {
  screen: createStackNavigator({
    SearchLanding: { screen: SearchLanding },
    SearchByText: { screen: SearchByText },
    SearchByScan: { screen: SearchByScan }
  })
}
});

class App extends Component {
 render() {
   return <AppStack />;
 }
}

export default App;