Issue
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.
Solution
- 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",
});
Answered By - Yashashri Pawar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.