@madeja-studio/telar/src/component/AnimatedSwitch/useAnimatedSwitch.ts

UI component library by Madeja Studio

import { to, useSpring } from '@react-spring/native';
import { useState } from 'react';

export type VisibleComponent = 0 | 1;

interface Props {
  visibleComponent: VisibleComponent;
}

const useAnimatedSwitch = ({ visibleComponent }: Props) => {
  const [prevVisibleComponent, setPrevVisibleComponent] =
    useState(visibleComponent);

  const [aCompStyle, aCompApi] = useSpring(() => ({
    from: { opacity: 1, y: 0 },
  }));

  const [bCompStyle, bCompApi] = useSpring(() => ({
    from: { opacity: 0, y: 25 },
  }));

  // const aCompStyle = useAnimatedStyle(() => ({
  //   opacity: withTiming(aCompOpacity.value, AnimationConfig.timing),
  //   transform: [
  //     {
  //       translateY: withSpring(aCompYPosition.value, AnimationConfig.spring),
  //     },
  //   ],
  // }));

  // const bCompStyle = useAnimatedStyle(() => ({
  //   opacity: withTiming(bCompOpacity.value, AnimationConfig.timing),
  //   transform: [
  //     {
  //       translateY: withSpring(bCompYPosition.value, AnimationConfig.spring),
  //     },
  //   ],
  // }));

  if (prevVisibleComponent !== visibleComponent) {
    switch (visibleComponent) {
      case 0:
        aCompApi.start({ to: { opacity: 1, y: 0 } });
        bCompApi.start({ to: { opacity: 0, y: 25 } });

        break;
      case 1:
        aCompApi.start({ to: { opacity: 0, y: 25 } });
        bCompApi.start({ to: { opacity: 1, y: 0 } });

        break;
    }

    setPrevVisibleComponent(visibleComponent);
  }

  return {
    aCompStyle: {
      ...aCompStyle,
      transform: [{ translateY: to(aCompStyle.y, (t) => t) }],
    },
    bCompStyle: {
      ...bCompStyle,
      transform: [{ translateY: to(bCompStyle.y, (t) => t) }],
    },
  };
};

export default useAnimatedSwitch;