Source:  Twitter logo

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>

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}
23 users liked answer #0dislike answer #023
Antoine Grandchamp profile pic
Antoine Grandchamp

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.

3 users liked answer #1dislike answer #13
Soroush Chehresa profile pic
Soroush Chehresa

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).