Nested Navigator - React Native

Question

Cześć! Robię apkę w react native i chcę użyć React Navigation do nawigacji. Kod wygląda tak:

// In App.js in a new project

import * as React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import firebase from "firebase";
import { firebaseConfig } from "./firebase-config";
import LoadingScreen from "./screens/Login/LoadingScreen";
import WelcomePage from "./screens/Login/WelcomePage";
import LoginPage from "./screens/Login/LoginPage";
import SignUpEmail from "./screens/Login/SignUpEmail";
import Home from "./screens/Home/Home";
import CurrentReadBookDetails from "./screens/Home/CurrentReadBookDetails";
import LibraryBookDetails from "./screens/Home/LibraryBookDetails";
import BookScanner from "./screens/Home/BookScanner";
import BookDetails from "./screens/Home/BookDetails";
import SearchResult from "./screens/Search/SearchResult";

if (!firebase.apps.length) firebase.initializeApp(firebaseConfig); //musimy sprawdzic czy aplikacja zostala juz zainicjowana czy nie, zeby za kazdym razem nie inicjowac apki
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabNavigator = () => (
  <Tab.Navigator initialRouteName="HomeScreen">
    <Tab.Screen name="HomeScreen" component={Home} />
    <Tab.Screen name="Search" component={SearchResult} />
  </Tab.Navigator>
);

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="LoadingScreen">
        <Stack.Screen name="LoadingScreen" component={LoadingScreen} />
        <Stack.Screen name="WelcomePage" component={WelcomePage} />
        <Stack.Screen
          name="Home"
          component={TabNavigator}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="LoginPage" component={LoginPage} />
        <Stack.Screen name="SignUpEmail" component={SignUpEmail} />
        <Stack.Screen name="BookScanner" component={BookScanner} />
        <Stack.Screen name="BookDetails" component={BookDetails} />
        <Stack.Screen
          name="LibraryBookDetails"
          component={LibraryBookDetails}
        />
        <Stack.Screen
          name="CurrentReadBookDetails"
          component={CurrentReadBookDetails}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Problem jest taki, że zagnieździłem TabNavigator w StackNavigator. I teraz gdy próbuje nawigować do Home albo Search, ekran jest pusty... Mimo, że widzę, że dane w console.logu się ładują. Więc co jest nie tak? Routy ze Stack.Navigator'a działają poprawnie, tylko te z zagnieżdżonego pokazują pusty ekran.

Próbuję nawigować do Home i Search w następujący sposób:

navigation.navigate("Home", { screen: "HomeScreen" });

Prosiłbym o pomoc :/

Answer 1

Problem był albo z nieprawidłową wersją React Navigation, albo z wersją react-native-screens. Już wszystko śmiga :)