React Native – react-navigation (2)

How to reset navigation routes?

const navigation = useNavigation();

navigation.dispatch((state) => {
  // Remove the 'home' route from the stack
  const routes = state.routes.filter((r) => r.name !== 'home');
  //const routeNames = state.routeNames.filter((r) => r !== 'home'); // No need?

  // Replace 'home' with 'profile'
  const newRoutes = [
    ...routes,
    {
      name: 'profile',
      params: { data: {} },
      key: 'key-screen-profile', // Optional
    },
  ];
  // const newRouteNames = [...routeNames, 'profile']; // No need?

  // Reset
  return CommonActions.reset({
    ...state, // Optional if you want to keep current state
    // routeNames: newRouteNames, // No need?
    routes: newRoutes,
    index: newRoutes.length - 1, // What screen index you want to show
  });
});

What should be in data params when passing data?

what-should-be-in-params

• Don’t do this

// Don't do this
navigation.navigate('Profile', {
  user: {
    id: 'jane',
    firstName: 'Jane',
    lastName: 'Done',
    age: 25,
  },
});

• Data such as user objects should be in your global store

navigation.navigate('Profile', { userId: 'jane' });

What is the difference between push() and navigate()?

• Each time you call push, a new route is added to the navigation stack
  When you call navigate it first tries to find an existing route with that name, and only pushes a new route if there isn’t yet one on the stack
• Or push action adds a route on top of the stack and navigates forward to it
  In the other hand, navigate will pop back to earlier in the stack if a component is already mounted there. Push will always add on top, so a component can be mounted multiple times.

How to close a react-navigation modal?

  navigation.getParent().pop()

How to navigate to a nested screen of a different stack?

  navigation.navigate('stackName', {
    screen: 'screenName',
    params: {
      userName: 'Hung',
      age: 18,
    },
  })