Search code examples
react-nativereact-navigationreact-navigation-stack

React Navigation - Empty screen after closing the app and click on back

I'm using react-navigation(v4) with the following structure.

Switch Navigator

export const RootNavigator = createSwitchNavigator(
  {
    naoLogado: { screen: NaoLogadoNavigator },
    logado: { screen: PrincipalDrawerNavigator }
  },
  {
    initialRouteName: "naoLogado"
  }
)

Then, on NaoLogadoNavigator I have the following:

import { createStackNavigator } from "react-navigation-stack"

export const NaoLogadoNavigator = createStackNavigator(
  {
    cadastro: { screen: CadastroScreen },
    login: { screen: LoginScreen },
    onboard: { screen: OnboardScreen },
  },
  {
    initialRouteName: "onboard",
  }
)

The problem happens when: 1. From Onboard Screen I navigate to Login 2. Close the App 3. Click on the Back at the Header of Navigation 4. Blank screen appears

Step 1

enter image description here

Step 2

enter image description here

Step 3 - Closing the app

enter image description here

Step 4 - Open again and touching on Back

enter image description here

SOLVED - RESOLUTION BELOW

Firstly thanks to Gaurav-Roy for his time helping me.

On NaoLogadoNavigator I changed the createStackNavigator to createNativeStackNavigator from react-native-screens/createNativeStackNavigator. The final version of file seems like this now:

import createNativeStackNavigator from "react-native-screens/createNativeStackNavigator"

export const NaoLogadoNavigator = createNativeStackNavigator(
  {
    cadastro: { screen: CadastroScreen },
    login: { screen: LoginScreen },
    onboard: { screen: OnboardScreen },
  },
  {
    initialRouteName: "onboard"
  }
)
Solution

  • SOLVED - ALSO EDITED ON THE QUESTION

    Firstly thanks to Gaurav-Roy for his time helping me.

    On NaoLogadoNavigator I changed the createStackNavigator to createNativeStackNavigator from react-native-screens/createNativeStackNavigator. The final version of file seems like this now:

    import createNativeStackNavigator from "react-native-screens/createNativeStackNavigator"

export const NaoLogadoNavigator = createNativeStackNavigator(
  {
    cadastro: { screen: CadastroScreen },
    login: { screen: LoginScreen },
    onboard: { screen: OnboardScreen },
  },
  {
    initialRouteName: "onboard"
  }
)