Using React Navigation navigator outside of components

example.ts

// We can create a `NavigationService` singleton that allow us to access the top-level navigator
// for navigation outside of our components.

// services/navigation.ts
import { NavigationContainerRef } from "@react-navigation/native";

export class NavigationService {
  public static navigator: NavigationContainerRef;

  public static setTopLevelNavigator(navigator: NavigationContainerRef) {
    if (navigator) {
      this.navigator = navigator;
    }
  }
}

// To use this, we can add a `ref` to our `NavigationContainer` when rendering the root of our app. For example:
// navigation/root/index.tsx
<NavigationContainer
  ref={ref => NavigationService.setTopLevelNavigator(ref)}
>
  <Stack.Navigator
    headerMode="none"
    screenOptions={{
      cardStyle: { backgroundColor: Colors.white },
      headerShown: false
    }}
  >
    {authenticated || signup ? (
      <Stack.Screen
        name="Application"
        component={ApplicationNavigator}
        initialParams={{ signup }}
      />
    ) : (
      <Stack.Screen
        name="Onboarding"
        component={OnboardingNavigator}
        options={{
          animationTypeForReplace: loading ? "push" : "pop"
        }}
      />
    )}
    {isDev && <Stack.Screen name="Storybook" component={Storybook} />}
  </Stack.Navigator>
</NavigationContainer>

// Since our root will be rendered when handling push notifications and deep links,
// we should be able to access our navigator like so:

const handleCommunityNotification = (id: string) => {
  if (NavigationService.navigator) {
    const { navigator } = NavigationService;

    try {
      navigator.dispatch(
        TabActions.jumpTo("Community", {
          screen: "Feed"
        })
      );
      navigator.dispatch(
        TabActions.jumpTo("Community", {
          params: { id, key: id },
          screen: "CommunityTask"
        })
      );
    } catch (error) {
      NotificationService.displayTextError();
    }
  }
};