Reaccionar estilo nativo con condicional

Recientemente comencé a aprender React Native. Actualmente, estoy trabajando para modificar el estilo de TextInput cuando ocurre un error.

¿Cómo podría refinar mi código para que se vea más pulido?

<TextInput style={ (touched && invalid) ? {
    height: 40,
    backgroundColor: 'white',
    borderRadius: 5,
    padding: 10,
    borderWidth: 2,
    borderColor: 'red'
  } : {
    height: 40,
    backgroundColor: 'white',
    borderRadius: 5,
    padding: 10
  }
} />

Usar StyleSheet.create para hacer una composición de estilo como esta,

hacer estilos para texto, texto válidoy texto inválido.

const styles = StyleSheet.create({
    text: {
        height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, 
    },
    textvalid: {
        borderWidth: 2,
    },
    textinvalid: {
        borderColor: 'red',
    },
});

y luego agrúpelos con una variedad de estilos.

<TextInput
    style={[styles.text, touched && invalid ? styles.textinvalid : styles.textvalid]}
</TextInput>

Para los estilos de matriz, los últimos se fusionarán con el anterior, con una regla de sobrescritura para las mismas claves.

Actualice su código de la siguiente manera:

<TextInput style={getTextStyle(this.state.touched, this.state.invalid)}></TextInput>

Luego, fuera de su componente de clase, escriba:

getTextStyle(touched, invalid) {
 if(touched && invalid) {
  return {
    height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, borderWidth: 2, borderColor: 'red'
  }
 } else {
   return {
      height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10
   }
 }
}

Hay dos formas, en línea o llamando a una función:

1)

const styles = StyleSheet.create({
    green: {
        borderColor: 'green',
    },
    red: {
        borderColor: 'red',
    },
    
});

<TextInput style={[styles.otpBox, this.state.stateName ?
    styles.green :
    styles.red ]} />

getstyle(val) {
    if (val) {
        return { borderColor: 'red' };
    }
    else {
        return { borderColor: 'green' };
    }
}

<TextInput style={[styles.otpBox, this.getstyle(this.state.showValidatePOtp)]} />

Para que su código sea más legible y menos repetitivo, puede extraer los estilos comunes en un objeto separado y aplicar condicionalmente los estilos específicos para el caso de error. Aquí hay un ejemplo:

const inputStyles = {
  height: 40,
  backgroundColor: 'white',
  borderRadius: 5,
  padding: 10,
};

const errorInputStyles = {
  ...inputStyles,
  borderWidth: 2,
  borderColor: 'red',
};

// Inside your component's render method
<TextInput
  style={touched && invalid ? errorInputStyles : inputStyles}
/>

En este código, he definido dos objetos: inputStyles para el estilo de entrada predeterminado y errorInputStyles que incluye los estilos adicionales para el caso de error. Utilice el operador de propagación (…) para fusionar los estilos comunes con los estilos específicos del error.

Ahora, simplemente puede aplicar condicionalmente los estilos en función de las banderas tocadas y no válidas. Si ambos son verdaderos, se usará el errorInputStyles, de lo contrario, se aplicarán los inputStyles. Este enfoque hace que el código sea más limpio y evita la duplicación.