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

Jowens4954
July 12, 2024
84 views
1 vote
2 Answers

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

Answers

You only need to have only one Navigation Container for the whole App.

I see that you used Navigation Container in your App.js, AuthStack.js and UnauthedStack.js.

Instead keep the Provider component only in your App.js, and remove Proivider from other two Components.

Also you do not need multiple Stack.Navigators instead you can use just one which you can keep in your App.js

I would like to suggest you to create

const Stack = createNativeStackNavigator();

only once so that its instance is created only once in the app. You can keep this in your App.js and export it from there like,

export const Stack = createNativeStackNavigator();

and then import it in your other two components of (AuthStack.js and UnauthedStack.js)

so now your code would like as follows:

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>
      <Stack.Navigator initialRouteName="Login">
          {loggedInUser ? <AuthStack /> : <UnauthedStack />}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

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

My AuthStack.js

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Stack } from "./App"; // Add path to App.js Component

import HomePage from "./HomePage";

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

and,

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.Screen
               name="Login"
               component={LoginPage}
               options={{headerShown: false}}>
            </Stack.Screen>
            <Stack.Screen
               name="Register"
               component={RegisterPage}
               options={{headerShown: false}}>
            </Stack.Screen>
        </>
    );
}

Refer this for more details on creating auth flows with react navigation

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.

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers