react navigation v5 How to reset or replace?

Question

I tried all the examples in the doc but no success.

I have component that I am routing from here to component.

I need to unmount component A.

I've tried REPLACE AND RESET.

            RootNavigation.navigationRef.current.dispatch(state => {
                return CommonActions.reset({
                    index: 0,
                    key: null,
                    routes: [{ name: 'B' }],
                });
            });

this code function route me to different route routs in stack['AA','B'] so it routes me to 'AA'

 const resetAction = StackActions.replace('B', {});
                    RootNavigation.navigationRef.current.dispatch(state => {
                        return resetAction;
                    });

I AM GETTING AN ERROR he action 'REPLACE' with payload {"name":"B","params":{}} was not handled by any navigator.

RootNavigation.navigate('B');

this function work great but it's not unmounted A.

Answer 1

you can use like this, create file name 'RootNavigation' and then enter these lines

  import {createNavigationContainerRef} from '@react-navigation/native';
  import {StackActions} from '@react-navigation/native';

  export const navigationRef = createNavigationContainerRef();


  export function navigate(name, params) {
    if (navigationRef.isReady()) {
      navigationRef.navigate(name, params);
    }
  }

  export function navigateReplace(name, param) {
    if (navigationRef.isReady()) {
      navigationRef.dispatch(
        StackActions.replace(name, {
          param,
        }),
      );
    }
  }

if you wont to navigate without navigation props. import 'RootNavigation', like this

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

then you can navigate like this

RootNavigation.navigateReplace('Login Flow');

or

RootNavigation.navigate('Profile');

please refer `https://reactnavigation.org/docs/navigating-without-navigation-prop/` this official document

Answer 2

read more: https://reactnavigation.org/docs/stack-actions/#replace

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

navigation.dispatch(
  StackActions.replace('Profile', {
    user: 'jane',
  })
);