React-Native - How to create a disabled style for the TouchableOpacity component?
The easiest way is to use the same condition as your disabled prop.
Something like this should work :
style={!this.state.username || !this.state.password ? styles.disabled : styles.buttonWrapper}
The best way to have a disabled style for an element in React-Native
or React
is something like this:
style={
(!this.state.username || !this.state.password)
? {...styles.buttonWrapper, ...styles.buttonDisabled}
: styles.buttonWrapper
}
See in action: codesandbox
With using this example, you don't need to have duplicate styles for the button you just need to define disabled style like backgroundColor
or color
for the disabled button in styles.buttonDisabled
.