I am new to react and i was trying to create a login screen authentication using firebase and below is my code

import { StyleSheet, Text, View, KeyboardAvoidingView,TextInput, TouchableOpacity } from 'react-native'
import React, { useState } from 'react'
import {auth} from '../firebase'


const LogScreen = () => {
      
    const[email,setEmail] = useState()
    const[password,setPassword] =useState()
    const handleSignUp = ()=>{
        auth
        .createUserWithEmailAndPassword(email, password)
        .then(userCredentials=>{
            const user = userCredentials.user;
            console.log(user.email);
        })
        .catch(error=>alert(error.message))
    }
  return (
    <KeyboardAvoidingView 
    style={styles.container}
    behavior="padding">
    <View style={styles.inputContainer}>
        <TextInput 
            value ={email}
            defaultValue={''}
            onChangedText={(text)=>setEmail(text)}
            style = {styles.input}
            placeholder="Email"
        />
        <TextInput
            value ={password}
            defaultValue={''}
            onChangedText={(text)=>setPassword(text) }
            style = {styles.input}
            placeholder="Password"
            secureTextEntry
        />
    </View>
    <View style={styles.buttonContainer}>
    <TouchableOpacity
        onPress={()=>{}}
        style = {styles.loginButton}
    >
        <Text styles = {styles.buttonText}>Log in</Text>    
    </TouchableOpacity>
    <TouchableOpacity
        onPress={handleSignUp}
        style = {styles.registerButton}
    >
        <Text styles = {styles.buttonText}>Register</Text>    
    </TouchableOpacity>
    </View>
    </KeyboardAvoidingView>
  )
}

export default LogScreen

const styles = StyleSheet.create({
    input:{
        backgroundColor:'white',
        borderColor:'#ADD8E6',
        borderWidth:2,
        padding:5,
        margin:5,
        borderRadius:10,
        justifyContent:'center',
        alignItems:'center'
    },
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },

    inputContainer:{
        width:'75%'    
    },
    buttonContainer:{
        width:'100%',
        backgroundColor:'#CCCCFF',  
        alignItems:'center'
    },
    loginButton:{
        borderRadius:10,
        width:'50%',
        backgroundColor:'#dca4c3',
        height:40,
        padding:5,
        textAlignVertical:'center',
        alignItems:'center',
        borderWidth:3,
        marginTop:10
    },  
    buttonText:{
        color:'white',
        fontWeight:'800',
        fontSize:8
    },
    registerButton:{
        borderRadius:10,
        backgroundColor:'#dca4c3',
        width:'50%',
        height:40,
        padding:5,
        textAlignVertical:'center',
        alignItems:'center',
        borderWidth:3,
        marginTop:10
    },
})

But when try to enter the email and password and click the register button (currently only register button is setup), an error message comes which says createUserWithEmailAndPassword failed: First argument "email" must be a valid string. Also when the app starts on the expo go in the emulator a warning appears which says AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. Can anyone explain to me how to resolve the error and what does the warning means.

CodePudding user response：

As the warning says

AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'

just npm install @react-native-async-storage/async-storage Search for package on npmjs.com for example usage

CodePudding user response：

the event to read the user input is "onChangeText" not "onChangedText"
you can read more about it: https://reactnative.dev/docs/textinput