title: Why can't read propert 'app' in firebase.app()?
body: <p>I am trying to use expo firebase phone authentication, after I set up firebase.js ,  I just simply use firebase recaptcha modal. However the console can't read firebase.app(), Is there something wrong or something are missing??</p>
  <pre><code>TypeError: Cannot read property 'apps' of undefined
  RegisterPage
  C:/Users/kkcookery/Desktop/signal-clone/RegisterPage.js:14
    11 |  const [verificationId, setVerificationId] = React.useState()
    12 |  const [verificationCode, setVerificationCode] = React.useState()
    13 |  const recaptchaVerifier = React.useRef(null)
  &gt; 14 |  const firebaseConfig = firebase.apps.length ? firebase.app().options : undefined
       | ^  15 | 
    16 |  const SendCode = async() =&gt; {
    17 |    try {
  </code></pre>
  <p>here is my code in expo connect to firebase:</p>
  <pre><code>import * as React from 'react'
  import { StyleSheet, Text, View, TextInput, KeyboardAvoidingView } from 'react-native'
  import { Button } from 'react-native-elements'
  import { firebase } from './firebase'
  import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha'
  
  
  function RegisterPage({ navigation }) {
  
    const [phoneNumber, setPhoneNumber] = React.useState()
    const [verificationId, setVerificationId] = React.useState()
    const [verificationCode, setVerificationCode] = React.useState()
    const recaptchaVerifier = React.useRef(null)
    const firebaseConfig = firebase.apps.length ? firebase.app().options : undefined
  
    const SendCode = async() =&gt; {
      try {
        const phoneProvider = new firebase.auth.PhoneAuthProvider()
        const verificationId = await phoneProvider.verifyPhoneNumber(
          phoneNumber,
          recaptchaVerifier.current
        )
        setVerificationId(verificationId)
      }catch (err) {console.error(err)}
  
  
    }
  
  
  
  
      return(
      &lt;KeyboardAvoidingView&gt;
       &lt;View style={styles.container}&gt;
        &lt;FirebaseRecaptchaVerifierModal
          ref={recaptchaVerifier}
          firebaseConfig={firebaseConfig}
          //attemptInvisibleVerification={attemptInvisibleVerification}
        /&gt;
        &lt;View style={{marginBottom:30,marginTop:50,width:'30%'}}&gt;
         &lt;Text&gt;Please enter your phone number&lt;/Text&gt;
        &lt;/View&gt;
        &lt;View style={{marginBottom:10,width:&quot;60%&quot;}}&gt;
         &lt;TextInput 
          placeholder=&quot;+852 your phone number&quot;
          placeholderTextColor=&quot;#636363&quot;
          onChangeText={text =&gt; setPhoneNumber(text)}
          autoFocus
          autoCompleteType=&quot;tel&quot;
          keyboardType=&quot;phone-pad&quot;
          textContentType=&quot;telephoneNumber&quot;
          value={phoneNumber}
          style={styles.input}
         /&gt;
        &lt;/View&gt;
        &lt;View&gt;
          &lt;Button
            title=&quot;Send Verification Code&quot;
            onPress={SendCode}
          /&gt;
        &lt;/View&gt;
       &lt;/View&gt;
      &lt;/KeyboardAvoidingView&gt;
      )
  
  
  
  }
  
  </code></pre>
  <p>Here is my firebase.js:</p>
  <pre><code>import * as firebase from 'firebase';
  
  // Optionally import the services that you want to use
  import '@firebase/auth';
  //import &quot;firebase/database&quot;;
  import &quot;@firebase/firestore&quot;;
  //import &quot;firebase/functions&quot;;
  //import &quot;firebase/storage&quot;;
  
  // Initialize Firebase
  const firebaseConfig = {
    apiKey: 'AIzXXXXXXXXX',
    authDomain: 'XXX.firebaseapp.com',
    databaseURL: 'https://XXX.firebaseio.com',
    projectId: 'XXX',
    storageBucket: 'XXX.appspot.com',
    messagingSenderId: 'XXXXXXXX',
    appId: 'XXXXXXXX',
  };
  
  
  
  
  if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
  }
  
  export default {firebase,firebaseConfig}
  
  </code></pre>
  <p>why cannot read firebase.app()?</p>