react-native-reanimated 2.3.0-alpha.3 → 2.3.0-beta.4

package/src/reanimated2/layoutReanimation/defaultTransitions/JumpingTransition.ts

@@ -0,0 +1,58 @@
+import {
+  ILayoutAnimationBuilder,
+  LayoutAnimationFunction,
+} from '../animationBuilder/commonTypes';
+import { withSequence, withTiming } from '../../animation';
+import { Easing } from '../../Easing';
+import { BaseAnimationBuilder } from '../animationBuilder';
+export class JumpingTransition
+  extends BaseAnimationBuilder
+  implements ILayoutAnimationBuilder {
+  static createInstance(): JumpingTransition {
+    return new JumpingTransition();
+  }
+
+  build = (): LayoutAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const callback = this.callbackV;
+    const delay = this.getDelay();
+    const duration = (this.durationV ?? 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, {
+                ...config,
+                duration,
+                easing: Easing.bounce,
+              })
+            )
+          ),
+          width: delayFunction(delay, withTiming(values.width, config)),
+          height: delayFunction(delay, withTiming(values.height, config)),
+        },
+        callback: callback,
+      };
+    };
+  };
+}

package/src/reanimated2/layoutReanimation/defaultTransitions/LinearTransition.ts

@@ -0,0 +1,41 @@
+import { ComplexAnimationBuilder } from '../animationBuilder/ComplexAnimationBuilder';
+import {
+  ILayoutAnimationBuilder,
+  LayoutAnimationFunction,
+} from '../animationBuilder/commonTypes';
+
+export class LinearTransition
+  extends ComplexAnimationBuilder
+  implements ILayoutAnimationBuilder {
+  static createInstance(): LinearTransition {
+    return new LinearTransition();
+  }
+
+  build = (): LayoutAnimationFunction => {
+    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,
+      };
+    };
+  };
+}
+
+export const Layout = LinearTransition;

package/src/reanimated2/layoutReanimation/defaultTransitions/SequencedTransition.ts

@@ -0,0 +1,78 @@
+import { withSequence, withTiming } from '../../animation';
+import {
+  ILayoutAnimationBuilder,
+  LayoutAnimationFunction,
+} from '../animationBuilder/commonTypes';
+import { BaseAnimationBuilder } from '../animationBuilder';
+
+export class SequencedTransition
+  extends BaseAnimationBuilder
+  implements ILayoutAnimationBuilder {
+  reversed = false;
+
+  static createInstance(): SequencedTransition {
+    return new SequencedTransition();
+  }
+
+  static reverse(): SequencedTransition {
+    const instance = SequencedTransition.createInstance();
+    return instance.reverse();
+  }
+
+  reverse(): SequencedTransition {
+    this.reversed = !this.reversed;
+    return this;
+  }
+
+  build = (): LayoutAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const callback = this.callbackV;
+    const delay = this.getDelay();
+    const sequenceDuration = (this.durationV ?? 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,
+      };
+    };
+  };
+}

package/src/reanimated2/layoutReanimation/defaultTransitions/index.ts

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

package/src/reanimated2/layoutReanimation/index.ts

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

package/src/reanimated2/mock.ts

@@ -5,15 +5,17 @@ const NOOP = () => {
   // noop
 };
 const ID = (t) => t;
+const IMMEDIATE_CB_INVOCATION = (cb: () => unknown) => cb();
 
 const ReanimatedV2 = {
   useSharedValue: (v) => ({ value: v }),
   useDerivedValue: (a) => ({ value: a() }),
   useAnimatedScrollHandler: () => NOOP,
   useAnimatedGestureHandler: () => NOOP,
-  useAnimatedStyle: (style) => style,
+  useAnimatedStyle: IMMEDIATE_CB_INVOCATION,
   useAnimatedRef: () => ({ current: null }),
   useAnimatedReaction: NOOP,
+  useAnimatedProps: IMMEDIATE_CB_INVOCATION,
 
   withTiming: (toValue, _, cb) => {
     cb && cb(true);

package/src/reanimated2/utils.ts

@@ -0,0 +1,21 @@
+import { Component } from 'react';
+import { measure } from './NativeMethods';
+import { RefObjectFunction } from './hook/useAnimatedRef';
+
+export interface ComponentCoords {
+  x: number;
+  y: number;
+}
+
+export function getRelativeCoords(
+  parentRef: RefObjectFunction<Component>,
+  x: number,
+  y: number
+): ComponentCoords {
+  'worklet';
+  const parentCoords = measure(parentRef);
+  return {
+    x: x - parentCoords.x,
+    y: y - parentCoords.y,
+  };
+}

package/src/{setAndForwardRef.js → setAndForwardRef.ts}

@@ -2,6 +2,8 @@
  * imported from react-native
  */
 
+import { MutableRefObject } from 'react';
+
 /**
  * This is a helper function for when a component needs to be able to forward a ref
  * to a child component, but still needs to have access to that component as part of
@@ -33,8 +35,16 @@
  *   module.exports = MyViewWithRef;
  */
 
-function setAndForwardRef({ getForwardedRef, setLocalRef }) {
-  return function forwardRef(ref) {
+export type ForwardedRef<T> = () => MutableRefObject<T> | ((ref: T) => void);
+
+function setAndForwardRef<T>({
+  getForwardedRef,
+  setLocalRef,
+}: {
+  getForwardedRef: ForwardedRef<T>;
+  setLocalRef: (ref: T) => void;
+}): (ref: T) => void {
+  return function forwardRef(ref: T) {
     const forwardedRef = getForwardedRef();
 
     setLocalRef(ref);

package/lib/reanimated2/NativeReanimated.js

@@ -1,48 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { Platform } from 'react-native';
-import reanimatedJS from './js-reanimated';
-import { nativeShouldBeMock } from './PlatformChecker';
-let exportedModule;
-if (nativeShouldBeMock()) {
-    exportedModule = reanimatedJS;
-}
-else {
-    const InnerNativeModule = global.__reanimatedModuleProxy;
-    const NativeReanimated = {
-        native: true,
-        useOnlyV1: InnerNativeModule == null,
-        installCoreFunctions(valueSetter) {
-            return InnerNativeModule.installCoreFunctions(valueSetter);
-        },
-        makeShareable(value) {
-            return InnerNativeModule.makeShareable(value);
-        },
-        makeMutable(value) {
-            return InnerNativeModule.makeMutable(value);
-        },
-        makeRemote(object) {
-            return InnerNativeModule.makeRemote(object);
-        },
-        startMapper(mapper, inputs = [], outputs = [], updater, tag, name) {
-            return InnerNativeModule.startMapper(mapper, inputs, outputs, updater, tag, name);
-        },
-        stopMapper(mapperId) {
-            return InnerNativeModule.stopMapper(mapperId);
-        },
-        registerEventHandler(eventHash, eventHandler) {
-            return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
-        },
-        unregisterEventHandler(registrationId) {
-            return InnerNativeModule.unregisterEventHandler(registrationId);
-        },
-        getViewProp(viewTag, propName, callback) {
-            return InnerNativeModule.getViewProp(viewTag, propName, callback);
-        },
-    };
-    if (NativeReanimated.useOnlyV1 && Platform.OS === 'android') {
-        console.warn(`If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`);
-    }
-    exportedModule = NativeReanimated;
-}
-export default exportedModule; // TODO: just temporary type

package/lib/reanimated2/layoutReanimation/animationBuilder/BaseBounceAnimationBuilder.js

@@ -1,55 +0,0 @@
-import { withDelay, withTiming } from '../../animation';
-export class BaseBounceAnimationBuilder {
-    constructor() {
-        this.build = () => {
-            throw Error('Unimplemented method in child class.');
-        };
-    }
-    static duration(durationMs) {
-        const instance = this.createInstance();
-        return instance.duration(durationMs);
-    }
-    duration(durationMs) {
-        this.durationV = durationMs;
-        return this;
-    }
-    static delay(delayMs) {
-        const instance = this.createInstance();
-        return instance.delay(delayMs);
-    }
-    delay(delayMs) {
-        this.delayV = delayMs;
-        return this;
-    }
-    static withCallback(callback) {
-        const instance = this.createInstance();
-        return instance.withCallback(callback);
-    }
-    withCallback(callback) {
-        this.callbackV = callback;
-        return this;
-    }
-    getDelayFunction() {
-        const delay = this.delayV;
-        return delay
-            ? withDelay
-            : (_, animation) => {
-                'worklet';
-                return animation;
-            };
-    }
-    getAnimationAndConfig() {
-        const duration = this.durationV;
-        const type = withTiming;
-        const animation = type;
-        const config = {};
-        if (duration) {
-            config.duration = duration;
-        }
-        return [animation, config];
-    }
-    static build() {
-        const instance = this.createInstance();
-        return instance.build();
-    }
-}

package/lib/reanimated2/layoutReanimation/animationBuilder/LayoutAnimationBuilder.js

@@ -1,165 +0,0 @@
-import { withDelay, withTiming, withSpring } from '../../animation';
-export class LayoutAnimationBuilder {
-    constructor() {
-        this.build = () => {
-            const duration = this.durationV;
-            const easing = this.easingV;
-            const delay = this.delayV;
-            const type = this.type ? this.type : withTiming;
-            const damping = this.dampingV;
-            const mass = this.massV;
-            const stiffness = this.stiffnessV;
-            const overshootClamping = this.overshootClampingV;
-            const restDisplacementThreshold = this.restDisplacementThresholdV;
-            const restSpeedThreshold = this.restSpeedThresholdV;
-            const callback = this.callbackV;
-            const delayFunction = delay
-                ? withDelay
-                : (_, animation) => {
-                    'worklet';
-                    return animation;
-                };
-            const animation = type;
-            const config = {};
-            if (type === withTiming) {
-                if (easing) {
-                    config.easing = easing;
-                }
-                if (duration) {
-                    config.duration = duration;
-                }
-            }
-            else {
-                if (damping) {
-                    config.damping = damping;
-                }
-                if (mass) {
-                    config.mass = mass;
-                }
-                if (stiffness) {
-                    config.stiffness = stiffness;
-                }
-                if (overshootClamping) {
-                    config.overshootClamping = overshootClamping;
-                }
-                if (restDisplacementThreshold) {
-                    config.restDisplacementThreshold = restDisplacementThreshold;
-                }
-                if (restSpeedThreshold) {
-                    config.restSpeedThreshold = restSpeedThreshold;
-                }
-            }
-            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 duration(durationMs) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.duration(durationMs);
-    }
-    duration(durationMs) {
-        this.durationV = durationMs;
-        return this;
-    }
-    static easing(easingFunction) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.easing(easingFunction);
-    }
-    easing(easingFunction) {
-        this.easingV = easingFunction;
-        return this;
-    }
-    static delay(durationMs) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.delay(durationMs);
-    }
-    delay(durationMs) {
-        this.delayV = durationMs;
-        return this;
-    }
-    static springify() {
-        const instance = new LayoutAnimationBuilder();
-        return instance.springify();
-    }
-    springify() {
-        this.type = withSpring;
-        return this;
-    }
-    static damping(damping) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.damping(damping);
-    }
-    damping(damping) {
-        this.dampingV = damping;
-        return this;
-    }
-    static mass(mass) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.mass(mass);
-    }
-    mass(mass) {
-        this.massV = mass;
-        return this;
-    }
-    static stiffness(stiffness) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.stiffness(stiffness);
-    }
-    stiffness(stiffness) {
-        this.stiffnessV = stiffness;
-        return this;
-    }
-    static overshootClamping(overshootClamping) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.overshootClamping(overshootClamping);
-    }
-    overshootClamping(overshootClamping) {
-        this.overshootClampingV = overshootClamping;
-        return this;
-    }
-    static restDisplacementThreshold(restDisplacementThreshold) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.restDisplacementThreshold(restDisplacementThreshold);
-    }
-    restDisplacementThreshold(restDisplacementThreshold) {
-        this.restDisplacementThresholdV = restDisplacementThreshold;
-        return this;
-    }
-    static restSpeedThreshold(r) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.restSpeedThreshold(r);
-    }
-    restSpeedThreshold(restSpeedThreshold) {
-        this.restSpeedThresholdV = restSpeedThreshold;
-        return this;
-    }
-    static withCallback(callback) {
-        const instance = new LayoutAnimationBuilder();
-        return instance.withCallback(callback);
-    }
-    withCallback(callback) {
-        this.callbackV = callback;
-        return this;
-    }
-    static build() {
-        const instance = new LayoutAnimationBuilder();
-        return instance.build();
-    }
-}
-export const Layout = LayoutAnimationBuilder;

package/src/ReanimatedModuleCompat.js

@@ -1,37 +0,0 @@
-export default {
-  async disconnectNodeFromView() {
-    // noop
-  },
-  async attachEvent(_viewTag, _eventName, _nodeID) {
-    // noop
-  },
-  async detachEvent(_viewTag, _eventName, _nodeID) {
-    // noop
-  },
-  async createNode(_nodeID, _config) {
-    // noop
-  },
-  async dropNode(_nodeID) {
-    // noop
-  },
-  async configureProps() {
-    // noop
-  },
-  async disconnectNodes() {
-    // noop
-  },
-  async addListener() {
-    // noop
-  },
-  async removeListeners() {
-    // noop
-  },
-  async removeAllListeners() {
-    // noop
-  },
-  async animateNextTransition() {
-    console.warn(
-      'Reanimated: animateNextTransition is unimplemented on current platform'
-    );
-  },
-};

package/src/reanimated2/NativeReanimated.ts

@@ -1,70 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { Platform } from 'react-native';
-import reanimatedJS from './js-reanimated';
-import { nativeShouldBeMock } from './PlatformChecker';
-
-let exportedModule;
-if (nativeShouldBeMock()) {
-  exportedModule = reanimatedJS;
-} else {
-  const InnerNativeModule = global.__reanimatedModuleProxy;
-
-  const NativeReanimated = {
-    native: true,
-    useOnlyV1: InnerNativeModule == null,
-
-    installCoreFunctions(valueSetter) {
-      return InnerNativeModule.installCoreFunctions(valueSetter);
-    },
-
-    makeShareable(value) {
-      return InnerNativeModule.makeShareable(value);
-    },
-
-    makeMutable(value) {
-      return InnerNativeModule.makeMutable(value);
-    },
-
-    makeRemote(object) {
-      return InnerNativeModule.makeRemote(object);
-    },
-
-    startMapper(mapper, inputs = [], outputs = [], updater, tag, name) {
-      return InnerNativeModule.startMapper(
-        mapper,
-        inputs,
-        outputs,
-        updater,
-        tag,
-        name
-      );
-    },
-
-    stopMapper(mapperId) {
-      return InnerNativeModule.stopMapper(mapperId);
-    },
-
-    registerEventHandler(eventHash, eventHandler) {
-      return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
-    },
-
-    unregisterEventHandler(registrationId) {
-      return InnerNativeModule.unregisterEventHandler(registrationId);
-    },
-
-    getViewProp(viewTag, propName, callback) {
-      return InnerNativeModule.getViewProp(viewTag, propName, callback);
-    },
-  };
-
-  if (NativeReanimated.useOnlyV1 && Platform.OS === 'android') {
-    console.warn(
-      `If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`
-    );
-  }
-
-  exportedModule = NativeReanimated;
-}
-
-export default exportedModule as any; // TODO: just temporary type

package/src/reanimated2/layoutReanimation/LayoutAnimationRepository.tsx

@@ -1,41 +0,0 @@
-/* global _stopObservingProgress, _startObservingProgress */
-import { runOnUI } from '../core';
-import { withStyleAnimation } from '../animation/styleAnimation';
-
-runOnUI(() => {
-  'worklet';
-
-  const configs: Record<string, any> = {};
-
-  global.LayoutAnimationRepository = {
-    configs,
-    registerConfig(tag, config) {
-      configs[tag] = config;
-    },
-    removeConfig(tag) {
-      delete configs[tag];
-    },
-    startAnimationForTag(tag, type, yogaValues) {
-      if (configs[tag] == null) {
-        return; // :(
-      }
-
-      const style = configs[tag][type](yogaValues);
-      const sv: { value: boolean; _value: boolean } = configs[tag].sv;
-      _stopObservingProgress(tag, false);
-      _startObservingProgress(tag, sv);
-      sv._value = Object.assign({}, sv._value, style.initialValues);
-      _stopObservingProgress(tag, false);
-      const animation = withStyleAnimation(style.animations);
-
-      animation.callback = (finished?: boolean) => {
-        if (finished) {
-          _stopObservingProgress(tag, finished);
-        }
-        style.callback && style.callback(finished);
-      };
-      configs[tag].sv.value = animation;
-      _startObservingProgress(tag, sv);
-    },
-  };
-})();