Receiving A Message That I'm Attempting to Nest Navigators When I Try To Do Firebase Auth on React Navigation

I'm receiving the message that says if it's intentional, use "independent = {true}. I'm still pretty new at this, so any sort of help would be greatly appreciated

Here is my App. js code:

import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import { LogBox } from 'react-native';
LogBox.ignoreLogs(["Warning..."]);
LogBox.ignoreAllLogs();

import { AuthProvider, useAuth } from './pages/AuthContext';
import UnauthedStack from './pages/UnauthedStack';
import AuthStack from './pages/AuthStack';

const AppContent = () => {
  const { loggedInUser } = useAuth();
  return (
    <NavigationContainer>
      {loggedInUser ? <AuthStack /> : <UnauthedStack />}
    </NavigationContainer>
  );
};

export default function App () {
  return (
  <AuthProvider>
    <AppContent />
   </AuthProvider>
  )
}

My AuthContext.js

import React from "react";

const AuthContext = React.createContext();

export const AuthProvider =({children}) => {
    const [loggedIn, setLoggedIn] = React.useState(null);

    return (
      <AuthContext.Provider value={{loggedIn, setLoggedIn}}>
        {children}
      </AuthContext.Provider>
    );
};

export const useAuth = () => React.useContext(AuthContext);
export default AuthContext;

My AuthStack.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import HomePage from "./HomePage";

const Stack = createNativeStackNavigator();

export default function AuthStack ({navigation}){
    return(
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
               name="Home"
               component={HomePage}
               options={{headerShown:false}}>
            </Stack.Screen>
          </Stack.Navigator>
        </NavigationContainer>
    );
}

...and finally my UnauthedStack.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import LoginPage from "./LoginPage";
import RegisterPage from "./RegisterPage";

const Stack = createNativeStackNavigator();

export default function UnauthedStack ({navigation}) {
   return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Login">
            <Stack.Screen
               name="Login"
               component={LoginPage}
               options={{headerShown: false}}>
            </Stack.Screen>
            <Stack.Screen
               name="Register"
               component={RegisterPage}
               options={{headerShown: false}}>
            </Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
    );
}

I've tried looking to where to put "independent = {true}, but so far I haven't found any documentation on it

Aamir Hafiez

you are correct here, but we can sligthy update this code like...

App.js

import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import { LogBox } from 'react-native';
LogBox.ignoreLogs(["Warning..."]);
LogBox.ignoreAllLogs();

import { AuthProvider, useAuth } from './pages/AuthContext';
import UnauthedStack from './pages/UnauthedStack';
import AuthStack from './pages/AuthStack';

export const Stack = createNativeStackNavigator();

const AppContent = () => {
  const { loggedInUser } = useAuth();
  return (
    <NavigationContainer>
          {loggedInUser ? <AuthStack /> : <UnauthedStack />}
    </NavigationContainer>
  );
};

export default function App () {
  return (
  <AuthProvider>
    <AppContent />
   </AuthProvider>
  )
}

UnauthedStack.js

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import { Stack } from "./App"; // Add path to App.js Component

import LoginPage from "./LoginPage";
import RegisterPage from "./RegisterPage";

export default function UnauthedStack ({navigation}) {
   return (
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen
               name="Login"
               component={LoginPage}
               options={{headerShown: false}}>
            </Stack.Screen>
            <Stack.Screen
               name="Register"
               component={RegisterPage}
               options={{headerShown: false}}>
            </Stack.Screen>
                  </Stack.Navigator>
    );
}

do the same for AuthStack <Stack.Navigator> </Stack.Navigator>.

hope you get this.