React Native - There is no route defined for Login

user_6942249 0
Viewed 3408

I'm learning react native with configuring tabNavigator, DrawerNavigator, and StackNavigator into one without NativeBase or Expo with a single react-navigation library.

I achieved it but there comes an error when I perform some specific sequence in my application.

The application starts with Tab Screen. -> Change Tab -> Open Drawer -> Goto Stack -> open Drawer and then go to Tabs gives this error.

Here is my code :

App.js

import React from 'react';
import {Drawer} from "./src/navigation/MergedNavigator";
import {View,Text} from "react-native";

const App = () => (
    <View style={{flex: 1,backgroundColor: '#293656'}}>
        <Drawer />
    </View>
);

export default App;

MergedNavigator.js

import {DrawerNavigator,StackNavigator,createBottomTabNavigator} from 'react-navigation';

// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';

//plain

export const stack = StackNavigator({
    DetailScreen:{screen:DetailScreen},
    MainScreen:{screen:MainScreen}
},{
    initialRouteName:'DetailScreen'
});

const secondStack = StackNavigator({
    RegisterScreen:{screen:RegisterScreen},
    ForgotScreen:{screen:ForgotScreen}
},{
    initialRouteName:'ForgotScreen'
})

export const Tabs = createBottomTabNavigator({
    Login:{screen:LoginScreen},
    TabOne:{screen:secondStack},
    TabTwo:{screen:TabTwo}
},{
    animationEnabled:true
})

export const Drawer = DrawerNavigator({
    Tabs:{screen:Tabs},
    Stack:{screen:stack}
})

And all other imported stack screen has nothing but the title. What's the problem here with my code? Or is there any better way I can achieve these all 3 Navigators with only react-navigation?

react-navigation react-native reactjs
3 Answers

There is an issue with the sub actions being reset inside the Stack which can be seen here

Therefore the workaround for this issue would be to wrap your createBottomTabNavigator inside a createStackNavigator with headerMode: none in order to achieve the desired effect.

Info

By adding a StackNavigator nested directly within a DrawerNavigator, the sub actions will be reset only to the StackNavigator defined and won't affect the child screen states, therefore it won't throw the error, as mentioned in the code

if (route.index !== undefined && route.index !== 0) {
   subAction = NavigationActions.reset({
   index: 0,
   actions: [
      NavigationActions.navigate({
      routeName: route.routes[0].routeName,
   }),
  ],
 });
}

MergedNavigator.js

import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';

//plain

export const stack = StackNavigator({
    DetailScreen:{screen:DetailScreen},
    MainScreen:{screen:MainScreen}
},{
    initialRouteName:'DetailScreen'
});

const secondStack = StackNavigator({
    RegisterScreen:{screen:RegisterScreen},
    ForgotScreen:{screen:ForgotScreen}
},{
    initialRouteName:'ForgotScreen'
})

export const Tabs = createBottomTabNavigator({
    Login:{screen:LoginScreen},
    TabOne:{screen:secondStack},
    TabTwo:{screen:TabTwo}
},{
    animationEnabled:true
})

const TabStack = createStackNavigator({ //... Adding the Stack here
  Tabs: {screen: Tabs}
}, {
  headerMode: 'none'
})

export const Drawer = DrawerNavigator({
    Tabs:{screen:Tab},
    Stack:{screen:stack}
})

Here's a modified Snack with header's enabled

user_66068310 
import { StackActions, NavigationActions } from 'react-navigation';

let { navigation } = this.props;
let resetAction = StackActions.reset({
    key: undefined,
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'YourScreen' })],
});
navigation.dispatch(resetAction);

When you set the key to undefined, the navigator uses the actual stack, not the root.

user_76435210

First of all your main issue is you cann't create more than one StackNavigator() on your code.

Please try different navigator for redirection like below example code.

import {DrawerNavigator,StackNavigator,createBottomTabNavigator,createMaterialTopTabNavigator} from 'react-navigation';

// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import * as TAB from '../tab';

export const stack = StackNavigator({
    DetailScreen:{screen:DetailScreen},
    MainScreen:{screen:MainScreen}
},{
    initialRouteName:'DetailScreen'
});

const secondStack = createMaterialTopTabNavigator({
    RegisterScreen:{screen:RegisterScreen},
    ForgotScreen:{screen:ForgotScreen}
},{
    initialRouteName:'ForgotScreen'
})

export const Tabs = createBottomTabNavigator({
    Login:{screen:TAB.Login},
    TabOne:{screen:secondStack},
    TabTwo:{screen:TAB.TabB}
},{
    animationEnabled:true,
    initialRouteName:'Login'
})

export const Drawer = DrawerNavigator({
    Tabs:{screen:Tabs},
    Stack:{screen:stack}
},
{
    animationEnabled:true,
    initialRouteName:'Tabs'
})

hope above code snippet is useful for you.

user_43156950
Related