@madeja-studio/telar/src/animation/useAnimation.ts

UI component library by Madeja Studio

import {
  type ControllerUpdate,
  type SpringConfig,
  useSpring,
} from '@react-spring/native';
import { useCallback } from 'react';
import { merge } from 'smob';

import type { Animation } from './animation';

interface Config {
  hasEnterTransition?: boolean;
  springConfig?: SpringConfig;
}

export const useAnimation = (
  animations: Animation<any>[],
  config: Config = {}
) => {
  const from = merge(...animations.map((a) => a.from));
  const to = merge(...animations.map((a) => a.to));

  const [style, api] = useSpring(() => ({
    config: config.springConfig ?? { friction: 30, tension: 500 },
    from,
    to: config?.hasEnterTransition ? to : undefined,
  }));

  const animatedStyle = animations.reduce((acc, animation) => {
    if (!animation.style) {
      return acc;
    }

    return merge(acc, animation.style(acc));
  }, style);

  const animationStart = useCallback(
    (props?: ControllerUpdate<any>) => {
      api.start({ to, ...props });
    },
    [api, to]
  );

  const animationStop = useCallback(
    (props?: ControllerUpdate<any>) => {
      api.start({ to: from, ...props });
    },
    [api, from]
  );

  return {
    animatedStyle,
    animationStart,
    animationStop,
    api,
  };
};