React native Stack navigation how to use 'replace' in Stack action

user_9613677 0
Viewed 9193

I want to use the replace method in Stack Actions in react navigation v2, but I'm not quite sure how I've looked at the specification here, https://reactnavigation.org/docs/en/stack-actions.html but I can't get it to work. 

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({

key:,
newKey:
routeName:

});
this.props.navigation.dispatch(resetAction);

I guess it's gotta be in some above format, but i'm not sure what has to go in to the parameters. Can anyone give me a working example?

react-navigation react-native reactjs
2 Answers

Are you trying to reset or to replace?

  • Use "Reset" when you want to erase all stack and create a new one. for example when deep linking to a certain path.
  • Use "Replace" when you want to replace a specific element in the stack. for example you want to this.props.navigation.goBack() and navigate to a different route than where you came from
user_25227180

The useNavigation has a replace function under the hood but its not documented in the typings so you can type it yourself this way:

const { navigate, replace } = useNavigation<
  NavigationProp<RootStackParamList> & {
    replace<RouteName extends keyof RootStackParamList>(
      screen: RouteName
    ): unknown
  }
>();

or a more elaborate version of it as a custom hook so you can avoid repeating this over and over:

// src/hooks/useNav.ts
import { useMemo } from "react";
import {
  NavigationAction,
  NavigationProp,
  NavigationState,
  StackActions,
  useNavigation,
} from "@react-navigation/native";

import { RootStackParamList } from "../navigation/routes";

const NAV_REPLACE_ACTION = "REPLACE";

interface UseNavAPI extends NavigationProp<RootStackParamList> {
  /**
   * Navigate by replace to a route in current navigation tree.
   *
   * @param name Name of the route to navigate to.
   * @param [params] Params object for the route.
   */
  replace<RouteName extends keyof RootStackParamList>(
    routeName: RouteName,
    params?: RootStackParamList[RouteName]
  ): void;
}

export function useNav(): UseNavAPI {
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  return useMemo(
    () =>
      ({
        ...navigation,
        replace<RouteName extends keyof RootStackParamList>(
          routeName: RouteName,
          params?: RootStackParamList[RouteName]
        ): void {
          return navigation.dispatch(StackActions.replace(routeName, params));
        },
      } as UseNavAPI),
    [navigation]
  );
}

use it like:

import { VFC } from 'react';
import { useNav } from '<path>/useNav';

const MyComponent: VFC = () => {
  const { navigate, replace } = useNav();

  return (
    <>
      {/* ... */}
      <Pressable
        onPress={() => {
          replace('YourScreenName', {foo: 'bar'});
        }}
      >
        Replace
      </Pressable>
      <Pressable
        onPress={() => {
          navigate('YourScreenName', {foo: 'bar'});
        }}
      >
        Navigate
      </Pressable>
    </>
  );
};
user_123600640
Related