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();
  },