ReactNative ERROR ,The action 'NAVIGATE' with payload was not handled by any navigator

user_2123417 0
Viewed 2079

I am using ReactNative application, route.ts

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Login from './src/screens/Login';
import Dashboard from './src/screens/Dashboard';
import {navigationRef} from './src/RootNavigation';
export const RootStack = createStackNavigator();
const Home = () => {
  return (
    <NavigationContainer ref={navigationRef}>
      <RootStack.Navigator initialRouteName={'Login'}>
        <RootStack.Screen name="Login" component={Login} />
        <RootStack.Screen name="Dashboard" component={Dashboard} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}
export default Home;

RootNavigation.ts

 import React from 'react';

export const navigationRef: any = React.createRef();

export function navigate(name: any, params: any) {
  navigationRef.current.navigate(name, params);
}

Login.tsx

import * as Navigation from '../RootNavigation';
loginAttempt = () => {
    if (
      this.state.username === this.props.userData.username &&
      this.state.password === this.props.userData.password
    ) {
      Navigation.navigate('Dashboard ', {});
    } else {
      Alert.alert('Please try again with correct username and password');
    }
  };

Here I am facing issues error while navigating from one screen to another screen; The action 'NAVIGATE' with payload {"name":"Dashboard ","params":{}} was not handled by any navigator.

Do you have a screen named 'Dashboard '?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

react-navigation react-native reactjs
1 Answers

Navigation Container

let navigator;
<NavigationContainer 
           ref={(nav: any) => {
                navigator = nav;
                NavigationService.setNavigator(navigator);
            }}>
      <RootStack.Navigator initialRouteName={'Login'}>
        <RootStack.Screen name="Login" component={Login} />
        <RootStack.Screen name="Dashboard" component={Dashboard} />
      </RootStack.Navigator>
    </NavigationContainer>

Navigation Service

import { CommonActions, StackActions } from '@react-navigation/native';
const config: any = {};
export function setNavigator(nav: any) {
    if (nav) {
        config.navigator = nav;
    }
}
export function navigate(name: any, params?: any) {
    if (config.navigator && name) {
        const action = CommonActions.navigate({ name, params });
        config.navigator.dispatch(action);
    }
}
export function goBack() {
    if (config.navigator) {
        const action = CommonActions.goBack();
        config.navigator.dispatch(action);
    }
}

export function popToTop() {
    if (config.navigator) {
        const action = StackActions.popToTop();
        config.navigator.dispatch(action);
    }
}

Usage

import * as NavigationService from 'path';
Navigation.navigate('Dashboard');

I think your way should works as well but you have a space here Navigation.navigate('Dashboard ', {}) instead of Navigation.navigate('Dashboard', {});

user_54492380
Related