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

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

import React, { useEffect, useRef } from 'react';
import { Animated } from 'react-native';
const AnimatedMove = ({ moveOnMount = true, triggerMove = false, tension = 18, friction = 4, toX = 0, toY = 0, startX = 0, startY = 0, delay = 0, onEnd, style, children, }) => {
    const position = useRef(new Animated.ValueXY({ x: startX, y: startY }))
        .current;
    const move = () => {
        Animated.spring(position, {
            toValue: {
                x: toX,
                y: toY,
            },
            tension,
            friction,
            useNativeDriver: true,
            delay,
        }).start((status) => {
            if (status.finished && onEnd) {
                onEnd();
            }
        });
    };
    useEffect(() => {
        if (moveOnMount || triggerMove) {
            move();
        }
    }, [triggerMove, moveOnMount]);
    return (<Animated.View style={Object.assign({ transform: [{ translateX: position.x }, { translateY: position.y }] }, style)}>
      {children}
    </Animated.View>);
};
export default AnimatedMove;