import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Animated } from 'react-native';

export function FadeIn({ children }: any): any {
   const animated = useRef(new Animated.Value(0)).current;

   useEffect(() => {
      Animated.timing(animated, {
         toValue: 1,
         duration: 300,
         useNativeDriver: true,
      }).start();
   }, []);

   return (
      <Animated.View
         style={{
            opacity: animated,
         }}
      >
         {children}
      </Animated.View>
   );
}
