A basic "useAnimation" hook for React-Native animations

useAnimation.ts

import { useRef } from "react";
import { Animated, Easing } from "react-native";

export const useAnimation = function(initialValue: number = 0) {
  const endValue = initialValue === 0 ? 1 : 0;
  const animationValueRef = useRef<Animated.Value>(new Animated.Value(initialValue));

  const setup = (config: Partial<Animated.TimingAnimationConfig> = {}) =>
    Animated.timing(animationValueRef.current, {
      toValue: endValue,
      useNativeDriver: true,
      easing: Easing.inOut(Easing.quad),
      ...config
    });

  return {
    value: animationValueRef.current,
    setup: setup
  };
};

Example usage:

import React, { useEffect } from "react";
import { View } from "react-native";
import { useAnimation } from "./useAnimation";

const FadeInOnMount: React.FC = function() {
  const fadeAnim = useAnimation();

  useEffect(() => {
    fadeAnim.setup().start();
  }, []);

  const style = {
    opacity: fadeAnim.value,
    width: 50,
    height: 50,
    backgroundColor: "red"
  };
  return <View style={style} />;
};