Emailvalidator (require("email-validator") stopped working - react-native

Question

I am doing email validation in my Signup form and all of a sudden it doesn't work anymore. I didn't change the signup.js file so it is a bit strange. I started working on the login.js file today so maybe there is some 'interference', but I don't have any idea where to look fist to be honest.
So here is the signup.js, where I put the emailvalidation that doesn't work anymore in bold.
import React, { Component } from 'react';
import { Text, StyleSheet, TouchableOpacity, Image, TextInput, View } from 'react-native';
import firebase from 'react-native-firebase';
var validator = require("email-validator");
export default class loginComponent extends Component {
constructor(props) {
super(props);
this.state = {firstName: ''};
this.state = {lastName: ''};
this.state = {email: ''};
this.state = {password: ''};
this.state = {emailValidated: false};
this.state = {errorMessage: null};
}
handleSignUp = () => {
firebase
.auth()
.createUserWithEmailAndPassword(this.state.email, this.state.password)
.then(() => this.props.navigation.navigate('Main'))
.catch(error => this.setState({ errorMessage: error.message }))
}
render() {
function renderEmailValidationState(emailInput) {
if(validator.validate(emailInput)) {
return false;
} else {
return true;
}
}
return (
<View style={styles.container}>
<View style={styles.logoContainer} >
<Image source={require('./assets/logo.png')} style={styles.logo}></Image>
<Text style={styles.slush}>
Lenen of huren, {"\n"} bij de buren!
</Text>
</View>
<View style={styles.formContainer}>
<View style={styles.inputTextFieldContainer}>
{this.state.errorMessage &&
<Text style={{ color: 'red' }}>
{this.state.errorMessage}
</Text>
}
<TextInput
style={styles.inputTextField}
placeholder="Enter you first name"
value={this.state.text}
backgroundColor="white"
onChangeText={(firstName) => this.setState({firstName})}
/>
<TextInput
style={styles.inputTextField}
placeholder="Enter you last name"
value={this.state.text}
backgroundColor="white"
onChangeText={(lastName) => this.setState({lastName})}
/>
<TextInput
style={styles.inputTextField}
placeholder="Enter your e-mail"
value={this.state.text}
backgroundColor="white"
onChangeText={(email) => this.setState({email})}
/>
<TextInput
style={styles.inputTextField}
placeholder="Enter your password"
value={this.state.password}
backgroundColor="white"
onChangeText={(password) => this.setState({password})}
/>
<TouchableOpacity
disabled= {renderEmailValidationState(this.state.email)}
style={styles.buttonContainer}
onPress={this.handleSignUp}
>
<View>
<Text style={styles.buttonText}>Sign up!</Text>
</View>
</TouchableOpacity>
<Text style={styles.plainText}>
Already a user?
</Text>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => this.props.navigation.navigate('Login')}
>
<View>
<Text style={styles.buttonText}>Login!</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 2,
padding:10,
backgroundColor:'#c6f1e7',
alignItems: 'stretch',
justifyContent: 'space-around'
},
logoContainer: {
padding: 10,
height: 250,
justifyContent: 'center' ,
alignItems: 'center'
},
logo: {
width: 250,
height: 250
},
slush: {
fontSize: 20,
color: '#59616e',
fontFamily: 'Raleway-Regular'
},
formContainer: {
flex:1,
padding: 10,
},
inputTextFieldContainer: {
padding: 100,
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 30
},
inputTextField: {
padding: 10,
height: 40,
width: 300,
marginBottom: 10,
fontSize: 16,
fontFamily: 'Raleway-Regular',
},
buttonContainer: {
padding: 10,
marginBottom: 20,
width: 300,
alignItems: 'center',
backgroundColor: '#acdcd7',
},
buttonText: {
padding: 1,
fontSize: 16,
color: '#59616e',
fontFamily: 'Raleway-Regular',
},
plainText: {
padding: 1,
fontSize: 16,
marginBottom: 5,
fontFamily: 'Raleway-Regular',
color: '#59616e'
},
});
And this is the login.js, but that is work in progress.
import React, { Component } from 'react';
import { Text, StyleSheet, TouchableOpacity, Image, TextInput, View } from 'react-native';
import firebase from 'react-native-firebase';
var validator = require("email-validator");
export default class loginComponent extends Component {
constructor(props) {
super(props);
this.state = {email: ''};
this.state = {password: ''};
this.state = {emailValidated: false};
this.state = {errorMessage: null};
}
render() {
function renderEmailValidationState(emailInput) {
if(validator.validate(emailInput)) {
return false;
} else {
return true;
}
}
return (
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image source={require('./assets/logo.png')} style={styles.logo}></Image>
<Text style={styles.slush}>
Huren bij de buren!
</Text>
</View>
<View style={styles.formContainer}>
<View style={styles.inputTextFieldContainer}>
{this.state.errorMessage &&
<Text style={{ color: 'red' }}>
{this.state.errorMessage}
</Text>
}
<TextInput
style={styles.inputTextField}
placeholder="Enter your e-mail"
value={this.state.text}
backgroundColor="white"
onChangeText={(email) => this.setState({email})}
/>
<TextInput
style={styles.inputTextField}
placeholder="Enter your password"
value={this.state.password}
backgroundColor="white"
onChangeText={(password) => this.setState({password})}
/>
<TouchableOpacity
**disabled= {renderEmailValidationState(this.state.email)}**
style={styles.buttonContainer}
onPress={this.handleSignUp}
>
<View>
<Text style={styles.buttonText}>Sign up!</Text>
</View>
</TouchableOpacity>
<Text style={styles.plainText}>
Don't have an account?
</Text>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => this.props.navigation.navigate('SignUp')}
>
<View>
<Text style={styles.buttonText}>Register!</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 2,
padding:10,
backgroundColor:'#c6f1e7',
alignItems: 'stretch',
justifyContent: 'space-around'
},
logoContainer: {
padding: 10,
height: 350,
justifyContent: 'center' ,
alignItems: 'center'
},
logo: {
width: 250,
height: 250
},
slush: {
fontSize: 25,
color: '#59616e',
fontFamily: 'Raleway-Regular'
},
formContainer: {
flex:1,
padding: 10,
},
inputTextFieldContainer: {
padding: 100,
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 30
},
inputTextField: {
padding: 10,
height: 40,
width: 300,
marginBottom: 10,
fontSize: 16,
fontFamily: 'Raleway-Regular',
},
buttonContainer: {
padding: 10,
marginBottom: 20,
width: 300,
alignItems: 'center',
backgroundColor: '#acdcd7',
},
buttonText: {
padding: 1,
fontSize: 16,
color: '#59616e',
fontFamily: 'Raleway-Regular',
},
plainText: {
padding: 1,
fontSize: 16,
marginBottom: 5,
fontFamily: 'Raleway-Regular',
color: '#59616e'
},
});
Can anyone point me in the good direction?
Thanks a lot!
Tim

Answer 1

try this npm i raysk-vali
instead of email-validator.
usage:
const { isEmail } = require("raysk-vali");
isEmail("abc#example.com") // return true
isEmail("abcexample.com") // return false
for more checkout the documentation : https://www.npmjs.com/package/raysk-vali.