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!

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!

• javascript
• reactjs
• react-native
• ecmascript-6

• 1 create an opacity constant and then use it? const opacity = condition ? 0.5 : 0.8; activeOpacity={opacity} – Nerius Jok Commented Aug 14, 2018 at 9:20
• Why i can't use state? – MoKhajavi75 Commented Aug 14, 2018 at 9:21
• u can do with that as well. – Nerius Jok Commented Aug 14, 2018 at 9:22
• 1st of all check that this.state.buttonIsRight value is for else condition. this.state.buttonIsRight value should be null, false or undefined. may be condition is not working 2nd thing is check opacity by apply without condition. is it working or not than let me know – anil sidhu Commented Aug 14, 2018 at 9:37
• Not working and condition is ok – MoKhajavi75 Commented Aug 14, 2018 at 9:43

3 Answers 3

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

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

The simple solution till its fixed in the react-native core is to wrap the children ponents 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

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 
  }}
 >

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.weleImage} />;
     const hide = <Image source={require('../assets/images/pause-circle-outline.svg')} style={styles.weleImage} />;
         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.