@airship/rn-components/dist/AnimatedFade.js

React Native components, from basic inputs to animated wrappers, created by Airship to build quality apps.

import React, { useCallback, useEffect, useRef } from 'react';
import { Animated } from 'react-native';
import useCurrent from './hooks/useCurrent';
const AnimatedFade = ({ triggerFade = true, opacityStart = 0, opacityEnd = 1, duration = 800, delay = 0, loop = false, onEnd, style, children, }) => {
    const opacity = useRef(new Animated.Value(opacityStart));
    const _onEnd = useCurrent(onEnd);
    const handleEnd = useCallback(() => {
        if (_onEnd.current)
            _onEnd.current();
    }, [_onEnd]);
    const fadeIn = () => {
        Animated.timing(opacity.current, {
            toValue: opacityEnd,
            duration,
            delay,
            useNativeDriver: true,
        }).start((status) => {
            if (status.finished) {
                handleEnd();
                if (loop)
                    fadeOut();
            }
        });
    };
    const fadeOut = () => {
        Animated.timing(opacity.current, {
            toValue: opacityStart,
            duration,
            delay,
            useNativeDriver: true,
        }).start((status) => {
            if (status.finished) {
                handleEnd();
                if (loop)
                    fadeIn();
            }
        });
    };
    const _fadeIn = useCurrent(fadeIn);
    useEffect(() => {
        if (triggerFade) {
            _fadeIn.current();
        }
    }, [triggerFade, _fadeIn]);
    return (<Animated.View style={Object.assign({ opacity: opacity.current }, style)}>
      {children}
    </Animated.View>);
};
export default AnimatedFade;