react-native-reanimated 2.3.0-alpha.1 → 2.3.0-beta.2

package/lib/reanimated2/layoutReanimation/defaultAnimations/index.js

@@ -4,3 +4,7 @@ export * from './Fade';
 export * from './Slide';
 export * from './Zoom';
 export * from './Bounce';
+export * from './Lightspeed';
+export * from './Pinwheel';
+export * from './Rotate';
+export * from './Roll';

package/lib/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.js

@@ -0,0 +1,78 @@
+import { BaseAnimationBuilder } from '../animationBuilder';
+import { Easing } from '../../Easing';
+import { withTiming } from '../../animation';
+export class CurvedTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.easingXV = Easing.in(Easing.ease);
+        this.easingYV = Easing.out(Easing.ease);
+        this.easingWidthV = Easing.in(Easing.exp);
+        this.easingHeightV = Easing.out(Easing.exp);
+        this.build = () => {
+            var _a;
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const duration = (_a = this.durationV) !== null && _a !== void 0 ? _a : 300;
+            const easing = {
+                easingX: this.easingXV,
+                easingY: this.easingYV,
+                easingWidth: this.easingWidthV,
+                easingHeight: this.easingHeightV,
+            };
+            return (values) => {
+                'worklet';
+                return {
+                    initialValues: {
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    animations: {
+                        originX: delayFunction(delay, withTiming(values.originX, { duration, easing: easing.easingX })),
+                        originY: delayFunction(delay, withTiming(values.originY, { duration, easing: easing.easingY })),
+                        width: delayFunction(delay, withTiming(values.width, { duration, easing: easing.easingWidth })),
+                        height: delayFunction(delay, withTiming(values.height, { duration, easing: easing.easingHeight })),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new CurvedTransition();
+    }
+    static easingX(easing) {
+        const instance = this.createInstance();
+        return instance.easingX(easing);
+    }
+    easingX(easing) {
+        this.easingXV = easing;
+        return this;
+    }
+    static easingY(easing) {
+        const instance = this.createInstance();
+        return instance.easingY(easing);
+    }
+    easingY(easing) {
+        this.easingYV = easing;
+        return this;
+    }
+    static easingWidth(easing) {
+        const instance = this.createInstance();
+        return instance.easingWidth(easing);
+    }
+    easingWidth(easing) {
+        this.easingWidthV = easing;
+        return this;
+    }
+    static easingHeight(easing) {
+        const instance = this.createInstance();
+        return instance.easingHeight(easing);
+    }
+    easingHeight(easing) {
+        this.easingHeightV = easing;
+        return this;
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/EntryExitTransition.js

@@ -0,0 +1,128 @@
+import { BaseAnimationBuilder } from '../animationBuilder';
+import { withSequence, withTiming } from '../../animation';
+import { FadeIn, FadeOut } from '../defaultAnimations/Fade';
+export class EntryExitTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.enteringV = FadeIn;
+        this.exitingV = FadeOut;
+        this.build = () => {
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const enteringAnimation = this.enteringV.build();
+            const exitingAnimation = this.exitingV.build();
+            const exitingDuration = this.exitingV.getDuration();
+            return (values) => {
+                'worklet';
+                var _a, _b, _c, _d;
+                const enteringValues = enteringAnimation(values);
+                const exitingValues = exitingAnimation(values);
+                const animations = {
+                    transform: [],
+                };
+                for (const prop of Object.keys(exitingValues.animations)) {
+                    if (prop === 'transform') {
+                        (_a = exitingValues.animations[prop]) === null || _a === void 0 ? void 0 : _a.forEach((value, index) => {
+                            var _a;
+                            for (const transformProp of Object.keys(value)) {
+                                (_a = animations.transform) === null || _a === void 0 ? void 0 : _a.push({
+                                    [transformProp]: delayFunction(delay, withSequence(value[transformProp], withTiming(exitingValues.initialValues.transform
+                                        ? exitingValues.initialValues.transform[index][transformProp]
+                                        : 0, { duration: 0 }))),
+                                });
+                            }
+                        });
+                    }
+                    else {
+                        const sequence = enteringValues.animations[prop] !== undefined
+                            ? [
+                                exitingValues.animations[prop],
+                                withTiming(enteringValues.initialValues[prop], {
+                                    duration: 0,
+                                }),
+                                enteringValues.animations[prop],
+                            ]
+                            : [
+                                exitingValues.animations[prop],
+                                withTiming(Object.keys(values).includes(prop)
+                                    ? values[prop]
+                                    : exitingValues.initialValues[prop], { duration: 0 }),
+                            ];
+                        animations[prop] = delayFunction(delay, withSequence(...sequence));
+                    }
+                }
+                for (const prop of Object.keys(enteringValues.animations)) {
+                    if (prop === 'transform') {
+                        (_b = enteringValues.animations[prop]) === null || _b === void 0 ? void 0 : _b.forEach((value, index) => {
+                            var _a;
+                            for (const transformProp of Object.keys(value)) {
+                                (_a = animations.transform) === null || _a === void 0 ? void 0 : _a.push({
+                                    [transformProp]: delayFunction(delay + exitingDuration, withSequence(withTiming(enteringValues.initialValues.transform
+                                        ? enteringValues.initialValues.transform[index][transformProp]
+                                        : 0, { duration: 0 }), value[transformProp])),
+                                });
+                            }
+                        });
+                    }
+                    else if (animations[prop] !== undefined) {
+                        // it was already added in the previous loop
+                        continue;
+                    }
+                    else {
+                        animations[prop] = delayFunction(delay, withSequence(withTiming(enteringValues.initialValues[prop], { duration: 0 }), enteringValues.animations[prop]));
+                    }
+                }
+                const mergedTransform = ((_c = exitingValues.initialValues.transform) !== null && _c !== void 0 ? _c : []).concat(((_d = enteringValues.animations.transform) !== null && _d !== void 0 ? _d : []).map((value) => {
+                    for (const transformProp of Object.keys(value)) {
+                        const current = value[transformProp].current;
+                        if (typeof current === 'string') {
+                            if (current.includes('deg'))
+                                return {
+                                    [transformProp]: '0deg',
+                                };
+                            else
+                                return {
+                                    [transformProp]: '0',
+                                };
+                        }
+                        else if (transformProp.includes('translate')) {
+                            return { [transformProp]: 0 };
+                        }
+                        else {
+                            return { [transformProp]: 1 };
+                        }
+                    }
+                    return value;
+                }));
+                return {
+                    initialValues: Object.assign(Object.assign({}, exitingValues.initialValues), { originX: values.boriginX, originY: values.boriginY, width: values.bwidth, height: values.bheight, transform: mergedTransform }),
+                    animations: Object.assign({ originX: delayFunction(delay + exitingDuration, withTiming(values.originX, { duration: 0 })), originY: delayFunction(delay + exitingDuration, withTiming(values.originY, { duration: 0 })), width: delayFunction(delay + exitingDuration, withTiming(values.width, { duration: 0 })), height: delayFunction(delay + exitingDuration, withTiming(values.height, { duration: 0 })) }, animations),
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new EntryExitTransition();
+    }
+    static entering(animation) {
+        const instance = this.createInstance();
+        return instance.entering(animation);
+    }
+    entering(animation) {
+        this.enteringV = animation;
+        return this;
+    }
+    static exiting(animation) {
+        const instance = this.createInstance();
+        return instance.exiting(animation);
+    }
+    exiting(animation) {
+        this.exitingV = animation;
+        return this;
+    }
+}
+export function combineTransition(exiting, entering) {
+    return EntryExitTransition.entering(entering).exiting(exiting);
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/FadingTransition.js

@@ -0,0 +1,37 @@
+import { withSequence, withTiming } from '../../animation';
+import { BaseAnimationBuilder } from '../animationBuilder';
+export class FadingTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            var _a;
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const duration = (_a = this.durationV) !== null && _a !== void 0 ? _a : 500;
+            return (values) => {
+                'worklet';
+                return {
+                    initialValues: {
+                        opacity: 1,
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    animations: {
+                        opacity: delayFunction(delay, withSequence(withTiming(0, { duration: duration }), withTiming(1, { duration: duration }))),
+                        originX: delayFunction(delay + duration, withTiming(values.originX, { duration: 50 })),
+                        originY: delayFunction(delay + duration, withTiming(values.originY, { duration: 50 })),
+                        width: delayFunction(delay + duration, withTiming(values.width, { duration: 50 })),
+                        height: delayFunction(delay + duration, withTiming(values.height, { duration: 50 })),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new FadingTransition();
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/JumpingTransition.js

@@ -0,0 +1,41 @@
+import { withSequence, withTiming } from '../../animation';
+import { Easing } from '../../Easing';
+import { BaseAnimationBuilder } from '../animationBuilder';
+export class JumpingTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            var _a;
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const duration = ((_a = this.durationV) !== null && _a !== void 0 ? _a : 300) / 2;
+            const config = { duration: duration * 2 };
+            return (values) => {
+                'worklet';
+                const d = Math.max(Math.abs(values.originX - values.boriginX), Math.abs(values.originY - values.boriginY));
+                return {
+                    initialValues: {
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    animations: {
+                        originX: delayFunction(delay, withTiming(values.originX, config)),
+                        originY: delayFunction(delay, withSequence(withTiming(Math.min(values.originY, values.boriginY) - d, {
+                            duration,
+                            easing: Easing.out(Easing.exp),
+                        }), withTiming(values.originY, Object.assign(Object.assign({}, config), { duration, easing: Easing.bounce })))),
+                        width: delayFunction(delay, withTiming(values.width, config)),
+                        height: delayFunction(delay, withTiming(values.height, config)),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new JumpingTransition();
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/LinearTransition.js

@@ -0,0 +1,34 @@
+import { ComplexAnimationBuilder } from '../animationBuilder/ComplexAnimationBuilder';
+export class LinearTransition extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            const delayFunction = this.getDelayFunction();
+            const [animation, config] = this.getAnimationAndConfig();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            return (values) => {
+                'worklet';
+                return {
+                    initialValues: {
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    animations: {
+                        originX: delayFunction(delay, animation(values.originX, config)),
+                        originY: delayFunction(delay, animation(values.originY, config)),
+                        width: delayFunction(delay, animation(values.width, config)),
+                        height: delayFunction(delay, animation(values.height, config)),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new LinearTransition();
+    }
+}
+export const Layout = LinearTransition;

package/lib/reanimated2/layoutReanimation/defaultTransitions/SequencedTransition.js

@@ -0,0 +1,46 @@
+import { withSequence, withTiming } from '../../animation';
+import { BaseAnimationBuilder } from '../animationBuilder';
+export class SequencedTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.reversed = false;
+        this.build = () => {
+            var _a;
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const sequenceDuration = ((_a = this.durationV) !== null && _a !== void 0 ? _a : 500) / 2;
+            const config = { duration: sequenceDuration };
+            const reverse = this.reversed;
+            return (values) => {
+                'worklet';
+                return {
+                    initialValues: {
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    animations: {
+                        originX: delayFunction(delay, withSequence(withTiming(reverse ? values.boriginX : values.originX, config), withTiming(values.originX, config))),
+                        originY: delayFunction(delay, withSequence(withTiming(reverse ? values.originY : values.boriginY, config), withTiming(values.originY, config))),
+                        width: delayFunction(delay, withSequence(withTiming(reverse ? values.bwidth : values.width, config), withTiming(values.width, config))),
+                        height: delayFunction(delay, withSequence(withTiming(reverse ? values.height : values.bheight, config), withTiming(values.height, config))),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new SequencedTransition();
+    }
+    static reverse() {
+        const instance = SequencedTransition.createInstance();
+        return instance.reverse();
+    }
+    reverse() {
+        this.reversed = !this.reversed;
+        return this;
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/index.js

@@ -0,0 +1,6 @@
+export * from './LinearTransition';
+export * from './FadingTransition';
+export * from './SequencedTransition';
+export * from './JumpingTransition';
+export * from './CurvedTransition';
+export * from './EntryExitTransition';

package/lib/reanimated2/layoutReanimation/index.js

@@ -1,3 +1,4 @@
-export * from './AnimatedRoot';
-export * from './defaultAnimationsBuilder';
+import './LayoutAnimationRepository';
+export * from './animationBuilder';
 export * from './defaultAnimations';
+export * from './defaultTransitions';

package/lib/reanimated2/platform-specific/RNRenderer.web.js

@@ -1 +1,3 @@
 "use strict";
+// RNRender is not used for web. An export is still defined to eliminate warnings from bundlers such as esbuild.
+module.exports = null;

package/lib/reanimated2/utils.js

@@ -0,0 +1,9 @@
+import { measure } from './NativeMethods';
+export function getRelativeCoords(parentRef, x, y) {
+    'worklet';
+    const parentCoords = measure(parentRef);
+    return {
+        x: x - parentCoords.x,
+        y: y - parentCoords.y,
+    };
+}

package/package.json

@@ -1,14 +1,20 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.3.0-alpha.1",
+  "version": "2.3.0-beta.2",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "yarn run format && yarn run lint-check && yarn run test:unit",
     "test:unit": "jest",
     "format": "prettier --write --list-different './src/'",
+    "precommit": "yarn lint-java && yarn clang-format",
     "lint-check": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/",
     "lint-check-cpp": "./scripts/cpplint.sh",
+    "lint-java": "node ./scripts/lint-java.js",
+    "clang-format": "yarn clang-format-ios && yarn clang-format-android && yarn clang-format-common",
+    "clang-format-ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.cpp | xargs clang-format -i",
+    "clang-format-android": "find android/src/ -iname *.h -o -iname *.m -o -iname *.cpp | xargs clang-format -i",
+    "clang-format-common": "find Common/ -iname *.h -o -iname *.m -o -iname *.cpp | xargs clang-format -i",
     "release": "npm login && release-it",
     "type:check": "yarn tsc --noEmit",
     "type:generate": "yarn type:generate:clean && yarn type:generate:cp-js-src && yarn type:generate:tsc && yarn type:generate:remove.ts && yarn type:generate:remove.tsx",
@@ -27,6 +33,7 @@
     "Common/",
     "src/",
     "lib/",
+    "libSo/",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
     "android/build.gradle",
@@ -59,8 +66,10 @@
   "homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
   "dependencies": {
     "@babel/plugin-transform-object-assign": "^7.10.4",
-    "fbjs": "^3.0.0",
+    "invariant": "^2.2.4",
+    "lodash.isequal": "^4.5.0",
     "mockdate": "^3.0.2",
+    "react-native-screens": "^3.4.0",
     "string-hash-64": "^1.0.3"
   },
   "peerDependencies": {
@@ -83,13 +92,14 @@
     "@types/babel__generator": "^7.6.2",
     "@types/babel__traverse": "^7.0.15",
     "@types/jest": "^26.0.15",
-    "@types/react-native": "^0.64.2",
+    "@types/react-native": "^0.65.1",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^26.6.3",
     "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^6.5.1",
+    "clang-format": "^1.5.0",
+    "eslint": "^7.31.0",
     "eslint-config-prettier": "^6.4.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-import-resolver-babel-module": "^5.2.0",
@@ -98,19 +108,20 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "husky": "^4.2.5",
-    "jest": "^24.9.0",
+    "jest": "^26.6.3",
     "lint-staged": "^10.2.11",
     "prettier": "^2.2.1",
-    "react": "17.0.1",
-    "react-native": "0.64.1",
+    "react": "17.0.2",
+    "react-native": "0.66.0-rc.4",
+    "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
-    "react-test-renderer": "17.0.1",
+    "react-test-renderer": "17.0.2",
     "release-it": "^13.1.1",
     "typescript": "^4.1.3"
   },
   "lint-staged": {
     "*.(js|ts|tsx)": [
-      "eslint --ext '.js,.ts,.tsx' src/",
+      "eslint --ext '.js,.ts,.tsx' src/ --ignore-pattern src/reanimated1 --ignore-pattern react-native-reanimated.d.ts",
       "prettier --write"
     ]
   },