React Navigation 5 - Multiple Navigator Handling

README.md

React Navigation V5 - Multiple Navigator Hooks

This gist is designed to provide a way to conditionally navigate multiple stack navigators depending upon the current route.

The use case for this is if you want to have multiple stacks visible at the same time and ensure each can navigate independently, while also ensuring that deep linking will correctly set each stack navigator when entered via deep linking.

For example, if you have a stack on the left side which handles a search screen, and a stack on the right side which displays information about a search result, this would be ideal.

Files

This gist consists of several key files:

• useDualPanelDeepLinking.ts
  • This is a hook which integrates with the useNavigation() hook from React Navigation V5
• DualPanelNavHandler.tsx
  • This is a React Native component that handles the navigation between for multiple stacks
• App.tsx
  • This is an example of a root component, showing how to correctly setup the navigators
• NavigationService.ts
  • This is a basic service that handles the navigation for each stack
• RightStack.tsx
  • This is one of the navigation stacks - in this case, it's on the right-side of the screen
• LeftStack.tsx
  • This is the other navigator stack - this one appears on the left-side of the screen

Usage

Add the files to your project. Then, in any of your screens, simply add <DualPanelNavHandler /> anywhere inside the rendered contents. I've only tried this with functional components. It might work with React class components too, but I avoid those these days.

FAQ

Where are the screens?!

You need to add those yourself. This is a proof of concept. The screens have nothing special about them, except importing the DualPanelNavHandler component, and adding it to the render (in functional components, this is the return, and in class components, this is the render() method - see note in Usage section above about this)

What are the @ imports?

Those are typescript alias imports. They point to specific directories which prevents the need to import using relative paths (because import Something from ../../../../../../somePath/someFile.ts is an absolute trash way of working).

Which screens are 'paired' in this example?

In this example, the 'search' and 'train station info' screens are paired. The 'home' and 'blank' screens are also linked. You can see that I've just rendered an empty component for the blank screen - this is for handling the home page, but you could use it for any use case where you don't want content to display on a particular navigator.

Why not use a drawer navigator?

Drawer navigators have some limitations for this use case. For example, you can't use the useRoute or useNavigation hooks inside the drawer since the drawer itself is not a stack but rather just 'static' content. You may be able to use a stack navigator in there, but you'll likely find that you'll have to come up with some sort of solution similar to this in that case.

I personally despise drawer navigators being used as 'permanent side panels' for this reason. It makes deep linking a nightmare to work with, and even handling navigation inside your app becomes a huge hill that you've got to climb (which is uphill, both ways, in the snow, and is littered with bear traps).

Sure, drawers have their uses and I encourage you to use them where it fits, but I am actively avoiding them.

Won't linking 'just work'?

You can only have a single linking (or useLinking hook). This makes sense - if the user is navigating to /search, the hook doesn't know which stack it should work with. You can't have 2 different linking elements inside nested navigators - it just doesn't work.

Isn't dangerouslyGetState() bad?

It's definitely a little bit frustrating at times. Sometimes values aren't defined (this isn't a bug!), and sometimes things are super-nested which makes it taxing to figure out how far down a tree you need to go to get the name of a route for example.

Then again, you're not supposed to use it except in exceptional circumstances. This is one of those times. That's why I built this.

Are there any bugs in this?

Possibly. I'm only human. I encourage you to experiment with this. Adapt it, and improve it.

Could I use more than 2 stack navigators?

Absolutely. I haven't tried, but you could theoretically create an unlimited number of stack navigators.

If you were building an app which displays 6 video streams, you would have to create 6 stack navigators and adjust the code to fit, but theoretically, it should be possible.

Won't that look bad on small screens?

Yeah, absolutely. You'll need to integrate your own screen size handling or hooks to adapt to different screen sizes and scale each stack appropriately. I haven't added any handling for this in this gist. It should be possible without too many issues.

My use case is for supporting a project on mobile, tablet, and the web, and right now, getting multiple stacks working is the priority.

Why not make this a repo with a demo app?

I'm super-busy these days, and while it wouldn't take too long to setup a repo, I opted to use a gist instead. This makes it easier, as you can easily see all the files that are needed, without having to clone a repo or navigate across directories to find the code. In my opinion, this is much easier than having to figure out how I've integrated something, which might not align with your codebase. Less noise is good.

Why not make it an NPM library?

I may consider that at some point. There's parts of your own navigation that will be affected and need rewriting to support this method - it's a lot of work for something that's just as easy as copy-pasting. Plus, if I made it a library, there's that obligation to update it as React Navigation evolves. We've all seen those github repos with issues from 5 years ago, and I'd rather this not be one of those cases.

App.tsx

/*

IMPORTANT NOTE

The below is just an example showing how the root component of your project should be structured to support this multiple-navigator setup
You should adapt your app around it

*/

import React from "react";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import {
  NavigationContainer,
  LinkingOptions,
} from "@react-navigation/native";
import { EScreens } from "@Navigator/interfaces"; // EScreens is a string-enum of screen names
import RightScreenStack from "@Navigator/RightScreenStack";
import LeftScreenStack from "@Navigator/LeftScreenStack";
import { View } from "react-native";
import NavigationService from "@Navigator/NavigationService";

export default function App() {

  const leftNavPanelLinking: LinkingOptions = {
    prefixes: [""],
    config: {
      screens: {
        [EScreens.HOME]: {
          path: "home",
          exact: true
        },
        [EScreens.SEARCH]: {
          path: "search/:search_term?"
        },
        [EScreens.TRAIN_STATION_INFO]: {
          path: "rail/station/info/:crs"
        },
      }
    }
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1, flexDirection: "row" }}>
          <NavigationContainer
            linking={leftNavPanelLinking}
            ref={NavigationService.leftNavPanelRef}
            onReady={() => (NavigationService.leftNavPanelIsReadyRef.current = true)}
          >
            <LeftScreenStack />
            <NavigationContainer
              independent={true}
              ref={NavigationService.rightNavPanelRef}
              onReady={() => (NavigationService.rightNavPanelIsReadyRef.current = true)}
            >
              <RightScreenStack />
            </NavigationContainer>
          </NavigationContainer>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

DualPanelNavHandler.tsx

import { useDualPanelDeepLinking } from "@Hooks/useDualPanelDeepLinking";
import { EScreens } from "@Navigator/interfaces";
import NavigationService from "@Navigator/NavigationService";
import React from "react";

export const DualPanelNavHandler = () => {
  const { key, name, params } = useDualPanelDeepLinking();
  React.useEffect(() => {
    switch (name) {
      case EScreens.HOME:

        // Tells the rigjt-side stack navigator to go to the BLANK screen
        NavigationService.navigate({
          ref: NavigationService.rightNavPanelRef,
          screen: EScreens.BLANK
        });
        break;
      case EScreens.SEARCH:

        // Tells the left-side stack navigator to go to the SEARCH screen
        NavigationService.navigate({
          ref: NavigationService.leftNavPanelRef,
          screen: EScreens.SEARCH
        });

        // Tells the right-side stack navigator to go to the TRAIN_STATIONS_INFO screen
        NavigationService.navigate({
          ref: NavigationService.rightNavPanelRef,
          screen: EScreens.TRAIN_STATION_INFO
        });
        break;

      case EScreens.TRAIN_STATION_INFO:
        NavigationService.navigate({
          ref: NavigationService.leftNavPanelRef,
          screen: EScreens.SEARCH
        });
        break;
    }
  }, [key, name, params]);
  return <></>;
};

LeftStack.tsx

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { EScreens } from "@Navigator/interfaces";

// Screens
import HomeScreen from "@Screens/Home/screen.home";
import SearchScreen from "@Screens/Search/screen.search";

import { View } from "react-native";

const LeftStackNav = createStackNavigator();

const MainStack: React.FC = () => {
  return (
    <>
        <View style={{ flex: 1 }}>
          <LeftStackNav.Navigator screenOptions={{ headerShown: false }}>
            <LeftStackNav.Screen name={EScreens.HOME} component={HomeScreen} />
            <LeftStackNav.Screen name={EScreens.SEARCH} component={SearchScreen} />
          </LeftStackNav.Navigator>
        </View>
    </>
  );
};

export default MainStack;

NavigationService.ts

/*

This navigator provides a controlled way of navigating each stack independently
Instead of using the `useNavigation().navigate()` function, you import this file, and call `NavigationService.Navigate()`
I'm aware that this is missing things like reset() and push() functions - feel free to add those

*/

import React from "react";
import { CommonActions, NavigationContainerRef } from "@react-navigation/native";
import { EScreens } from "@Navigator/interfaces";

type TNavigateArgs = {
  ref: React.RefObject<NavigationContainerRef>;
  screen: EScreens;
  params?: Record<string, any>;
};

type TGetCurrentRouteArgs = {
  ref: React.RefObject<NavigationContainerRef>;
};

type TDispatchArgs = {
  ref: React.RefObject<NavigationContainerRef>;
  action: any;
};

class NavigationService {
  public leftNavPanelRef = React.createRef<NavigationContainerRef>();
  public leftNavPanelIsReadyRef = React.createRef<boolean>();

  public rightNavPanelRef = React.createRef<NavigationContainerRef>();
  public rightNavPanelIsReadyRef = React.createRef<boolean>();

  public navigate = ({ ref, screen, params }: TNavigateArgs) => {
    this.dispatch({
      ref,
      action: CommonActions.navigate({ name: screen, params })
    });
  };

  public dispatch = ({ ref, action }: TDispatchArgs) => {
    if (ref === this.leftNavPanelRef) {
      if (this.leftNavPanelIsReadyRef?.current) {
        this.leftNavPanelRef?.current?.dispatch(action);
      }
    }

    if (ref === this.rightNavPanelRef) {
      if (this.rightNavPanelIsReadyRef?.current) {
        this.rightNavPanelRef?.current?.dispatch(action);
      }
    }
  };

  public getCurrentRoute = ({ ref }: TGetCurrentRouteArgs) => {
    if (ref === this.leftNavPanelRef) {
      if (this.leftNavPanelIsReadyRef?.current) {
        return this.leftNavPanelRef.current?.getCurrentRoute();
      }
    }

    if (ref === this.rightNavPanelRef) {
      if (this.rightNavPanelIsReadyRef?.current) {
        return this.rightNavPanelRef.current?.getCurrentRoute();
      }
    }
  };
}

const singleton = new NavigationService();
export default singleton;

RightStack.tsx

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { EScreens } from "@Navigator/interfaces";;
import { View } from "react-native";

// Screens
import TrainStationInfoScreen from "@Screens/TrainStationInfo/screen.trainStationInfo";

const RightStackNav = createStackNavigator();

const RightStack: React.FC = () => {
  return (
    <View style={{ flex: 1 }}>
      <RightStackNav.Navigator screenOptions={{ headerShown: false }}>
        <RightStackNav.Screen name={EScreens.EMPTY} component={() => <></>} />
        <RightStackNav.Screen name={EScreens.TRAIN_STATION_INFO} component={TrainStationInfoScreen} />
      </RightStackNav.Navigator>
    </View>
  );
};

export default RightStack;

useDualPanelDeepLinking.ts

import { useNavigation } from "@react-navigation/native";
import React from "react";

type TResult = {
  key: string | null;
  name: string | null;
  params?: object | undefined;
};

export const useDualPanelDeepLinking = (): TResult => {
  const { dangerouslyGetState } = useNavigation();
  const [currentRoute, setCurrentRoute] = React.useState<TResult>({ key: null, name: null, params: {} });

  React.useEffect(() => {
    const { routes } = dangerouslyGetState();
    const [firstRoute] = routes;
    const { key, name, params } = firstRoute;
    setCurrentRoute({
      key,
      name,
      params
    });
  }, []);

  return currentRoute;
};