Change color button when text input are filed

Question

I need to set the button to gray when the text input is empty and once ALL the fields are filled in, to change it to blue.

login.tsx

import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity } from 'react-native'; import ButtonOutline from '../../../infrastructure/components/buttons/button-outline-primary/index'; import ButtonPrimary from '../../../infrastructure/components/buttons/button-primary/index'; import styles from './styles'; import { useForm, Controller } from 'react-hook-form';

export default function LogInComponent () {

const { register, setValue, handleSubmit, control, reset, formState: { errors } } = useForm();
const onSubmit = data => {
    console.log(data);
};



return (
        <View style={styles.container}>
            <View style={styles.boxTitle}>
                <Text>YPF - GAS</Text>
            </View>
            <View style={styles.boxForm}>
                <View style={styles.boxInput1}>
                    <Text style={styles.text}>Patente</Text>
                    <Controller
                    control={control}
                    render={({field: { onChange, onBlur, value }}) => (
                    <TextInput
                        style={styles.FormInput}
                        onBlur={onBlur}
                        onChangeText={value => onChange(value)}
                        value={value}
                    />
                    )}
                    name="patente"
                    rules={{required: true}}
                />
                </View>
                <View style={styles.boxInput}>
                    <Text style={styles.text}>Planta  </Text>
                    <Controller
                    control={control}
                    render={({field: { onChange, onBlur, value }}) => (
                    <TextInput 
                    style={styles.FormInput}
                    onBlur={onBlur}
                    onChangeText={value => onChange(value)}
                    value={value} 
                    />
                    )}
                    name="planta"
                    rules={{required: true}}
                />
                </View>
                <View style={styles.boxInput}>
                    <Text style={styles.text}>Usuario</Text>
                    <Controller
                    control={control}
                    render={({field: { onChange, onBlur, value }}) => (
                    <TextInput 
                    style={styles.UserFormInput}
                    onBlur={onBlur}
                    onChangeText={value => onChange(value)}
                    value={value}
                    />
                    )}
                    name="usuario"
                    rules={{required: true}}
                />
                </View>
                <View style={styles.boxButton}>
                    <ButtonOutline style={styles.button} title= 'Cerrar'></ButtonOutline>
                        <ButtonPrimary onPress={handleSubmit(onSubmit)} style={styles.button}  title= 'Ingresar'></ButtonPrimary>
                </View>
            </View>
        </View>
);

}

---

styles.tsx

import { StyleSheet } from 'react-native'; import Colors from '../../../application/common/colors';

export default StyleSheet.create({ container: { flex: 1, backgroundColor: Colors.surface }, boxTitle: { flex: 1, padding: 5, alignItems: 'flex-start', justifyContent: 'center', backgroundColor: Colors.background }, boxForm: { flex: 9, padding: 5 }, boxInput: { flex: 0, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', marginTop: 30 }, boxInput1: { flex: 0, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', marginTop: 70 }, FormInput: { padding: 0, lineHeight: 24, fontSize: 20, width: 168, height: 40, backgroundColor: Colors.background, borderRadius: 4, borderWidth: 2, borderColor: '#AAAAAA', }, UserFormInput: { padding: 0, fontSize: 20, lineHeight: 24, width: 168, height: 40, backgroundColor: Colors.surface, borderRadius: 4, borderWidth: 2, borderColor: '#AAAAAA', }, text: { right: 60, fontSize: 20, lineHeight: 24 }, boxButton: { top: 53, flex: 1, flexDirection: 'row', justifyContent: 'space-around' }, button: { width: 216, height: 40, fontSize: 18, lineHeight: 22 },

});

Answer 1

Use TouchableOpacity as Button in component

    import React, {useState, useEffect} from 'react';
    import {
      Text,
      View,
      StyleSheet,
      TextInput,
      TouchableOpacity,
    } from 'react-native';
    
    const ButtonColor = () => {
      const [firstName, setFirstName] = useState('');
      const [lastName, setLastName] = useState('');
      const [btnColor, setBtnColor] = useState(false);
    
      useEffect(() => {
        if (firstName !== '' && lastName !== '') {
          setBtnColor(true);
        } else {
          setBtnColor(false);
        }
      }, [lastName]);
    
      return (
        <View style={styles.container}>
          <View style={styles.secondContainer}>
            <View style={styles.formContainer}>
              <View style={styles.labelContainer}>
                <Text style={{color: '#000'}}>First Name</Text>
              </View>
              <View style={styles.textContainer}>
                <TextInput
                  defaultValue={firstName}
                  placeholder={'Type First Name'}
                  onChangeText={val => setFirstName(val)}
                />
              </View>
            </View>
            <View style={styles.formContainer}>
              <View style={styles.labelContainer}>
                <Text style={{color: '#000'}}>Last Name</Text>
              </View>
              <View style={styles.textContainer}>
                <TextInput
                  defaultValue={lastName}
                  placeholder={'Type Last Name'}
                  onChangeText={val => setLastName(val)}
                />
              </View>
            </View>
            <View style={styles.formContainer}>
              <TouchableOpacity
                style={
                  btnColor
                    ? styles.filledContainerButton
                    : styles.normalContainerButton
                }>
                <Text style={styles.btnTextColor}>Button</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      secondContainer: {
        width: '85%',
        height: 300,
        marginTop: '40%',
        paddingHorizontal: 20,
        paddingVertical: 20,
        // alignItems: 'center',
        alignSelf: 'center',
        borderRadius: 5,
        borderWidth: 2,
        borderColor: 'black',
      },
      formContainer: {
        marginBottom: 20,
      },
      labelContainer: {
        marginBottom: 5,
      },
      textContainer: {
        borderWidth: 1,
        borderColor: '#d3d3d3',
        borderRadius: 3,
        height: 40,
      },
      normalContainerButton: {
        backgroundColor: '#808080',
        height: 40,
        width: '80%',
        alignSelf: 'center',
        // alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 9,
      },
      filledContainerButton: {
        backgroundColor: 'blue',
        height: 40,
        width: '80%',
        alignSelf: 'center',
        // alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 9,
      },
      btnTextColor: {
        color: '#fff',
      },
    });
    
    export default ButtonColor;