Stavím reagovat-nativní aplikace s expo, mám jen 2 komponenty, WelcomeScreen a PhoneLoginScreen. Já jsem se snaží realizovat firebase telefon autentizaci, která funguje na Webu, ale na iOS Simulátoru, dostanu chybu Verifier._reset is not a function. (In 'verifier._reset()', 'verifiier._reset' is undefined
a na Android, to prostě zhroutí, když jsem klikněte na pokračovat tlačítko, které naviguje k PhoneLoginScreen součásti. Kódy níže:
App.js
import React from "react"
import { NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"
import WelcomeScreen from "./components/WelcomeScreen"
import PhoneLoginScreen from "./components/auth/PhoneLoginScreen"
const Stack = createNativeStackNavigator()
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Welcome">
<Stack.Screen
name="Welcome"
component={WelcomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="PhoneLogin"
component={PhoneLoginScreen}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
WelcomeScreen.js
import React from "react"
import { Text, View, Button } from "react-native"
export default function WelcomeScreen({ navigation }) {
return (
<View
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Welcome</Text>
<Button
title="Continue"
onPress={() => navigation.navigate("PhoneLogin")}
/>
</View>
)
}
PhoneLoginScreen.js
import React, { useRef, useState } from "react"
import { firebaseApp, auth } from "../../firebase"
import {
Text,
View,
TextInput,
Button,
StyleSheet,
TouchableOpacity,
} from "react-native"
import {
FirebaseRecaptchaVerifierModal,
FirebaseRecaptchaBanner,
} from "expo-firebase-recaptcha"
import { PhoneAuthProvider, signInWithCredential } from "firebase/auth"
export default function PhoneLoginScreen() {
const recaptchaVerifier = useRef(null)
const [message, showMessage] = useState()
const [phoneNumber, setPhoneNumber] = useState()
const [verificationId, setVerificationId] = useState()
const [verificationCode, setVerificationCode] = useState()
const firebaseConfig = firebaseApp ? firebaseApp.options : undefined
const attemptInvisibleVerification = true
return (
<View style={styles.center}>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebaseConfig}
attemptInvisibleVerification={attemptInvisibleVerification}
/>
<Text style={{ marginTop: 20 }}>Enter phone number</Text>
<TextInput
style={{ marginVertical: 10, fontSize: 17 }}
placeholder="+1 999 999 9999"
autoFocus
autoCompleteType="tel"
keyboardType="phone-pad"
textContentType="telephoneNumber"
onChangeText={phoneNumber => setPhoneNumber(phoneNumber)}
/>
<Button
title="Send Verification Code"
disabled={!phoneNumber}
onPress={async () => {
try {
const phoneProvider = new PhoneAuthProvider(auth)
const verificationId =
await phoneProvider.verifyPhoneNumber(
phoneNumber,
recaptchaVerifier.current
)
setVerificationId(verificationId)
showMessage({
text: "Verification code has been sent to your phone.",
})
} catch (err) {
showMessage({
text: `Error 111: ${err.message}`,
color: "red",
})
}
}}
/>
<Text style={{ marginTop: 20 }}>Enter Verification code</Text>
<TextInput
style={{ marginVertical: 10, fontSize: 17 }}
editable={!!verificationId}
placeholder="123456"
onChangeText={setVerificationCode}
/>
<Button
title="Confirm Verification Code"
disabled={!verificationId}
onPress={async () => {
try {
const credential = PhoneAuthProvider.credential(
verificationId,
verificationCode
)
await signInWithCredential(auth, credential)
showMessage({
text: "Phone authentication successful
2