Animatable Button using Higher Order Components with React Native and react-native-animatable

AnimatableButton.js

import React, { Component } from 'react'
import {
  createAnimatableComponent,
  initializeRegistryWithDefinitions
} from 'react-native-animatable'
import { Button } from 'native-base'
import { throttle } from 'lodash'

initializeRegistryWithDefinitions({
  zoomInOut: {
    0: {
      scale: 1,
    },
    0.5: {
      scale: 1.8,
    },
    0.8: {
      scale: 1.4,
    },
    1: {
      scale: 1,
    }
  }
})

function withPressAnimate (WrappedComponent) {
  const AnimatableComponent = createAnimatableComponent(WrappedComponent)
  
  return class extends Component {

    constructor(props) {
      super(props)

      this.onPressAnimatedDelayed = throttle(this.onPressAnimated, 3000, { 'trailing': false })
    }

    onPressAnimated (event, originalEvent) {
      this.ref.animate('zoomInOut', 1200)
      setTimeout(() => originalEvent(event), 400)
    }

    render () {
      const { onPress, children, ...rest } = this.props
      return (
        <AnimatableComponent
          ref={(ref) => this.ref = ref}
          onPress={(e) => this.onPressAnimatedDelayed(e, onPress)}
          {...rest}
        >{ children }
        </AnimatableComponent>
      )
    }
  }
}

export default withPressAnimate(Button)

A better version of this code is here 👍 https://snack.expo.io/@jdnichollsc/animatable