React-Native - How to create a disabled style for the TouchableOpacity component?

Question

How do I apply disabled style for a TouchableOpacity component?

<TouchableOpacity 
  style={styles.buttonWrapper } 
  onPress={this.userLogin.bind(this)}
  disabled={ !this.state.username || !this.state.password }
>
  <Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>

Answer 1

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}

Answer 2

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.