0

Im trying to change the opacity of a button when the user clicks it, (between 2 buttons the darker one would be his choice). For some reason whenever i click the button once the opacity doesn't change and it only changes after 2 clicks. Any ideas where im going wrong?

export default function lastName({ navigation }) {
  let [opac, setOpacity] = useState(0.3);

  return (
    <View style={styles.container}>
      <View
        style={{
          flex: 0.5,
          justifyContent: "flex-end",
          //backgroundColor: "red",
        }}
      >
        <Text style={styles.textStyle}>
          
         Select a button
        </Text>
      </View>
      <View
        style={{
          flex: 1,
          justifyContent: "flex-start",
        }}
      >
        <TouchableOpacity

          style={{
            marginTop: 70,
            alignItems: "center",
            justifyContent: "center",
            width: 180,
            height: 40,
            backgroundColor: "#004953",
            opacity: opac,/// here 
            borderRadius: 100,
          }}
          onPress={() => {
            setOpacity(1); // here
          }}
        >
          <Text
            style={{
              color: "white",
              textAlign: "center",
              fontSize: 18,
            }}
          >
            Button 1
          </Text>
        </TouchableOpacity>
isaac
  • 81
  • 1
  • 10

1 Answers1

0

Apparently, its a bug with touchable opacity, you have to wrap opacity in a view, refer to this link Dynamic Opacity not changing when component rerenders in react native

isaac
  • 81
  • 1
  • 10
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 30 '21 at 09:31