title: Error: signInWithPhoneNumber failed: Seconde argument "ApplicationVerifier" must be an implementation of firebase.auth.ApplicationVerifier
body: <p>I'm working on graduation project, trying to create signIn with phone number Interface with React Native,
  I found some codes for SMS Verification here : <a href="https://www.instamobile.io/mobile-development/firebase-phone-authentication-react-native/" rel="nofollow noreferrer">https://www.instamobile.io/mobile-development/firebase-phone-authentication-react-native/</a> .... But it gives me an Error !! " Error: signInWithPhoneNumber failed: Seconde argument "ApplicationVerifier" must be an implementation of firebase.auth.ApplicationVerifier" 
  I tried to connect Xcode with the app by ULR Scheme But its still not working!</p>
  
  <p>Here is my code Hope Can HeLp ME :</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    SafeAreaView,
    TouchableOpacity,
    View,
    Text,
    TextInput
  } from 'react-native';
  
  //import Firebase from '../components/Firebase'
  import {Actions} from 'react-native-router-flux';
  import * as firebase from 'firebase';
  
  const Config = {
    apiKey: "AIzaSyAsT6g2R1lXZb8soYZB9MtbM**********",
      authDomain: "********application.firebaseapp.com",
      databaseURL: "https://********application.firebaseio.com",
      projectId: "********application",
      storageBucket: "********application.appspot.com",
      messagingSenderId: "*****102252",
      appId: "1:35406102252:web:8c19bfa513e6**********",
      measurementId: "G-V4S6YST***"
  };
  
  firebase.initializeApp(Config);
  
  
  class PhoneAuthScreen extends Component {
    state = {
      phone: '',
      confirmResult: null,
      verificationCode: '',
      userId: '',
  
    }
  
    validatePhoneNumber = () =&gt; {
      var regexp = /^\+[0-9]?()[0-9](\s|\S)(\d[0-9]{8,16})$/
      return regexp.test(this.state.phone)
    }
  
    handleSendCode = () =&gt; {
      var appVerifier = window.recaptchaVerifier;
  
      // Request to send OTP
      if (this.validatePhoneNumber()) {
        firebase
          .auth()
          .signInWithPhoneNumber(this.state.phone, appVerifier)
          .then(confirmResult =&gt; {
            this.setState({ confirmResult })
          })
          .catch(error =&gt; {
            alert(error.message)
  
            console.log(error)
          })
      } else {
        alert('Invalid Phone Number')
      }
  
    this.setState({ confirmResult: null, verificationCode: '' })
  }
   handleVerifyCode = () =&gt; {
   // Request for OTP verification
   const { confirmResult, verificationCode } = this.state
   if (verificationCode.length == 6) {
   confirmResult
   .confirm(verificationCode)
   .then(user =&gt; {
   this.setState({ userId: user.uid })
   alert(`Verified! ${user.uid}`)
   })
   .catch(error =&gt; {
   alert(error.message)
   console.log(error)
   })
   } else {
   alert('Please enter a 6 digit OTP code.')
   }
   }
   renderConfirmationCodeView = () =&gt; {
   return (
   &lt;View style={styles.verificationView}&gt;
   &lt;TextInput
   style={styles.textInput}
   placeholder='Verification code'
   placeholderTextColor='#eee'
   value={this.state.verificationCode}
   keyboardType='numeric'
   onChangeText={verificationCode =&gt; {
   this.setState({ verificationCode })
   }}
   maxLength={6}
   /&gt;
   &lt;TouchableOpacity
   style={[styles.themeButton, { marginTop: 20 }]}
   onPress={this.handleVerifyCode}&gt;
   &lt;Text style={styles.themeButtonTitle}&gt;Verify Code&lt;/Text&gt;
   &lt;/TouchableOpacity&gt;
   &lt;/View&gt;
   )
   }
  
   render() {
    return (
    &lt;SafeAreaView style={[styles.container, { backgroundColor: '#333' }]}&gt;
    &lt;View style={styles.page}&gt;
    &lt;TextInput
    style={styles.textInput}
    placeholder='Phone Number with country code'
    placeholderTextColor='#eee'
    keyboardType='phone-pad'
    value={this.state.phone}
    onChangeText={phone =&gt; {
    this.setState({ phone })
    }}
    maxLength={15}
    editable={this.state.confirmResult ? false : true}
    /&gt;
  
    &lt;TouchableOpacity
    style={[styles.themeButton, { marginTop: 20 }]}
    onPress={
    this.state.confirmResult
    ? this.changePhoneNumber
    : this.handleSendCode
    }&gt;
    &lt;Text style={styles.themeButtonTitle}&gt;
    {this.state.confirmResult ? 'Change Phone Number' : 'Send Code'}
    &lt;/Text&gt;
    &lt;/TouchableOpacity&gt;
  
    {this.state.confirmResult ? this.renderConfirmationCodeView() : null}
    &lt;/View&gt;
    &lt;/SafeAreaView&gt;
    )
  };
  }
  
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#aaa'
      },
      page: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      },
      textInput: {
        marginTop: 20,
        width: '90%',
        height: 40,
        borderColor: '#555',
        borderWidth: 2,
        borderRadius: 5,
        paddingLeft: 10,
        color: '#fff',
        fontSize: 16
      },
      themeButton: {
        width: '90%',
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#888',
        borderColor: '#555',
        borderWidth: 2,
        borderRadius: 5
      },
      themeButtonTitle: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#fff'
      },
      verificationView: {
        width: '100%',
        alignItems: 'center',
        marginTop: 50
      }
    })
  
  export default PhoneAuthScreen;
  </code></pre>