How to pass the parameter to another screen using axios?-CodePudding

I'm doing the verification of the phone number, and I have to pass the phone number to the other checkCode.js component. I have seen examples that pass it navigate() as a pramas, but how can I receive it in another component.

const SignUp = ({ navigation }) => {
  const [phoneNumber, setPhoneNumber] = useState('');

  let register = "https://app.herokuapp.com/api/v1/auth/register" 
  let sendVerification = "https://app.herokuapp.com/api/v1/auth/sendVerification-otp"

  const signUp = () => {
    
    const userParams = {
      phone: phoneNumber,
    };
    const requestOne = axios.post(register, userParams)
    const requestTwo = axios.post(sendVerification, userParams)
    axios
    .all([requestOne, requestTwo], userParams)
    .then(axios.spread((...responses) => {
       navigation.navigate('CodeVerification')
      }))
      .catch((err) => {
        console.log('the error:', err.message);
      })
  }

checkCode.js

export default function CodeVerification({navigation}) {

    //need phoneNumber param in this component

    const [code, setCode] = useState('');
    
    const confirm = () =>{
        const userParams = {
            phone: " 11111111",
            code:code,
        };
        axios
        .post('https://app.herokuapp.com/api/v1/auth/sendVerification-otp', userParams)
        .then((response) =>{
            console.log('response', response.data);
            navigation.navigate('Welcome')
        })
        .catch((error) => {
            console.log('the error:', error.message);
          });

    };

How can I pass it?

CodePudding user response：

You can use Context Api

Context api is commonly used for transferring data to another component.

CodePudding user response：

This might help

register.js

const SignUp = ({ navigation }) => {
  
  // existing code remains the same 

  const signUp = () => {
    ....
    axios
      .all([requestOne, requestTwo], userParams)
      .then(
        axios.spread((...responses) => {
         
          // send params like this 
          navigation.navigate("CodeVerification", {phone: phoneNumber});
        })
      )
      .catch((err) => {
        console.log("the error:", err.message);
      });
  };
};

checkCode.js

export default function CodeVerification({ route, navigation }) {
  
  // get phoneNumber from props
  const {phone} = route.params;  // UPDATED this line

  const [code, setCode] = useState("");

  ....
}