[React Native] Login Screen Example

login.js

// We use react-hook-form library for form validations
// We use react-native-elements library for UI components

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'

import { StatusBar, View, TextInput, ActivityIndicator } from 'react-native'
import { Button, Text } from 'react-native-elements'
import { useForm } from 'react-hook-form'

import LinearGradient from 'react-native-linear-gradient'

import { actions } from '../../store'

import styles from './Login.styles'

const Login = () => {
    const loading = useSelector((state) => state.authentication.loginLoading)
    const dispatch = useDispatch()

    const { register, setValue, errors, getValues, handleSubmit } = useForm()

    function login (params) {
        dispatch(actions.authenticationActions.login(params))
    }

    function validate (field, value) {
        const values = getValues()
    
        if (value !== null && !value.length && values[field].length) setValue(field, value, true)
    
        errors[field] ? setValue(field, value, true) : setValue(field, value)
    }

    function isValidType (field, type) {
        return errors[field] && errors[field].type === type
    }

    function getInputStyles (field) {
        return { 
            ...styles.input,
            borderBottomColor: isValidType(field, 'required') ? '#F5A623' : '#FFFFFF'
        }
    }

    return (
        <>
            <StatusBar barStyle="dark-content" />

            <View style={styles.container}>
                <LinearGradient
                    style={styles.topGradient}
                    locations={[0, 1]}
                    useAngle={true}
                    angle={139.63}
                    angleCenter={{ x: 0.5, y: 0.5 }}
                    colors={['#98D7B5', '#F8E68C']}
                />

                <View style={styles.formContainer}>
                    <View style={styles.fieldContainer}>
                        <Text style={styles.inputTitle}>Email</Text>

                        <TextInput
                            placeholder="Email"
                            ref={register({ name: 'email' }, { required: true })}
                            onChangeText={email => validate('email', email)}
                            style={getInputStyles('email')}
                            placeholderTextColor={'rgba(256, 256, 256, 0.4)'}
                            autoCompleteType="email"
                            autoCapitalize="none"
                            onSubmitEditing={handleSubmit(login)}
                        />

                        {isValidType('email', 'required') && <Text style={styles.inputTextError}>Please enter your email.</Text>}
                    </View>

                    <View style={styles.fieldContainer}>
                        <Text style={styles.inputTitle}>Password</Text>

                        <TextInput
                            placeholder="Password"
                            ref={register({ name: 'password' }, { required: true })}
                            onChangeText={password => validate('password', password)}
                            style={getInputStyles('password')}
                            placeholderTextColor={'rgba(256, 256, 256, 0.4)'}
                            secureTextEntry={true}
                            autoCompleteType="password"
                            onSubmitEditing={handleSubmit(login)}
                        />

                        {isValidType('password', 'required') && <Text style={styles.inputTextError}>Please enter your password.</Text>}
                    </View>
                </View>

                <View style={styles.buttonContainer}>
                    {
                        loading 
                        ? (
                            <View style={styles.buttonContainerStyle}>
                                <ActivityIndicator style={styles.buttonStyle} />
                            </View>
                        )
                        : <Button
                            type="outline"
                            title="Login"
                            containerStyle={styles.buttonContainerStyle}
                            buttonStyle={styles.buttonStyle}
                            titleStyle={styles.buttonTitleStyle}
                            onPress={handleSubmit(login)}
                        />
                    }
                </View>
            </View>
        </>
    )
}

export default Login