@react-native-ama/animations 0.0.1 → 1.0.0

package/dist/components/AnimatedContainer.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { ViewProps } from 'react-native';
+import Animated, { AnimateProps } from 'react-native-reanimated';
+import { AnimatedEntryViewStyle, AnimatedExitViewStyle, ToAnimation } from '../hooks/useReanimatedAnimationBuilder';
+export declare const AnimatedContainer: React.ForwardRefExoticComponent<Omit<AnimateProps<ViewProps>, "entering" | "exiting"> & {
+    autofocus?: boolean | undefined;
+    duration?: number | undefined;
+    from: AnimatedEntryViewStyle;
+    exitFrom?: AnimatedExitViewStyle | undefined;
+    exitTo?: ToAnimation;
+    to: ToAnimation;
+    style?: Pick<ViewProps, "style"> | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<Animated.View>>;

package/dist/components/AnimatedContainer.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedContainer = void 0;
+const core_1 = require("@react-native-ama/core");
+const React = __importStar(require("react"));
+const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+const useReanimatedAnimationBuilder_1 = require("../hooks/useReanimatedAnimationBuilder");
+exports.AnimatedContainer = React.forwardRef((_a, forwardRef) => {
+    var { from, to, exitFrom, exitTo, duration = 300, style, autofocus, children } = _a, rest = __rest(_a, ["from", "to", "exitFrom", "exitTo", "duration", "style", "autofocus", "children"]);
+    const { entering, exiting } = (0, useReanimatedAnimationBuilder_1.useReanimatedAnimationBuilder)({
+        from,
+        to,
+        exitFrom,
+        exitTo,
+        duration,
+    });
+    const Wrapper = autofocus ? core_1.AutofocusContainer : React.Fragment;
+    return (<Wrapper>
+        <react_native_reanimated_1.default.View style={style} entering={entering} exiting={exiting} ref={forwardRef} {...rest}>
+          {children}
+        </react_native_reanimated_1.default.View>
+      </Wrapper>);
+});

package/dist/hooks/useAnimation.d.ts

@@ -0,0 +1,17 @@
+import type { ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
+type UseAnimation = {
+    from: ViewStyle;
+    to: ViewStyle;
+    duration: number;
+    useNativeDriver: boolean;
+    skipIfReduceMotionEnabled?: boolean;
+};
+export declare const useAnimation: ({ duration, useNativeDriver, from, to, skipIfReduceMotionEnabled, }: UseAnimation) => {
+    animatedStyle: {
+        [x: string]: any;
+    };
+    progress: Animated.Value;
+    play: (toValue?: number) => Animated.CompositeAnimation;
+};
+export {};

package/dist/hooks/useAnimation.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnimation = void 0;
+const core_1 = require("@react-native-ama/core");
+const internal_1 = require("@react-native-ama/internal");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useAnimation = ({ duration, useNativeDriver, from, to, skipIfReduceMotionEnabled = false, }) => {
+    const { isReduceMotionEnabled } = (0, core_1.useAMAContext)();
+    const progress = React.useRef(new react_native_1.Animated.Value(0)).current;
+    const reduceMotionProgress = React.useRef(new react_native_1.Animated.Value(0)).current;
+    const hasOnlyMotionAnimation = React.useRef(false);
+    const play = (toValue = 1) => {
+        if (isReduceMotionEnabled) {
+            react_native_1.Animated.timing(reduceMotionProgress, {
+                duration: 0,
+                toValue,
+                useNativeDriver,
+            }).start();
+        }
+        const animationDuration = isReduceMotionEnabled &&
+            (hasOnlyMotionAnimation.current || skipIfReduceMotionEnabled)
+            ? 0
+            : duration;
+        return react_native_1.Animated.timing(progress, {
+            duration: animationDuration,
+            toValue,
+            useNativeDriver,
+        });
+    };
+    const _a = (0, internal_1.interpolateAnimationStates)(from, to, isReduceMotionEnabled, progress, reduceMotionProgress), { __hasOnlyMotionAnimation } = _a, style = __rest(_a, ["__hasOnlyMotionAnimation"]);
+    hasOnlyMotionAnimation.current = __hasOnlyMotionAnimation;
+    return {
+        animatedStyle: style,
+        progress,
+        play,
+    };
+};
+exports.useAnimation = useAnimation;

package/dist/hooks/useAnimationDuration.d.ts

@@ -0,0 +1,4 @@
+import type { ViewStyle } from 'react-native';
+export declare const useAnimationDuration: () => {
+    getAnimationDuration: (propertyToAnimate: keyof ViewStyle, duration: number) => number;
+};

package/dist/hooks/useAnimationDuration.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnimationDuration = void 0;
+const core_1 = require("@react-native-ama/core");
+const react_1 = __importDefault(require("react"));
+const isMotionAnimation_1 = require("../utils/isMotionAnimation");
+const useAnimationDuration = () => {
+    const { isReduceMotionEnabled } = (0, core_1.useAMAContext)();
+    const getAnimationDuration = react_1.default.useCallback((propertyToAnimate, duration) => {
+        return isReduceMotionEnabled && (0, isMotionAnimation_1.isMotionAnimation)(propertyToAnimate)
+            ? 0
+            : duration;
+    }, [isReduceMotionEnabled]);
+    return {
+        getAnimationDuration,
+    };
+};
+exports.useAnimationDuration = useAnimationDuration;

package/dist/hooks/useReanimatedAnimationBuilder.d.ts

@@ -0,0 +1,63 @@
+import type { ViewProps, ViewStyle } from 'react-native';
+import { EntryAnimationsValues, EntryExitAnimationFunction, ExitAnimationsValues } from 'react-native-reanimated';
+export type ToAnimation = ViewProps['style'];
+type UseReanimatedAnimationBuilder = {
+    from: AnimatedEntryViewStyle;
+    to: ToAnimation;
+    exitFrom?: AnimatedExitViewStyle;
+    exitTo?: ToAnimation;
+    duration: number;
+};
+export declare const useReanimatedAnimationBuilder: ({ from, to, exitFrom, exitTo, duration, }: UseReanimatedAnimationBuilder) => {
+    entering: EntryExitAnimationFunction;
+    exiting: EntryExitAnimationFunction;
+};
+export type AnimatedEntryViewStyle = ReanimatedStyle<ReanimatedEntryValues>;
+export type AnimatedExitViewStyle = ReanimatedStyle<ReanimatedExitValues>;
+type ReanimatedStyle<K> = {
+    [key in keyof Omit<ViewStyle, 'transform'>]: ViewStyle[key] | K;
+} & {
+    transform?: (PerpectiveTransform<K> | RotateTransform<K> | RotateXTransform<K> | RotateYTransform<K> | RotateZTransform<K> | ScaleTransform<K> | ScaleXTransform<K> | ScaleYTransform<K> | TranslateXTransform<K> | TranslateYTransform<K> | SkewXTransform<K> | SkewYTransform<K> | MatrixTransform<K>)[] | undefined;
+};
+type PerpectiveTransform<K> = {
+    c: string | K;
+};
+type RotateTransform<K> = {
+    rotate: string | K;
+};
+type RotateXTransform<K> = {
+    rotateX: string | K;
+};
+type RotateYTransform<K> = {
+    rotateY: string | K;
+};
+type RotateZTransform<K> = {
+    rotateZ: string | K;
+};
+type ScaleTransform<K> = {
+    scale: number | K;
+};
+type ScaleXTransform<K> = {
+    scaleX: number | K;
+};
+type ScaleYTransform<K> = {
+    scaleY: number | K;
+};
+type TranslateXTransform<K> = {
+    translateX: number | K;
+};
+type TranslateYTransform<K> = {
+    translateY: number | K;
+};
+type SkewXTransform<K> = {
+    skewX: string | K;
+};
+type SkewYTransform<K> = {
+    skewY: string | K;
+};
+type MatrixTransform<K> = {
+    matrix: number[] | K;
+};
+type ReanimatedEntryValues = keyof EntryAnimationsValues;
+type ReanimatedExitValues = keyof ExitAnimationsValues;
+export {};

package/dist/hooks/useReanimatedAnimationBuilder.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReanimatedAnimationBuilder = void 0;
+const core_1 = require("@react-native-ama/core");
+const internal_1 = require("@react-native-ama/internal");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const useReanimatedAnimationBuilder = ({ from, to, exitFrom, exitTo, duration, }) => {
+    const { isReduceMotionEnabled } = (0, core_1.useAMAContext)();
+    const animationBuilder = (initial, final) => {
+        return (values) => {
+            'worklet';
+            const animations = (function generateAnimations(startValues, endValues) {
+                return Object.keys(startValues).reduce((outputAnimation, key) => {
+                    const k = key;
+                    const toValue = endValues[key];
+                    const value = startValues[k];
+                    const mappedToValue = 
+                    // @ts-ignore
+                    typeof toValue === 'string' ? values[toValue] || 0 : toValue;
+                    const realDuration = isReduceMotionEnabled &&
+                        internal_1.MOTION_ANIMATIONS.includes(key)
+                        ? 0
+                        : duration;
+                    const newValue = Array.isArray(value)
+                        ? value.map((item, index) => {
+                            var _a;
+                            return generateAnimations(item, 
+                            // @ts-ignore
+                            (_a = endValues === null || endValues === void 0 ? void 0 : endValues[k]) === null || _a === void 0 ? void 0 : _a[index]);
+                        })
+                        : (0, react_native_reanimated_1.withTiming)(mappedToValue, {
+                            duration: realDuration,
+                        });
+                    outputAnimation[k] = newValue;
+                    return outputAnimation;
+                }, {});
+            })(initial, final);
+            const initialValues = (function generateInitialValues(startValues) {
+                return Object.entries(startValues).reduce((newList, [key, value]) => {
+                    const mappedValue = 
+                    // @ts-ignore
+                    typeof value === 'string' ? values[value] : value;
+                    const newValue = Array.isArray(value)
+                        ? value.map(item => generateInitialValues(item))
+                        : mappedValue;
+                    newList[key] = newValue;
+                    return newList;
+                }, {});
+            })(initial);
+            return {
+                initialValues,
+                animations,
+            };
+        };
+    };
+    return {
+        entering: animationBuilder(from, to),
+        exiting: animationBuilder(exitTo || to, exitFrom || from),
+    };
+};
+exports.useReanimatedAnimationBuilder = useReanimatedAnimationBuilder;

package/dist/hooks/useReanimatedTiming.d.ts

@@ -0,0 +1,6 @@
+import type { MotionAnimationKey } from '@react-native-ama/internal';
+import { AnimationCallback, WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
+export declare const useReanimatedTiming: () => {
+    withTiming: (propertyKey: MotionAnimationKey, toValue: number, config?: WithTimingConfig, callback?: AnimationCallback) => number;
+    withSpring: (propertyKey: MotionAnimationKey, toValue: number, config?: WithSpringConfig, callback?: AnimationCallback) => number;
+};

package/dist/hooks/useReanimatedTiming.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReanimatedTiming = void 0;
+const core_1 = require("@react-native-ama/core");
+const react_1 = __importDefault(require("react"));
+const react_native_reanimated_1 = require("react-native-reanimated");
+const isMotionAnimation_1 = require("../utils/isMotionAnimation");
+const useReanimatedTiming = () => {
+    const { isReduceMotionEnabled } = (0, core_1.useAMAContext)();
+    const withTiming = react_1.default.useCallback((propertyKey, toValue, config = {}, callback) => {
+        if (isReduceMotionEnabled && (0, isMotionAnimation_1.isMotionAnimation)(propertyKey)) {
+            config.duration = 0;
+        }
+        return (0, react_native_reanimated_1.withTiming)(toValue, config, callback);
+    }, [isReduceMotionEnabled]);
+    const withSpring = react_1.default.useCallback((propertyKey, toValue, config, callback) => {
+        if (isReduceMotionEnabled && (0, isMotionAnimation_1.isMotionAnimation)(propertyKey)) {
+            return (0, react_native_reanimated_1.withTiming)(toValue, { duration: 0 });
+        }
+        return (0, react_native_reanimated_1.withSpring)(toValue, config, callback);
+    }, [isReduceMotionEnabled]);
+    return {
+        withTiming,
+        withSpring,
+    };
+};
+exports.useReanimatedTiming = useReanimatedTiming;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { AnimatedContainer } from './components/AnimatedContainer';
+export { useAnimation } from './hooks/useAnimation';
+export { useAnimationDuration } from './hooks/useAnimationDuration';
+export { useReanimatedAnimationBuilder } from './hooks/useReanimatedAnimationBuilder';
+export { useReanimatedTiming } from './hooks/useReanimatedTiming';

package/dist/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReanimatedTiming = exports.useReanimatedAnimationBuilder = exports.useAnimationDuration = exports.useAnimation = exports.AnimatedContainer = void 0;
+// Components
+var AnimatedContainer_1 = require("./components/AnimatedContainer");
+Object.defineProperty(exports, "AnimatedContainer", { enumerable: true, get: function () { return AnimatedContainer_1.AnimatedContainer; } });
+// Hooks
+var useAnimation_1 = require("./hooks/useAnimation");
+Object.defineProperty(exports, "useAnimation", { enumerable: true, get: function () { return useAnimation_1.useAnimation; } });
+var useAnimationDuration_1 = require("./hooks/useAnimationDuration");
+Object.defineProperty(exports, "useAnimationDuration", { enumerable: true, get: function () { return useAnimationDuration_1.useAnimationDuration; } });
+var useReanimatedAnimationBuilder_1 = require("./hooks/useReanimatedAnimationBuilder");
+Object.defineProperty(exports, "useReanimatedAnimationBuilder", { enumerable: true, get: function () { return useReanimatedAnimationBuilder_1.useReanimatedAnimationBuilder; } });
+var useReanimatedTiming_1 = require("./hooks/useReanimatedTiming");
+Object.defineProperty(exports, "useReanimatedTiming", { enumerable: true, get: function () { return useReanimatedTiming_1.useReanimatedTiming; } });

package/dist/utils/isMotionAnimation.d.ts

@@ -0,0 +1,2 @@
+import { type MotionAnimationKey } from '@react-native-ama/internal';
+export declare const isMotionAnimation: (key: MotionAnimationKey) => boolean;

package/dist/utils/isMotionAnimation.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMotionAnimation = void 0;
+const internal_1 = require("@react-native-ama/internal");
+const isMotionAnimation = (key) => {
+    return internal_1.MOTION_ANIMATIONS.includes(key);
+};
+exports.isMotionAnimation = isMotionAnimation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ama/animations",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "private": false,
   "react-native": "src/index",
   "types": "dist/index.d.ts",
@@ -45,8 +45,8 @@
   },
   "homepage": "https://github.com/FormidableLabs/react-native-ama#readme",
   "publishConfig": {
-    "provenance": false
+    "provenance": true
   },
   "author": "",
   "license": "MIT"
-}
+}

package/src/hooks/useReanimatedAnimationBuilder.ts

@@ -68,7 +68,7 @@ export const useReanimatedAnimationBuilder = ({
           },
           {} as InitialValues,
         );
-      })(initial, final);
+      })(initial, final) as StyleProps;
 
       const initialValues = (function generateInitialValues(
         startValues,