Pushing err message to Toast for user feedback

Question

I'm using Clerk for a React Native/Expo app, which is going great. But, I'm having issues pushing exceptions to the user via a Toast message.

Using the standard Clerk code:

const onPressVerify = async (e) => {
  e.preventDefault();
  if (!isLoaded) {
    return;
  }

  try {
    const completeSignUp = await signUp.attemptEmailAddressVerification({
      code,
    });
    if (completeSignUp.status !== 'complete') {
      /*  investigate the response, to see if there was an error
         or if the user needs to complete more steps.*/
      console.log(JSON.stringify(completeSignUp, null, 2));
    }
    if (completeSignUp.status === 'complete') {
      await setActive({ session: completeSignUp.createdSessionId });
      router.push('/');
    }
  } catch (err) {
    console.error(JSON.stringify(err, null, 2));
  }
}

If Clerk fails, i.e. "password not long enough", "or could not find account", the catch (and console log) displays

 ERROR  [{
"code": "form_identifier_not_found",
"message": "Couldn't find your account.",
"longMessage": "Couldn't find your account.",
"meta": {
  "paramName": "identifier"
}}]

Question. To use react-native-toast-message, how do I add 'message' to a Toast message as part of the catch? Being an object, I'm struggling to understand the construct and requirement.

Toast.show({
    type: "error",
    text1: ????
  })

Thanks in advance.

Answer 1

• To extract the message property from the ERROR object you can do:

 const errorMessage = err && err.message;

OR

 const errorMessage = err && err[0] && err[0].message;

Here, err[0].message is used to access the message property from the first element of the array(Error). This assumes that your ERROR object is always an array with at least one element and that the message property is present.

(This is based on the structure of the ERROR object you provided.

• and to display the error message in Toast:

Toast.show({
      type: "error",
      text1: errorMessage || "Error occurred",
    });