Simple, functional animation of values using React Native Easing

gistfile1.ts

import { Easing } from 'react-native'

/*
 * Function that animates a value from 0 - 1
 * Uses React Native’s Easing functions
 * Returns an object that has a stop() function
 */

interface Args {
  duration: number,
  easing?: (value: number) => number,
  onFrame?: (value: number) => void,
  onComplete?: () => void,
}

export type AnimationReturnType = {
  stop: () => void,
}

export default ({ 
  duration = 800, 
  easing = Easing.inOut(Easing.quad), 
  onFrame, 
  onComplete
}: Args) => {
  let stopped = false
  const returnObject: AnimationReturnType = {
    stop: () => {
      stopped = true
    },
  }
  const then = Date.now()
  function loop() {
    if (!stopped) {
      const time = Date.now() - then
      if (time > duration) {
        if (onComplete) {
          onComplete()
        }
      } else if (onFrame) {
        onFrame(easing(time / duration))
        requestAnimationFrame(loop)
      }
    }
  }
  loop()
  return returnObject
}