import React from 'react';
import { Box } from '../../primitives';
import { usePropsConfig } from '../../../theme';
import { Animated } from 'react-native';

const Fade = ({
  children,
  ...props
}) => {
  const {
    in: animationState,
    duration
  } = usePropsConfig('Fade', props);
  const fadeAnim = React.useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: duration,
      useNativeDriver: true
    }).start();
  };

  const fadeOut = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: duration,
      useNativeDriver: true
    }).start();
  };

  animationState ? fadeIn() : fadeOut();
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: {
      opacity: fadeAnim
    }
  }, /*#__PURE__*/React.createElement(Box, props), children);
};

export default Fade;
//# sourceMappingURL=Fade.js.map