I am trying to add firebase auth to my mobile application using this link to support phone number authentication.
A minimal version of my code is
import React, { useState } from "react";
import {
Text,
View,
Image,
ImageBackground,
TouchableOpacity,
TextInput
} from "react-native";
import Firebase from '../config/firebase';
import { getAuth, signInWithPhoneNumber, RecaptchaVerifier } from "firebase/auth";
const WelcomeScreen = ({ navigation }) => {
function continueButton() {
return (
<TouchableOpacity
activeOpacity={0.9}
onPress={async () => {
console.log("Inside on press");
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
}
}, auth);
navigation.navigate("Verification", {confirm: confirmation})}}
>
</TouchableOpacity>
);
}
}
When I click on the continue button, the continueButton() function is triggered, which results in the given error
[Unhandled promise rejection: TypeError: undefined is not a constructor (evaluating 'new _auth.RecaptchaVerifier')]
at node_modules/react-native/Libraries/Pressability/Pressability.js:691:17 in _performTransitionSideEffects
at node_modules/react-native/Libraries/Pressability/Pressability.js:628:6 in _receiveSignal
at node_modules/react-native/Libraries/Pressability/Pressability.js:524:8 in responderEventHandlers.onResponderRelease
I have been trying to figure out the root cause of the issue but could not figure out anything. Can you please help me fix this error?
Please try this
const WelcomeScreen = ({ navigation }) => {
function continueButton() {
return (
<TouchableOpacity
activeOpacity={0.9}
onPress={async () => {
console.log("Inside on press");
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
return response; // or return some required value here.
}
}, auth);
navigation.navigate("Verification", {confirm: confirmation})}}
>
</TouchableOpacity>
);
}