perscrew / react-native-form-validator Goto Github PK

values = { name: 'test', date: '', checkDate: false }
const validForm = this.validate({
      name: { required: !checkDate },
      date: { required: checkDate }
})

function RegisterForm({data}) {
  const [field, setField] = useState('');
  const [value] = useDebounce(field, 1000);

  const {validate, isFieldInError, getErrorsInField, getErrorMessages} =
    useValidation({
      state: {field},
    });

  const _validateForm = () => {
    validate({
      field: data.rules,
    });
  };

  React.useEffect(() => {
    if (value.length !== 0) {
      _validateForm();
    }
  }, [value]);

  return (
    <View style={tailwind('px-8')}>
      <TextInput
        placeholder={data.placeholder}
        style={[
          tailwind('text-black p-0 text-xl pb-1 flex-row'),
          {
            borderBottomWidth: 1,
            borderBottomColor: '#808080',
          },
        ]}
        onChangeText={text => setField(text)}
        value={field}
      />
      <Text>{getErrorMessages()}</Text>
      <TouchableOpacity onPress={() => _validateForm()}>
        <Text>auwhdauywd</Text>
      </TouchableOpacity>
    </View>
  );
}

import React, { useState, useEffect, createContext } from 'react';

import auth from '@react-native-firebase/auth';
import { useValidation } from 'react-native-form-validator';

import { validationMsgs, validationRules } from './auth.validation';
import { ErrorText } from '../../features/auth/components/auth.styles';

export const AuthContext = createContext();

export const AuthContextProvider = ({ children }) => {
    const [ currentUser, setCurrentUser ] = useState(null);
    const [ passResetCode, setPassResetCode ] = useState('');

    const [ isLoading, setIsLoading ] = useState(false);
    const [ error, setError ] = useState(null);

    const [ displayName, setDisplayName ] = useState('');
    const [ emailAddress, setEmailAddress ] = useState('');

    const [ password, setPassword ] = useState('');
    const [ passwordMatch, setPasswordMatch ] = useState('');

    const { validate, getErrorsInField, isFormValid } =
        useValidation({
            state: {
                displayName,
                emailAddress,
                password,
                passwordMatch,
            },
            messages: validationMsgs,
        });

    const onLoginUser = async (email: string, pass: string) => {
        setIsLoading(true);

        try {
            await auth().signInWithEmailAndPassword(email, pass);
        } catch (e: any) {
            setError(e.toString());
        } finally {
            setIsLoading(false);
        }
    };

    // ...many other wrappers around various Firebase Auth functions, such as createUserWithEmailAndPassword

    const validateField = (field, numLines) => {
        const rules = {};
        rules[field] = validationRules[field];

        const isValid = validate(rules);

        return isValid ? null : getErrorsInField(field).map((e, i) => (
            <ErrorText key={i} numberOfLines={numLines}>
                {e.replace(/[A-Z]/g, letter => ` ${letter.toLowerCase()}`)
                    .replace(/^[a-z]/, letter => `${letter.toUpperCase()}`)}
            </ErrorText>
        ));
    };

    useEffect(() => {
        return auth().onAuthStateChanged(user => {
            if (user) {
                setCurrentUser(user);
            }
            setIsLoading(false);
        });
    }, []);

    return (
        <AuthContext.Provider
            value={{
                isAuthenticated: !!currentUser,
                currentUser,
                displayName,
                emailAddress,
                isLoading,
                error,
                password,
                passwordMatch,
                isFormValid,
                onLoginUser,
                onRegisterUser,
                onLogoutUser,
                onSendResetEmail,
                onResetPassword,
                setDisplayName,
                setEmailAddress,
                setError,
                setPassword,
                setPasswordMatch,
                validateField,
            }}>
            {children}
        </AuthContext.Provider>
    );
};

import React, { useContext, useState } from 'react';
import { ScrollView } from 'react-native';
import { ActivityIndicator, Button, Colors, TextInput } from 'react-native-paper';

import { AuthContext } from '../../../services/auth/auth.context';
import { ErrorText } from '../components/auth.styles';
import { StyledText } from '../../../components/typography/text.component';

export const LoginScreen = ({ navigation }) => {
    const { emailAddress, error, isLoading, isFormValid, onLoginUser,
        password, setEmailAddress, setPassword, validateField,
    } = useContext(AuthContext);

    const [ fieldErrors, setFieldErrors ] = useState({});

    const onSubmit = () => {
        if (isFormValid()) {
            onLoginUser(emailAddress, password);
        }
    };

    return (
        <StyledText fontSize="h5" marginTop={'55%'} marginBottom="16px">
            Meals 2 U
        </StyledText>
        <ScrollView>
            <TextInput
                label="Email address"
                value={emailAddress}
                textContentType="emailAddress"
                keyboardType="email-address"
                autoCapitalize="none"
                onChangeText={e => {
                    setEmailAddress(e);
                    setFieldErrors({ ...fieldErrors, emailAddress:
                        validateField('emailAddress', 2) });
                }} />
            {fieldErrors.emailAddress}
            <TextInput
                label="Password"
                value={password}
                textContentType="password"
                secureTextEntry
                autoCapitalize="none"
                onChangeText={p => {
                    setPassword(p);
                    setFieldErrors({ ...fieldErrors, password:
                        validateField('password', 6) });
                }} />
            {fieldErrors.password}
            {error && (
                <ErrorText numberOfLines={3}>{error}</ErrorText>
            )}
            {isLoading ? (
                <ActivityIndicator
                    animating={true}
                    color={Colors.blue300}
                />
            ) : (
                <>
                    <Button
                        icon="lock-open-outline"
                        mode="contained"
                        onPress={() => onSubmit()}
                        disabled={!emailAddress || !password || !isFormValid()}>
                        Login
                    </Button>
                    <Button
                        icon="account-plus"
                        mode="contained"
                        onPress={() => {
                            setEmailAddress('');
                            setPassword('');
                            navigation.navigate('Register');
                        }}>
                        Register
                    </Button>
                    <Button
                        icon="lock-reset"
                        isLastButton={true}
                        mode="contained"
                        onPress={() => {
                            setEmailAddress('');
                            setPassword('');
                            navigation.navigate('Reset Password');
                        }}>
                        Reset Password
                    </Button>
                </>
            )}
        </ScrollView>
    );
};

constructor() {
   super();
   this.state = { email: '' }
}

login = () => {
    this.validate({
      email : {required: true, email: true}
    });
  }

   <Input style={styles.input}
      value={this.state.email}
      keyboardType='email-address'
      ref={(ref) => this.email = ref}
     onChangeText={(email) => this.setState({email})}
   />

<Text>{this.getErrorMessages()}</Text>

<Button onPress={() => this.login()}>
   <Text>LOGIN</Text>
</Button>

constructor(props) {
    super(props);
    this.deviceLocale = "ptBR"
    this.state = {
        cpf: '',
        nome: '',
        email: ''
    };
    this.messages = {
        ptBR: {
            required: 'O campo é obrigatório.',
            email: 'O campo "{0}" precisa conter um email válido.',
            cpf: 'O campo "{0}" precisa conter um CPF válido.',
        }
    };

    this.defaultRules = {
        cpf: /(^\d{3}\.\d{3}\.\d{3}\-\d{2}$)|(^\d{2}\.\d{3}\.\d{3}\/\d{4}\-\d{2}$)/,
    };
}

export default class LoginComponent extends ValidationComponent {

    static navigationOptions = { title: 'Login Screen' };

    constructor(props) {
        super(props);

        this.state = {
            userName: '',
            password: '',
            // navigation :this.props.navigation,
        };

 loginTapped() {
        this.validate({
            userName: { required: true },
            password: { email: true }
        });

this.validate is not a function" in TypeError: this.validate is not a function << at _onSubmit

  _onSubmit() {
      this.validate({
        emailField: {email: true, required: true},
        passwordField: {required: true}
      });
  }
...
          <TextInput
            ref="emailField"   deviceLocale="fr"
            style={AppStyles.input}
            keyboardType="email-address"
            placeholder="Email Address"
            onChangeText={(emailField) => this.setState({emailField})} value={this.state.emailField} 
          />

    // TODO : Get the Location details 
    // TODO : Validate the type of data in the Regsiter Form 
    // TODO : 
    console.log("Validating the Form"); 
    this.validate({
        _password   : {required: true},
        _email      : {email: true},   // Sample: I am entering the "sdfjhsbdjfh" in the email field
        _name       : {required: true},
        _lastname   : {required: true},
        _phone      : {numbers: true}, 
        _alias_name : {required: true},
        _isd        : {required: true},
    })
    console.log(this.isFormValid); // returns the function on console
    if(this.isFormValid){   // Always true even if incorrect data is entered in form. 
        this.fireRegisterAPI();
    }