How can you push a screen using only the navigation ref

Question

Using the react-navigation library, when you're on a screen that's part of a stack navigator you can use props.navigation.push(route name, params). I want to achieve the same thing, being able to push a new screen but from the root level where I take the NavigationContainer ref.

So I have this code

   <NavigationContainer ref={navigationRef}>
       ... 
   </NavigationContainer>

And I want to do something like

   navigationRef.push(routeName, params);

Unfortunately, I don't have the push method here. Is there a workaround for this?

Answer 1

You could set up a RootNavigation.js file like this:

import * as React from 'react';
import { StackActions } from '@react-navigation/native';

export const navigationRef = React.createRef();

export function push(...args) {
  navigationRef.current?.dispatch(StackActions.push(...args));
}

Then you can use it like this:

import {navigationRef} from './path/to/RootNavigation';

<NavigationContainer ref={navigationRef}>
  {/* content */}
</NavigationContainer>

and this:

import * as RootNavigation from './path/to/RootNavigation';

RootNavigation.push('Screen', { data: '...' })

Source: https://reactnavigation.org/docs/navigating-without-navigation-prop/.