Nested Navigation in React Native

Question

Here is my code. I want to create navigation like Swiper -> Auth -> Passcode -> App. As you can see here, I want that PassCode Switch Navigator inside AuthStack but I am getting the error as here Erro Image Links.

const AuthStack = createStackNavigator({ 
    SignIn: SignInScreen,
    OTP:OTPScreen,
    PassCodeNavigation : PassCodeStack 
// I want to put Switch Naviagtor here.
// Error is : "The Component for route 'PassCodeNavigation' must be a 
// React Component.

  },
    {
      initialRouteName:'SignIn'
    }
  );

const PassCodeStack = createSwitchNavigator(
  {
    PassCodeLoading: PassCodeLoadingScreen,
    PassCode: PassCodeScreen,
  },
  {
    initialRouteName:'PassCodeLoading'
  }
);

const MyAppNavigation = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
    Swiper:SwiperScreen
  },
  {
    initialRouteName: 'AuthLoading',
  }
)

I am new to React-native. I need a better documentaion on react-native nested navigation apart from documentation.

Answer 1

You need to reorder the creation of stacks or routes.

Error is PassCodeStack cant be used before initialize because it is undefined hence it says it must be a component.

const PassCodeStack = createSwitchNavigator(
  {
    PassCodeLoading: PassCodeLoadingScreen,
    PassCode: PassCodeScreen,
  },
  {
    initialRouteName:'PassCodeLoading'
  }
);

const AuthStack = createStackNavigator({ 
    SignIn: SignInScreen,
    OTP:OTPScreen,
    PassCodeNavigation : PassCodeStack 
// I want to put Switch Naviagtor here.
// Error is : "The Component for route 'PassCodeNavigation' must be a 
// React Component.

  },
    {
      initialRouteName:'SignIn'
    }
  );


const MyAppNavigation = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
    Swiper:SwiperScreen
  },
  {
    initialRouteName: 'AuthLoading',
  }
)