React native firebase phone authentication, if code sent navigate to otp screen

Question

I am using react native firebase, if code sent then i want to navigate to otp screen

But it shows an warning :

Non-serializable values were found in the navigation state. Check:

OtpVerification > params.confirm._auth._app._deleteApp (Function)

This can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions'

My code :

In login Screen :

async function signInWithPhoneNumber(phoneNumber) {
try {
  const confirmation = await auth().signInWithPhoneNumber(phoneNumber);

  props.navigation.navigate('OtpVerification', {
    confirm: confirmation,
    phoneNo,
  });
} catch (error) {
  console.log(error);
}

}

In Otp Screen :

async function confirmCode() {
if (otp) {
  try {
    await confirm.confirm(otp);
    props.navigation.navigate('OnBoarding');
  } catch (error) {
    AlertMsg('Invalid OTP');
  }
} else {
  AlertMsg('Please Enter OTP');
}

}

Answer 1

So I believe in belive function where you have confirmation variable, You might have to pass some constant value over there handling the return of firebase signin.

async function signInWithPhoneNumber(phoneNumber) {
try {
  const confirmation = await auth().signInWithPhoneNumber(phoneNumber);

  props.navigation.navigate('OtpVerification', {
    confirm: confirmation,
    phoneNo,
  });
} catch (error) {
  console.log(error);
}

Check this document - https://reactnavigation.org/docs/troubleshooting/#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state

This expo for your navigation - https://snack.expo.dev/vKpugczaG