@madeja-studio/telar/lib/module/component/AnimatedSwitch/useAnimatedSwitch.js

UI component library by Madeja Studio

"use strict";

import { to, useSpring } from '@react-spring/native';
import { useState } from 'react';
const useAnimatedSwitch = ({
  visibleComponent
}) => {
  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;
//# sourceMappingURL=useAnimatedSwitch.js.map