React Native styling with conditional
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:
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)]} />