React App Template :: Login.js

Login.Js1.js

import * as React from 'react';
import { useState, useContext } from 'react';
import { Text, View, TextInput, Button, Image } from 'react-native';
import { useForm, Controller } from 'react-hook-form';
import { userStyles } from '../styles/usermgt';
import { Context as AuthContext } from '../context/AuthContext';
import StyledButton from '../components/Button'

function LoginScreen({ navigation }) {
    const { register, setValue, handleSubmit, control, reset, formState: { errors } } = useForm({
        defaultValues: {
            email: 'test@test.com',
            password: 'password'
        }
    });
    const { state, signin } = useContext(AuthContext);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    // const { authState: {isLoggedIn} } = useContext(GlobalContext);

    const onSubmit = data => {
        setEmail(data.email);
        setPassword(data.password);
        signin( { email: data.email, password: data.password });
        console.log(data);
        console.log(this.state)
    };

    const onChange = arg => {
        return {
            value: arg.nativeEvent.text,
        };
    };

    console.log(state);
    console.log('errors', errors);

    return (
        <View style={userStyles.container}>
            <View style={userStyles.headerContainer}>
                <Image
                    style={userStyles.headerImage}
                    source={require('../images/mascot.png')}
                />
                <Text style={userStyles.headerText}>Bartender Assistant</Text>
            </View>
            <Text style={userStyles.title}>Please Login to Continue</Text>
            { state.errorMessage ? <Text style={userStyles.errorMessage}>{state.errorMessage}</Text> : null }
            <Text style={userStyles.label}>Email</Text>
            <Controller
                control={control}
                render={({field: { onChange, onBlur, value }}) => (
                    <TextInput
                        autoCapitalize="none"
                        autoCompleteType="email"
                        autoCorrect={false}
                        keyboardType="email-address"
                        returnKeyType="next"
                        style={userStyles.input}
                        onBlur={onBlur}
                        // onChangeText={setEmail(value)}
                        onChangeText={value => onChange(value)}
                        value={value}
                    />
                )}
                name="email"
                rules={{ required: true }}
            />
            <Text style={userStyles.label}>Password</Text>
            <Controller
                control={control}
                render={({field: { onChange, onBlur, value }}) => (
                    <TextInput
                        style={userStyles.input}
                        onBlur={onBlur}
                        // onChangeText={setPassword(value)}
                        onChangeText={value => onChange(value)}
                        value={value}
                        secureTextEntry
                    />
                )}
                name="password"
                rules={{ required: true }}
            />

            <View style={userStyles.switchView}>
                <StyledButton
                    title="Login"
                    onPress={(handleSubmit(onSubmit))}
                />

                <Text style={userStyles.switchText}>Don't have an account?</Text>
                <Button
                    title="Sign Up"
                    onPress={() => navigation.replace('Signup')}
                />
            </View>
        </View>
    );
};

export default LoginScreen