Pass parameters between drawer stacks react-navigation

Question

My router setup is as below

import { createAppContainer, createDrawerNavigator, createStackNavigator, createSwitchNavigator } from "react-navigation";

import Home from "./components/Home";
import Search from "./components/Search";
import Map from "./components/Map";

import Login from "./components/Login";
import ForgotPassword from "./components/ForgotPassword";

import SideMenu from "./SideMenu";

const DashboardStack = createStackNavigator(
  {
    Home: { screen: Home },
    Search : {screen : Search}
  }
);

const MapStack = createStackNavigator(
  {
    Map: { screen: Map },
  }
);

const AuthStack = createStackNavigator(
  {
    Login: { screen: Login },
    ForgotPassword: { screen: ForgotPassword },
  }
);

export const DrawerStack = createDrawerNavigator(
  {
    Dashboard: { screen: DashboardStack },
    Map: { screen: MapStack },
  },
  {
    contentComponent: SideMenu,
    drawerWidth: 250
  }
);

export const AppNavigator = createStackNavigator(
  {
    Drawer: { screen: DrawerStack },
    Auth: { screen: AuthStack },
  },
  {
    // initialRouteName: "Drawer",
    headerMode: 'none',
    mode: 'modal',
  }
);

export default createAppContainer(DrawerStack);

Everything working fine, just a small issue. When I navigate to search screen from home and then switch to the Map screen with parameters, those parameters are not reaching to the Map screen.

My current setup is at codepan

Answer 1

Your problem is that your MapStack and your Map screen both have the same name, 'Map'.

Just replace the MapStack route to something else like 'MapStack' and you'll get the params.

See here: https://snack.expo.io/SyTFUPZUB

export const DrawerStack = createDrawerNavigator(
  {
    Dashboard: { screen: DashboardStack },
    MapStack: { screen: MapStack },
  },
  {
    contentComponent: SideMenu,
    drawerWidth: 250
  }
);