@ffsm/native-animate/dist/use-native-animate.js

Simple animation for React Native, only React native and JavaScript

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { useRef } from 'react';
import { Animated, Easing } from 'react-native';
import { TRANSFORM_KEYS } from './transform';
export const DEFAULT_NATIVE_ANIMATE_DURATION = 300;
export const DEFAULT_NATIVE_ANIMATE_CONFIG = {
    extrapolate: 'clamp',
};
export function useNativeAnimate(defaultValue = 0) {
    if (defaultValue < 0 || !Number.isInteger(defaultValue)) {
        throw new Error('[Native Aniamte] defaultValue must be a positive integer');
    }
    const animated = useRef(new Animated.Value(defaultValue));
    const composite = useRef({});
    const registered = useRef(false);
    const fixed = (value) => Number(value.toFixed(6));
    const animate = (outputs, config) => {
        const keys = Object.keys(outputs);
        if (!keys.length) {
            return {};
        }
        const styles = {};
        const transform = [];
        const nonAnimateKeys = keys.filter((key) => !Array.isArray(outputs[key]) || outputs[key].length < 2);
        const animateKeys = keys.filter((key) => !nonAnimateKeys.includes(key));
        if (!animateKeys.length) {
            return {};
        }
        registered.current = true;
        animateKeys.forEach((key) => {
            const value = outputs[key];
            const style = animated.current.interpolate(Object.assign(Object.assign({}, Object.assign({}, DEFAULT_NATIVE_ANIMATE_CONFIG, config)), { inputRange: value.map(((_, i) => fixed(i / (value.length - 1)))), outputRange: value }));
            if (TRANSFORM_KEYS.includes(key)) {
                transform.push({ [key]: style });
                return;
            }
            styles[key] = style;
        });
        return transform.length ? Object.assign(Object.assign({}, styles), { transform }) : styles;
    };
    const timing = (toValue, duration = DEFAULT_NATIVE_ANIMATE_DURATION, delay = 0, easing = Easing.linear) => {
        var _a;
        (_a = composite.current.timing) === null || _a === void 0 ? void 0 : _a.stop();
        composite.current.timing = Animated.timing(animated.current, {
            toValue,
            duration,
            useNativeDriver: true,
            easing,
            delay,
        });
        return {
            stop() {
                var _a;
                (_a = composite.current.timing) === null || _a === void 0 ? void 0 : _a.stop();
            },
            start(failDelay = 1) {
                return new Promise((resolve) => {
                    var _a;
                    if (!registered.current) {
                        resolve(false);
                        return;
                    }
                    const timeout = setTimeout(() => {
                        var _a;
                        (_a = composite.current.timing) === null || _a === void 0 ? void 0 : _a.stop();
                        resolve(false);
                    }, duration + delay + failDelay);
                    (_a = composite.current.timing) === null || _a === void 0 ? void 0 : _a.start(({ finished }) => {
                        timeout && clearTimeout(timeout);
                        resolve(finished);
                    });
                });
            },
            reset() {
                var _a, _b;
                (_a = composite.current.timing) === null || _a === void 0 ? void 0 : _a.stop();
                (_b = composite.current.timing) === null || _b === void 0 ? void 0 : _b.reset();
            },
        };
    };
    const wait = (...args_1) => __awaiter(this, [...args_1], void 0, function* (waitDuration = 0) {
        return new Promise((resolve) => setTimeout(resolve, waitDuration));
    });
    return {
        value: animated.current,
        animate,
        timing,
        fixed,
        wait,
    };
}