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

user_4245654 0
Viewed 29882

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>
react-native reactjs javascript
2 Answers

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.

user_95161730
Related