import React from 'react';
import styled from 'styled-components/native';
import { Box } from '@native-base/v3';
import { space, layout, border } from 'styled-system';
import { Animated } from 'react-native';

const NBFade = ({
  children,
  in: animationState,
  duration = 500,
  ...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);
};

const StyledFade = styled(NBFade)(space, layout, border);
StyledFade.defaultProps = {};

const Fade = ({
  children,
  ...props
}) => {
  return /*#__PURE__*/React.createElement(StyledFade, props, children);
};

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