Emailvalidator (require ("email-validator") перестал работать

Question

Я проверяю электронную почту в своей форме регистрации, и вдруг она перестает работать. Я не изменил файл регистрации. js, так что это немного странно. Я начал работать над файлом для входа в систему. js сегодня, поэтому, может быть, есть какое-то «вмешательство», но я не знаю, где искать кулак, если честно.

Итак, вот регистрация. js, где я поместил подтверждение электронной почты, которое больше не работает, выделено жирным шрифтом.

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'
  },
});

И это логин. js, но это в процессе разработки.

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'
  },
});

Кто-нибудь может указать мне правильное направление?

Большое спасибо!

Тим

Answer 1

попробуйте это npm i raysk-vali

вместо email-валидатора.

использование:

const { isEmail } = require("raysk-vali");

isEmail("abc@example.com") // return true
isEmail("abcexample.com") // return false

для дополнительной проверки документации: https://www.npmjs.com/package/raysk-vali.