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 },

});

You should edit your post so that the code blocks are formatted correctly. Use the three ticks ` before and after the code block. It will make your code look more readable. Example: var x = "Hello World!" — Bellarose143
– Bellarose143, Commented Jan 27, 2023 at 2:09

Thomasino73 · Accepted Answer · 2023-11-27 05:49:48Z

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;

I don’t think ‘btnColor’ needs to use ’useState’ since its value is decided exclusively by ‘useState’ variables
Thank youuu!!! Changing the text entries with useStates solved the problem for me. I had to delete the React Hook Form library.
@FrancoDorneles You can submit by having a submission method that contains whatever you like with an onPress attribute: <Button title="Contact Us" color="#708090" onPress={submit} /> You would define the method to do whatever you need on submit and place the method name in that onPress part of the Button.

Collectives™ on Stack Overflow

Change color button when text input are filed

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related