Alternative for NavigationActions in react-native v6-CodePudding

I have problem, namely the navigation in this code doesn't work:

import AsyncStorage from "@react-native-async-storage/async-storage";
import createDataContext from "./createDataContext";
import trackerApi from "../api/tracker";
import { navigate } from "./navigationRef";

const authReducer = (state, action) => {
  switch (action.type) {
    case "add_error":
      return { ...state, errorMessage: action.payload };
    case "signin":
      return { errorMessage: "", token: action.payload };
    case "clear_error_message":
      return { ...state, errorMessage: "" };
    case "signout":
      return { token: null, errorMessage: "" };
    default:
      return state;
  }
};
const signup = (dispatch) => async ({ email, username, birth, gender, password }) => {
      try {
        const response = await trackerApi.post("/signup", { email, username, birth, gender, password });
        await AsyncStorage.setItem("token", response.data.token);
        dispatch({ type: "signin", payload: response.data.token });
        console.log(response.data.token);
        navigate("DrawerScreen");

      } catch (err) {
        dispatch({
          type: "add_error",
          payload: "Something went wrong with sign up",
        });
      }
    };
export const { Provider, Context } = createDataContext(
  authReducer,
  { signin, signout, signup, clearErrorMessage, tryLocalSignin },
  { token: null, errorMessage: "" }
);

"signup" function successfully sends my data to database in mongodb. But after this The next file is created to help my navigation works. But "NavigationActions" was used in ReactNative v4. I need to change my code to work with RN v6. The following code is pasted below:

    import { NavigationActions } from 'react-navigation';
    
    let navigator;
    
    export const setNavigator = nav => {
      navigator = nav;
    };
    
    export const navigate = (routeName, params) => {
      navigator.dispatch(
        NavigationActions.navigate({
          routeName,
          params
        })
      );
    };

Both files are referenced by each other.

To sum up I've tried the solution to use navigation.navigate("MyScreen"), but it doesnt work in signup function. The question is how to change the second file to work with RN6 or how to navigate successfully in this function without the second file?

CodePudding user response：

First you have to import useNavigation

Like this:

import { useNavigation } from "@react-navigation/core";

Then you have to use it and save it in a variable like:

const navigation = useNavigation();

Now use onPress when press on that button to navigate:

onPress={() => navigation.navigate('MyScreen')};

This will navigate to the the other Screen.

Make sure you install every library you use in your project using npm or yarn.

CodePudding user response：

I understood everything. Thanks for help ;)

At the end of the day may problem was about navigation in async functions in react native 6. Official documentation from the React Native site explained me everything.

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

End of the topic. Good luck everyone ;)