How to start react-native onTouchDown anination

Question

I am using Expo and the latest version of React-Native and I want to provide a subtle tactile feedback for Components like a View or Button.

I currently use animatable to start a pulse animation on the onPress() event but the animation only fires once the finger is released.

I want a subtle size reduction whilst press then a smooth tween back when released - that would feel elegant and not annoying to me.

Can this be done? I thought Animation or Animatable would have easily supported this but I can’t find any similar examples.

Answer 1

You could make your own touchable using the Gesture Responder System

Basically you'll use the props onStartShouldSetResponder, onResponderGrant, and onResponderRelease passed to an Animated.View.

class MyTouchable extends React.PureComponent {
  render(){
    <Animated.View
      style={{ your styles, and animation values }} 
      onStartShouldSetResponder={() => true}
      onResponderGrant={({ nativeEvent }) => {
        //run your animations here
      }}
      onResponderRelease={({ nativeEvent }) => {
        //animate back to zero, call your onPress function
        //passed via props
      }}
    />
  }
}