How to use navigation.navigate from a outside the stack.navigation

July 26, 2022

Create a new file named: RootNavigation.js

/ RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

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

// file where you have the navigation

import {navigationRef} from 'RootNavigation';

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

And BitFrit.js should be something like this:

// BitFrit.js

import React from 'react';
import {View, Button} from 'react-native';
import * as RootNavigation from 'RootNavigation';

const BitFrit= () => {
  return (
    <View>
      <Button
        title={'Go to Screen WithParms'}
        onPress={() =>
          RootNavigation.navigate('screenName ', {userName: 'bitfritblog'})
        }
      />
    </View>
  );
};

export default BitFrit;

For more info you can read the documentation https://reactnavigation.org/docs/navigating-without-navigation-prop/
Ref-by : https://stackoverflow.com/questions/61170112/how-to-use-navigation-navigate-from-a-component-outside-the-stack-navigation