24

I am trying to figure out how to change the volume of the opacity of TouchableOpacity component of React-Native, meaning that I do not like the default value of the opacity when the press is performed, and I would like the opacity to be less transparent.

According to the documentation for this purpose the Animated API should be used:

Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.

So, I did it, that's how it looks:

<Animated.View style={{ opacity: this.state.opacity._value }}>
    <TouchableOpacity 
        onPress={this.hideKeyboard.bind(this)}
        style={{ opacity: this.state.opacity._value }}
    >
        <Text style={buttonTextStyle}>Cancel</Text>
    </TouchableOpacity>
</Animated.View>

The hideKeyboard method, that is being invoked onPress, calls the changeOpacity method from within it, that's how it looks:

changeOpacity() {
    Animated.timing(
        this.state.opacity, 
        {
            toValue: this.state.opacity === 1 ? 0 : 1,
            duration: 500
        }
    ).start();
}

this.state.opacity is declared in the constructor:

constructor(props) {
    super(props);
    this.state = { opacity: new Animated.Value(1) };
}

Having all of this, the behavior (the volume of the opacity onPress of TouchableOpacity) does not change, it is still stays default. The documentation also vaguely introduces setOpacityTo method, but I can't figure out how to use it due to the thoroughness of the description provided in the documentation. How can I perform a manual configuration of the opacity?

Eduard
  • 8,437
  • 10
  • 42
  • 64

1 Answers1

69

Have you tried this 

<TouchableOpacity 
  activeOpacity={.7} // default is .2
  ... other props here
/>
Ravi Raj
  • 6,247
  • 2
  • 30
  • 32
  • Thank you, but I tried that and the animation is too slow. It does not just pop between two values, but stays on .7 for a while and only then goes back. – Eduard Aug 03 '17 at 10:55
  • 3
    That problem could happen in development mode generally in react native, try building a production version and check. – Ravi Raj Aug 03 '17 at 10:58
  • I created a new project which just has this TouchableOpacity and there it works as I would expect. So, the amount of code that I have in my actual project affects its performance even with Debugger turned-off, is that Correct? – Eduard Aug 03 '17 at 11:20
  • It does not depend upon the amount of code, should work properly in production and on real devices. – Ravi Raj Aug 03 '17 at 11:26
  • Well, the basic project consisting only of TouchableOpacity did work correctly in the testing mode, but the actual project, as I said above, does not change the opacity back to normal as quickly as the test project. – Eduard Aug 03 '17 at 11:37
  • https://snack.expo.io/SkjYnYlDW check this snack demo, works fine. Working with android or ios – Ravi Raj Aug 03 '17 at 11:46
  • Exactly. The new project that I have created (which has the same code as yours) and tested in the **debugging** mode, works perfectly fine as well, but my main app consisting of multiple components and lines of code performs the opacity animation a bit slowly (not laggy, just unpleasantly slowly). So I am just wondering if the reason for this slow animation is the amount of code or something else. – Eduard Aug 03 '17 at 11:51