Email address is badly formatted error without even typing anything - react-native

Question

I am trying to do firebase authentication using email and password for my expo app. On the login screen, if i press on the login button, it gives me the above message, " email address is badly formatted'.
The signup button should navigate to sign up page, but clicking on the button also gives me the same error.
export default class App extends React.Component{
constructor(props)
{ super(props);
this.state = { isLoadingComplete: false,
};
if (!firebase.apps.length){firebase.initializeApp(ApiKeys.FirebaseConfig );}
}
render()
{
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
{Platform.OS === 'android' && <View style={styles.statusBarUnderlay} />}
{ <AppNavigator/> }
</View>
);
}
}
_loadResourcesAsync = async () => {
return Promise.all([
Asset.loadAsync([
require('./assets/images/robot-dev.png'),
require('./assets/images/robot-prod.png'),
]),
Font.loadAsync({
...Ionicons.font,
'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
}),
]);
};
_handleLoadingError = error => {
console.warn(error);
};
_handleFinishLoading = () => {
this.setState({ isLoadingComplete: true });
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
statusBarUnderlay: {
height: 24,
backgroundColor: 'rgba(0,0,0,0.2)',
},
});
## login page
export default class LoginScreen extends React.Component {
constructor(props)
{
super(props);
this.state = {
email:' ' ,password:' ',
}
}
LoginButtonPress= (email, password) =>
{
try{
firebase.auth().signInWithEmailAndPassword(this.state.email.trim(), this.state.password)
.then(function(user){console.log(user)
})
}
catch(error){
Alert.alert(error.message);
}
}
render()
{
return (
<ScrollView style= {styles.container}>
<Container style ={styles.container}>
<Content>
<Form>
<Item floatingLabel>
<Label> Email Address</Label>
<Input autoCorrect = {false} autoCapitalize ="none"
onChangeText= {(email) => this.setState({email})}/>
</Item>
<Item floatingLabel>
<Label> Password</Label>
<Input secureTextEntry ={true}
autoCorrect = {false}
autoCapitalize = "none"
onChangetext = { (password)=> this.setState({password})}/>
</Item>
<Button success info onPress ={()=>this.LoginButtonPress(this.state.email, this.state.password)}>
<Text> LogIn </Text>
</Button>
<Button primary onPress = {()=> this.props.navigation.navigate('SignupScreen')}>
<Text> First Time User? SignUpNow </Text>
</Button>
<Button onPress ={()=> this.props.navigation.navigate('ResetPassScreen')}>
<Text> Forgot Password? Reset Now </Text>
</Button>
</Form>
</Content>
</Container>
</ScrollView>
);
}}
##signup page
export default class SignupScreen extends React.Component{
constructor(props)
{
super(props);
this.state = { email: '',
password:''
}
}
SignUpButtonPress= (email, password)=>
{
try {
firebase.auth().createUserWithEmailAndPassword(this.state.email.trim(), this.state.password)
}
catch(error){
Alert.alert(error.message);
}
}
render ()
{
return (
<ScrollView>
<Container style = {styles.container}>
<Content>
<Form>
<Item floatingLabel>
<Label> Email Address</Label>
<Input autoCapitalize = "none" autoCorrect ={false} emailonChangeText ={(email)=>this.setState({email})} />
</Item>
<Item floatingLabel>
<Label> Password</Label>
<Input secureTextEntry = {true} onChangeText ={(password)=>this.setState({password})} />
</Item>
<Button success info onPress = {this.SignUpButtonPress(this.state.email, this.state.password)}>
<Text> SignUp </Text>
</Button>
</Form>
</Content>
</Container>
</ScrollView>
);
}

Answer 1

Your onPress for the signup button is immediately calling the SignupButtonPress callback on every render. Change
// notice that `onPress` is directly calling `this.SignUpButtonPress`
<Button success info onPress = {this.SignUpButtonPress(this.state.email, this.state.password)}>
To
<Button success info onPress = {() => {this.SignUpButtonPress(this.state.email, this.state.password);}}>