onPress not working on Animatable component

Question

Is anything jumping out as wrong here? I am trying to have an onPress behavior on my Animatable component so when i drag it around with a gesture it will move, but if i click it it will fire that onPress behavior ...

It's currently a TouchableOpacity because that is what another stackoverflow answer suggested, yet when I use the createAnimatedComponent function with a TouchableOpacity I lose the ability to actually move it with gestures.

Any ideas?

return (
      <AnimatedTouchable
        style={[
          styles.card,
          this.state.active ? { zIndex: 2 } : { zIndex: 1 },
          {
            transform: [
              { translateX: this._animatedValue.x },
              { translateY: this._animatedValue.y },
              { rotate: interpolatedRotation },
              { scaleX: this.scale },
              { scaleY: this.scale }
            ]
          }
        ]}
        onPress={this.sayHi}
        {...this._panResponder.panHandlers}
      >
        <Text style={styles.cardNumber}>{this.props.id}</Text>
      </AnimatedTouchable>
    );

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

With this current setup it only fires the onPress function, but non of my gesture animations go through.

Answer 1

Animated does not support it. It may not cause errors, but functions may not work properly.

createAnimatedComponent() can be used to make a component animatable.

• Animated exports the following animatable components using the above wrapper:
• Animated.Image
• Animated.ScrollView
• Animated.Text
• Animated.View
• Animated.FlatList
• Animated.SectionList

You can change this

<Animated.View>
  <TouchableOpacity>
     <Text style={styles.cardNumber}>{this.props.id}</Text>
  </TouchableOpacity>
</Animated.View>`

Answer 2

You can wrap your component with an AnimatableView and use a ref in order to execute the animation, example:

import React, { useRef } from 'react'
import {
  View as AnimatableView,
  initializeRegistryWithDefinitions
} from 'react-native-animatable'
import { throttle } from 'lodash'
import { ANIMATIONS } from '../animations'

export default function (WrappedComponent) {
  return ({ onPress, delay = 800, duration = 1000, animation = ANIMATIONS.ZOOM_IN_OUT, ...rest }) => {
    const compEl = useRef(null)
    const onPressAnimatedDelayed = throttle((event) => {
      onPress && onPress(event)
      compEl.current.animate(animation, duration)
    }, delay, { 'trailing': false })

    return (
      <AnimatableView ref={compEl}>
        <WrappedComponent
          onPress={onPressAnimatedDelayed}
          {...rest}
        />
      </AnimatableView>
    )
  }
}

Check the example running from Expo: https://snack.expo.io/@jdnichollsc/animatable

Regards