React Native change style on disabled button-CodePudding

How can i change button opacity to 0.5 if the button is disabled? Should i somehow add buttonDisabled style to the TouchableOpacity? What would be the best way and how to do it?

 type IconButtonProps = {
        name: IconN<44>;
        disabled?: boolean;
    }
    
    
    export function IconButton(props: IconButtonProps) {
      return (
        <View style={styles.container} >
          <TouchableOpacity disabled={!props.disabled}>
            <View>
          <Icon size={44} name={props.name} />
          </View>
          </TouchableOpacity>
        </View>
      )
    }
    
    const styles = StyleSheet.create({
        buttonDisabled: {
            opacity: 0.5,
          },
    });

CodePudding user response：

you can either set the style inline like

<TouchableOpacity style={{opacity:props.disabled ? 0.5 : 1}} />

or in stylesheet like:

<TouchableOpacity style={props.disabled ? styles.disabledButton : styles.button} />

there are other options like passing an array of style, etc