text: import React, { useRef, useState } from 'react';
  import { StatusBar } from 'expo-status-bar';
  import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
  import { auth, firebaseConfig } from './firebase';
  import * as SecureStore from 'expo-secure-store';
  import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha';
  
  const Welcome = ({navigation}) => {
      const [ID, setID] = useState(0);
      const [conf, setConf] = useState("");
      const captcha = useRef(null);
      const [verificationID, setVerificationID] = useState();
      return(
          <View style={styles.container}>
              <StatusBar style={'light'} backgroundColor="#1c272b" />
              <Text style={styles.welcome} >Hi there! &#x1F44B;</Text>
              <View>
              <TextInput
                  keyboardType = "phone-pad"
                  style = {styles.input}
                  onChangeText = { (t) => setID(t) } 
                  placeholder = "Phone Number">
              </TextInput>
              
              <FirebaseRecaptchaVerifierModal
                ref= {captcha}
                attemptInvisibleVerification = {true}
                firebaseConfig = {firebaseConfig}
              >
              </FirebaseRecaptchaVerifierModal>
              
              <Button
                  title = "LOG IN"
                  onPress = {
                    async () => {
                      // navigation.navigate('Chats', {myID: ID});
                      const phoneProvider = new auth.PhoneAuthProvider();
                      // Fake Phone Number: +16505553434, Verification Code = 109901
                      const verificationId = await phoneProvider.verifyPhoneNumber(ID, captcha.current);
                      setVerificationID(verificationId);
                    }
                  }>
              </Button>
              <TextInput
                  keyboardType = "numeric"
                  style = {styles.input}
                  onChangeText = { (t) => setConf(t) } 
                  placeholder = "Verification Code">
              </TextInput>
              <Button
                title="Confirm SMS Code"
                onPress= {
                  async () => {
                    const credential = auth.PhoneAuthProvider.credential(verificationID, conf);
                    await auth().signInWithCredential(credential);
                    SecureStore.setItemAsync('phone-number', ID).then(
                      () => navigation.navigate('Chats', {myID: ID})
                    );
                  }
                }
              >
  
              </Button>
              </View>
          </View>
      );
  }
  const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
      },
      title: {
        marginTop: 80,
        fontSize: 50,
        color: "crimson"
      },
      welcome: {
        marginTop: 90,
        fontSize: 40,
      },
      input: {
        marginTop: 80,
        marginBottom: 20,
        fontSize: 20,
        borderWidth: 1,
        padding: 8,
        borderRadius: 5
      }
    });
  
    export { Welcome };