React Native: Customizing Touchableopacity Animation Speed

According to the TouchableOpacity docs, there is an activeOpacity prop to change the end opacity level and there is a setOpacityTo function to animate the component to any opacity

Solution 1:

That'd be the duration part of the method...

setOpacityTo(value: number, duration: number)

React-native is using setOpacityTo in the background to animate the opacity using the setNativeProps with TouchableOpacity.

setOpacityTo(value) {
  // Redacted: animation related code
  this.refs[CHILD_REF].setNativeProps({
    opacity: value
  });
},

So, it looks like you can also just create your own Animated event if you wanted to. Here's how touchable opacity uses setOpacityTo, making sure to set the useNativeDriver to true.

setOpacityTo:function(value:number,duration:number) {
    Animated.timing(this.state.anim,
      {
        toValue:value,
        duration:duration,
        easing:Easing.inOut(Easing.quad),
        useNativeDriver:true,
      }
    ).start();
  },