error appears on line -> const [data, setData] = React.useState({
import React, {useState, useEffect} from 'react';
import {
View,
Text,
TouchableOpacity,
TextInput,
Platform,
StyleSheet,
ScrollView,
StatusBar
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';
import {auth} from './firebase'
import {createUserWithEmailAndPassword} from 'firebase/auth';
const SignInScreen = ({navigation}) => {
const [data, setData] = React.useState({ //<- error that is returned to me
Email: '',
username: '',
password: '',
confirm_password: '',
check_textInputChange: false,
secureTextEntry: true,
confirm_secureTextEntry: true,
});
const register = async () => {
try{
// <-here is my attempt to authenticate
const user = await createUserWithEmailAndPassword(
auth,
data) ;
console.log(user)
}catch (error) {
console.log(error.message);
}
};
//nome
const textInputChange = (val) => {
if( val.length !== 0 ) {
setData({
...data,
username: val,
check_textInputChange: true
});
//my validation attempt that I also have error like for example, how does it do for when I click //the button check if the fields are not empty among other things I put
} else {
setData({
...data,
username: val,
check_textInputChange: false
});
}
}
// email
const textInputChangert = (val) => {
if( val.length !== 0 ) {
setData({
...data,
Email: val,
check_textInputChangert: true
});
} else {
setData({
...data,
Email: val,
check_textInputChangert: false
});
}
}
const handlePasswordChange = (val) => {
setData({
...data,
password: val
});
}
const handleConfirmPasswordChange = (val) => {
setData({
...data,
confirm_password: val
});
}
const updateSecureTextEntry = () => {
setData({
...data,
secureTextEntry: !data.secureTextEntry
});
}
const updateConfirmSecureTextEntry = () => {
setData({
...data,
confirm_secureTextEntry: !data.confirm_secureTextEntry
});
}
return (
<View style={styles.container}>
<StatusBar backgroundColor='#009387' barStyle="light-content"/>
<View style={styles.header}>
<Text style={styles.text_header}>Cadastro</Text>
</View>
<Animatable.View
animation="fadeInUpBig"
style={styles.footer}
>
<Text style={styles.text_footer}>Nome</Text>
<View style={styles.action}>
<FontAwesome
name="user-o"
color="#05375a"
size={20}
/>
<TextInput
placeholder="Nome"
style={styles.textInput}
autoCapitalize="none"
onChangeText={(val) => textInputChange(val)}
onChange={(event) => {
}}
/>
{data.check_textInputChange ?
<Animatable.View
animation="bounceIn"
>
<Feather
name="check-circle"
color="green"
size={20}
/>
</Animatable.View>
: null}
</View>
<ScrollView>
<Text style={[styles.text_footer, {
marginTop: 35 }]}>Email</Text>
<View style={styles.action}>
<FontAwesome
name="user-o"
color="#05375a"
size={20}
/>
<TextInput
placeholder="Exemplo@email.com"
style={styles.textInput}
autoCapitalize="none"
onChangeText={(val) => textInputChangert(val)}
onChange={(event) => {
}}
/>
{data.check_textInputChangert ?
<Animatable.View
animation="bounceIn"
>
<Feather
name="check-circle"
color="green"
size={20}
/>
</Animatable.View>
: null}
</View>
<Text style={[styles.text_footer, {
marginTop: 35
}]}>Senha</Text>
<View style={styles.action}>
<Feather
name="lock"
color="#05375a"
size={20}
/>
<TextInput
placeholder="senha"
secureTextEntry={data.secureTextEntry ? true : false}
style={styles.textInput}
autoCapitalize="none"
onChangeText={(val) => handlePasswordChange(val)}
onChange={(event) => {
}}
/>
<TouchableOpacity
onPress={updateSecureTextEntry}
>
{data.secureTextEntry ?
<Feather
name="eye-off"
color="grey"
size={20}
/>
:
<Feather
name="eye"
color="grey"
size={20}
/>
}
</TouchableOpacity>
</View>
<Text style={[styles.text_footer, {
marginTop: 35
}]}>Confirma Senha</Text>
<View style={styles.action}>
<Feather
name="lock"
color="#05375a"
size={20}
/>
<TextInput
placeholder="Confirma Senha"
secureTextEntry={data.confirm_secureTextEntry ? true : false}
style={styles.textInput}
autoCapitalize="none"
onChangeText={(val) => handleConfirmPasswordChange(val)}
/>
<TouchableOpacity
onPress={updateConfirmSecureTextEntry}
>
{data.secureTextEntry ?
<Feather
name="eye-off"
color="grey"
size={20}
/>
:
<Feather
name="eye"
color="grey"
size={20}
/>
}
</TouchableOpacity>
</View>
<View style={styles.button}>
<TouchableOpacity
style={styles.signIn}
onPress={() => navigation.SignInScreen()}
>
<Text style={[styles.textSign, {
color:'#fff'
}]}>Logar</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={SignInScreen}
onClick={register}
style={[styles.signIn, {
backgroundColor:'#5961EE',
marginTop: 15,
borderColor:'#5961EE',
borderWidth:2,
}]}
>
<Text style={[styles.textSign, {
color: '#FFF'
}]}>Cadastrar</Text>
</TouchableOpacity>
</View>
</ScrollView>
</Animatable.View>
</View>
);
};
export default SignInScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#0F17A7'
},
header: {
flex: 1,
justifyContent: 'flex-end',
paddingHorizontal: 20,
paddingBottom: 50
},
footer: {
flex: Platform.OS === 'ios' ? 3 : 5,
backgroundColor: '#fff',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingHorizontal: 20,
paddingVertical: 30
},
text_header: {
color: '#fff',
fontWeight: 'bold',
fontSize: 30
},
text_footer: {
color: '#05375a',
fontSize: 18
},
action: {
flexDirection: 'row',
marginTop: 10,
borderBottomWidth: 1,
borderBottomColor: '#f2f2f2',
paddingBottom: 5
},
textInput: {
flex: 1,
marginTop: Platform.OS === 'ios' ? 0 : -12,
paddingLeft: 10,
color: '#05375a',
},
button: {
alignItems: 'center',
marginTop: 50
},
signIn: {
width: '100%',
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10
},
textSign: {
fontSize: 18,
fontWeight: 'bold'
},
textPrivate: {
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: 20
},
color_textPrivate: {
color: 'grey'
}
});
this error appeared when I'm trying to authenticate it's the first time I've done this and I'm not sure how I can do it, mainly adapted to my code.