React Native change button opacity conditionally

Question

I created a floating action button and I want to change the opacity when i reach the end of my ScrollView . So I use:

<TouchableOpacity
  activeOpacity={0.5}
  onPress={() => {
    this.scrollView.scrollToEnd({ animated: true });
    this.setState({ buttonIsRight: false });
  }}
  style={[
    styles.rightFAB,
    this.state.buttonIsRight ? { opacity: 1 } : { opacity: 0 }
  ]}
>
  <Image
    source={require("../icons/plus.png")}
    style={{
      resizeMode: "center",
      aspectRatio: 1 / 1,
      tintColor: "#888888"
    }}
  />
</TouchableOpacity>;

but there is no change in opacity at all! I set onPress to scroll to end and change a state so i can change the opacity based on that state.

Any idea?

Thanks in advance!

Answer 1

There is already an issue with TouchableOpacity when changing the opacity like the way you want to.

Check this issue page, https://github.com/facebook/react-native/issues/17105

The simple solution till its fixed in the react-native core is to wrap the children components of TouchableOpacity in a View and apply the opacity logic to that View.

Simple example,

class App extends React.Component {

  state = {
    opacity: 1
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity>
          {/* Apply opacity logic to the wrapper View */} 
          <View 
            style={{
              backgroundColor: 'grey', 
              opacity: this.state.opacity
            }} 
          >
            <Text>My Button</Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          style={{backgroundColor: 'orange'}}
          onPress={() => this.setState({opacity: !!this.state.opacity? 0 : 1}) }
        >
          <Text>Change opacity</Text>
        </TouchableOpacity>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

A working example in snack.expo: https://snack.expo.io/r1vMfVg8m

Try my work around on both iOS and Android. Thanks

Answer 2

May you can achieve this by defining style inline rather than using styles.rightFAB.

if styles.rightFAB = { alignItems: 'center', padding: 10 } then define them in TouchableOpacity style.

<TouchableOpacity
  style={{
   alignItems: 'center', 
   padding: 10,
   opacity: this.state.buttonIsRight ?  1: 0 
  }}
 >

Answer 3

In element using

    <View>
      <OnPlay />
    </View>

In function using

  function OnPlay() {
     const [iconPlay, setIconPlay] = useState(false);
     const [opacity, setOpacity] = useState(0);
     const show = <Image source={require('../assets/images/play-circle-outline.svg')} style={styles.welcomeImage} />;
     const hide = <Image source={require('../assets/images/pause-circle-outline.svg')} style={styles.welcomeImage} />;
         function onPressButton() {
           setIconPlay(!iconPlay);
           let val = !iconPlay == false ? 1 : 0;
           setOpacity(val);
         }
  return (
    <RectButton onPress={onPressButton} activeOpacity={opacity}  >
      {iconPlay ? show : hide}
    </RectButton>
  )
}

Hope this help.