React Native styling with conditional

I'm new to react native. I'm trying to change the styling of the TextInput when there is an error.

How can I make my code not as ugly?

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

Use StyleSheet.create to do style composition like this,

make styles for text, valid text, and invalid text.

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

and then group them together with an array of styles.

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

For array styles, the latter ones will merge into the former one, with overwrite rule for the same keys.

Update your code as following:

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

Then outside your class component, write:

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

There are two ways, by inline or calling a function:

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

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

2)

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

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