Deep link not working when nesting have more than two levels.

[kevinwolfcr]

Hello. I am receiving an error when trying to navigate via deep link to a two-level nested router, I am receiving this error:

This is my Root navigator.

const RootNavigator = StackNavigator(
  {
    LoggedOut: {
      path: 'logged-out',
      screen: LoggedOut // StackNavigator
    },
    LoggedIn: {
      path: 'logged-in',
      screen: LoggedIn // StackNavigator
    }
  },
  {
    URIPrefix: Platform.OS === 'android' ? 'my-app://my-app/' : 'my-app://',
    headerMode: 'none'
  }
)

This is my LoggedOut navigator.

const LoggedOut = StackNavigator(
  {
    Welcome: {
      path: 'welcome',
      screen: Welcome // Component
    },
    SignUp: {
      path: 'sign-up',
      screen: SignUp // StackNavigator
    },
    SignIn: {
      path: 'sign-in',
      screen: SignIn // Component
    }
  },
  {
    headerMode: 'none'
  }
)

And this is my SignUp navigator.

const SignUp = StackNavigator(
  {
    Name: {
      path: 'name',
      screen: Name // Component
    },
    Email: {
      path: 'email',
      screen: Email // Component
    },
    Phone: {
      path: 'phone',
      screen: Phone // Component
    },
    Password: {
      path: 'password',
      screen: Password // Component
    }
  },
  {
    headerMode: 'none'
  }
)

So as you see, if I try to navigate to my-app://logged-out/welcome or my-app://logged-out/sign-in it doesn't have a problem, since the stack is StackNavigator -> StackNavigator -> Component.

But, if I try to navigate to any sub-route of sign-up, for example, my-app://logged-out/sign-up/phone, I receive the red screen error, since the stack is StackNavigator -> StackNavigator -> StackNavigator -> Component.

Anyone have the same issue? Any ideas to fix it? Is it some configuration I am missing out?

[a7ul]

Any solutions to this ?

[aaronbuchanan]

#1527

[spencercarli]

Could you put together a running example of this issue? Thanks!

[plasticine]

Yep — can confirm. The culprit seems to be related to mixing actions into state in StackRouter when there is no initial state.

https://github.com/react-community/react-navigation/blob/master/src/routers/StackRouter.js#L98

// Set up the initial state if needed
if (!state) {
  let route = {};
  if (
    action.type === NavigationActions.NAVIGATE &&
    childRouters[action.routeName] !== undefined
  ) {
    return {
      index: 0,
      routes: [
        {
          ...action,
          type: undefined,
          key: `Init-${_getUuid()}`,
        },
      ],
    };
  }

  // etc...
}

This seems like a really weird design where actions are being splatted into state, does anyone know the origin of this? Is it intentional?

[kelset]

Pinging OP @Kevin-Wolf since this issue has not been active for a while, and it's related to an old version of the lib.

Please let me know if you want this to remain open, because if I get no answer in the next 7 days I will close it.

[Ashoat]

This is some quirky StackRouter behavior similar to what I addressed in TabRouter in #3094. I agree that information from the first action should not leak into the initialization of the child routes.

[Johncy1997]

         const HomeWorks = createStackNavigator({
          Homeworks:{
                 screen:ToDo//Component
          },
         Filter:{
           screen:Filter
          },
         CreateNewHW:{
           screen:CreateHomework,
          },
          UpdateHW:{
                screen:UpdateHomework,
          },
          HomeworkDetails:{
              screen:HomeworkDetails,
           },
          Completed:{
                screen:CompletedStud,
               },
         NotCompleted:{
               screen:NotCompletedStud,
              navigationOptions:{
                   title:'Not Completed Students'
               }
         },
         },{
           initialRouteName:'Homeworks',

  headerMode:'screen',
});

const MyMenu = createDrawerNavigator({
  ViewMyProfile :{
    screen : ProfileStack, //Stack
  },
  Homework :{
    screen:HomeWorks, //Stack
  },
},{
  initialRouteName:'Homework',
  contentComponent:MyDrawer,
  drawerOpenRoute:'DrawerOpen',
  drawerCloseRoute:'DrawerClose',
  drawerToggleRoute:'DrawerToggle',
  drawerLockMode: 'locked-closed',
});

const MyLoginStack = createStackNavigator({
  LoginFirst : {
    screen:Login
  },
  LoginWithOTP:{
    screen:LoginWithOTP
  }
},{
  initialRouteName:'LoginFirst',
  headerMode:'none'
})

const MyRoot = createSwitchNavigator({
  Splash:{
    screen:Splash
  },
  Login:{
    screen:MyLoginStack
  },
  Home:{
    screen : MyMenu 
  }
},
{
  initialRouteName:'Splash'
}
);

Now, I want to navigate in the following flow:MyRoot(Splash)->MyRoot(Home/Homework)->HomeworkDetails(I have two button in this component for navigating to Completed and NotCompleted)->Completed

It is working in emulators. But after generating *.apk and installed on real device. When i click the Completed Button, app keeps stopping!! I am stucking with it past 3days. I am not able to understand this.
someone please help me!Thanks in advance.

[Ashoat]

How sure are you that you’re actually generating a new APK each time? If this issue isn’t reproable in an emulator or simulator, the issue is likely in the build process. Try making an obvious change, rebuilding the APK, and seeing if the change is reflected in the new build.

[Johncy1997]

@Ashoat Thanks for your quick reply. But, I am sorry..I have tried to build new apk lot of times. Nothing worked for me..:(( When building new apk, all other changes except this two navigation are reflecting in my new apk.

[Johncy1997]

@Ashoat I am sorry. Problem was in my side only. There was a problem in fonts and date format.It was worked in emulator:( not in real device..Anyhow i solved:)) Thank You