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

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

@@ -0,0 +1,104 @@
+import {
+  ILayoutAnimationBuilder,
+  LayoutAnimationFunction,
+} from '../animationBuilder/commonTypes';
+import { BaseAnimationBuilder } from '../animationBuilder';
+import { EasingFn, Easing } from '../../Easing';
+import { withTiming } from '../../animation';
+
+export class CurvedTransition
+  extends BaseAnimationBuilder
+  implements ILayoutAnimationBuilder {
+  easingXV: EasingFn = Easing.in(Easing.ease);
+  easingYV: EasingFn = Easing.out(Easing.ease);
+  easingWidthV: EasingFn = Easing.in(Easing.exp);
+  easingHeightV: EasingFn = Easing.out(Easing.exp);
+  static createInstance(): CurvedTransition {
+    return new CurvedTransition();
+  }
+
+  static easingX(easing: EasingFn): CurvedTransition {
+    const instance = this.createInstance();
+    return instance.easingX(easing);
+  }
+
+  easingX(easing: EasingFn): CurvedTransition {
+    this.easingXV = easing;
+    return this;
+  }
+
+  static easingY(easing: EasingFn): CurvedTransition {
+    const instance = this.createInstance();
+    return instance.easingY(easing);
+  }
+
+  easingY(easing: EasingFn): CurvedTransition {
+    this.easingYV = easing;
+    return this;
+  }
+
+  static easingWidth(easing: EasingFn): CurvedTransition {
+    const instance = this.createInstance();
+    return instance.easingWidth(easing);
+  }
+
+  easingWidth(easing: EasingFn): CurvedTransition {
+    this.easingWidthV = easing;
+    return this;
+  }
+
+  static easingHeight(easing: EasingFn): CurvedTransition {
+    const instance = this.createInstance();
+    return instance.easingHeight(easing);
+  }
+
+  easingHeight(easing: EasingFn): CurvedTransition {
+    this.easingHeightV = easing;
+    return this;
+  }
+
+  build = (): LayoutAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const callback = this.callbackV;
+    const delay = this.getDelay();
+    const duration = this.durationV ?? 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,
+      };
+    };
+  };
+}

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

@@ -0,0 +1,213 @@
+import {
+  ILayoutAnimationBuilder,
+  LayoutAnimationsValues,
+  LayoutAnimationFunction,
+} from '../animationBuilder/commonTypes';
+import { BaseAnimationBuilder } from '../animationBuilder';
+import { AnimationObject, withSequence, withTiming } from '../../animation';
+import { FadeIn, FadeOut } from '../defaultAnimations/Fade';
+import { StyleProps, TransformProperty } from '../../commonTypes';
+
+export class EntryExitTransition
+  extends BaseAnimationBuilder
+  implements ILayoutAnimationBuilder {
+  enteringV: BaseAnimationBuilder | typeof BaseAnimationBuilder = FadeIn;
+
+  exitingV: BaseAnimationBuilder | typeof BaseAnimationBuilder = FadeOut;
+
+  static createInstance(): EntryExitTransition {
+    return new EntryExitTransition();
+  }
+
+  static entering(
+    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
+  ): EntryExitTransition {
+    const instance = this.createInstance();
+    return instance.entering(animation);
+  }
+
+  entering(
+    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
+  ): EntryExitTransition {
+    this.enteringV = animation;
+    return this;
+  }
+
+  static exiting(
+    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
+  ): EntryExitTransition {
+    const instance = this.createInstance();
+    return instance.exiting(animation);
+  }
+
+  exiting(
+    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
+  ): EntryExitTransition {
+    this.exitingV = animation;
+    return this;
+  }
+
+  build = (): LayoutAnimationFunction => {
+    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';
+      const enteringValues = enteringAnimation(values);
+      const exitingValues = exitingAnimation(values);
+      const animations: StyleProps = {
+        transform: [],
+      };
+
+      for (const prop of Object.keys(exitingValues.animations)) {
+        if (prop === 'transform') {
+          exitingValues.animations[prop]?.forEach((value, index) => {
+            for (const transformProp of Object.keys(value)) {
+              animations.transform?.push({
+                [transformProp]: delayFunction(
+                  delay,
+                  withSequence(
+                    value[transformProp as keyof TransformProperty],
+                    withTiming(
+                      exitingValues.initialValues.transform
+                        ? exitingValues.initialValues.transform[index][
+                            transformProp as keyof TransformProperty
+                          ]
+                        : 0,
+                      { duration: 0 }
+                    )
+                  )
+                ),
+              } as TransformProperty);
+            }
+          });
+        } 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 as keyof LayoutAnimationsValues]
+                      : exitingValues.initialValues[prop],
+                    { duration: 0 }
+                  ),
+                ];
+
+          animations[prop] = delayFunction(delay, withSequence(...sequence));
+        }
+      }
+      for (const prop of Object.keys(enteringValues.animations)) {
+        if (prop === 'transform') {
+          enteringValues.animations[prop]?.forEach((value, index) => {
+            for (const transformProp of Object.keys(value)) {
+              animations.transform?.push({
+                [transformProp]: delayFunction(
+                  delay + exitingDuration,
+                  withSequence(
+                    withTiming(
+                      enteringValues.initialValues.transform
+                        ? enteringValues.initialValues.transform[index][
+                            transformProp as keyof TransformProperty
+                          ]
+                        : 0,
+                      { duration: 0 }
+                    ),
+                    value[transformProp as keyof TransformProperty]
+                  )
+                ),
+              } as TransformProperty);
+            }
+          });
+        } 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 = (
+        exitingValues.initialValues.transform ?? []
+      ).concat(
+        (enteringValues.animations.transform ?? []).map((value) => {
+          for (const transformProp of Object.keys(value)) {
+            const current = (value[
+              transformProp as keyof TransformProperty
+            ] as AnimationObject).current;
+            if (typeof current === 'string') {
+              if (current.includes('deg'))
+                return ({
+                  [transformProp]: '0deg',
+                } as unknown) as TransformProperty;
+              else
+                return ({
+                  [transformProp]: '0',
+                } as unknown) as TransformProperty;
+            } else if (transformProp.includes('translate')) {
+              return ({ [transformProp]: 0 } as unknown) as TransformProperty;
+            } else {
+              return ({ [transformProp]: 1 } as unknown) as TransformProperty;
+            }
+          }
+          return value;
+        })
+      );
+
+      return {
+        initialValues: {
+          ...exitingValues.initialValues,
+          originX: values.boriginX,
+          originY: values.boriginY,
+          width: values.bwidth,
+          height: values.bheight,
+          transform: mergedTransform,
+        },
+        animations: {
+          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,
+      };
+    };
+  };
+}
+
+export function combineTransition(
+  exiting: BaseAnimationBuilder | typeof BaseAnimationBuilder,
+  entering: BaseAnimationBuilder | typeof BaseAnimationBuilder
+): EntryExitTransition {
+  return EntryExitTransition.entering(entering).exiting(exiting);
+}

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

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

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 @@
-export * from './AnimatedRoot';
-export * from './defaultAnimationsBuilder';
+import './LayoutAnimationRepository';
+export * from './animationBuilder';
 export * from './defaultAnimations';
+export * from './defaultTransitions';

package/src/reanimated2/platform-specific/RNRenderer.web.ts

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

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/ios/LayoutReanimation/REAAnimationRootView.h

@@ -1,12 +0,0 @@
-#import <Foundation/Foundation.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface REAAnimationRootView : UIView
-
-@property BOOL shouldBeAnimated;
-@property NSSet* capturablePropeties;
-
-@end
-
-NS_ASSUME_NONNULL_END

package/ios/LayoutReanimation/REAAnimationRootView.m

@@ -1,16 +0,0 @@
-#import "REAAnimationRootView.h"
-
-@implementation REAAnimationRootView
-
-- (instancetype)init
-{
-    if (self = [super init])
-    {
-        // In the future it should be set separately for each AnimationRoot by a user 
-        self.capturablePropeties = [[NSSet alloc] initWithArray: @[@"height", @"width", @"originX", @"originY"]];
-        return self;
-    }
-    return nil;
-}
-
-@end

package/ios/LayoutReanimation/REAAnimationRootViewManager.h

@@ -1,9 +0,0 @@
-#import "RCTViewManager.h"
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface REAAnimationRootViewManager : RCTViewManager
- //TODO let view Manager handle animation updates (this way we can let view animated almost any property)
-@end
-
-NS_ASSUME_NONNULL_END

package/ios/LayoutReanimation/REAAnimationRootViewManager.m

@@ -1,49 +0,0 @@
-#import "REAAnimationRootViewManager.h"
-#import "REAAnimationRootView.h"
-#import <React/RCTViewManager.h>
-#import "RCTShadowView.h"
-#import "REAReactBatchObserver.h"
-
-@interface REAShadowView : RCTShadowView
-
-@end
-
-@implementation REAShadowView {
-    NSNumber* _tag;
-}
-
-@synthesize reactTag = _tag;
-
-- (NSNumber*)reactTag
-{
-    return _tag;
-}
-
-- (void)setReactTag:(NSNumber*)reactTag
-{
-    _tag = reactTag;
-    [[REAReactBatchObserver animationRootsTags] addObject:reactTag];
-}
-
-@end
-
-@implementation REAAnimationRootViewManager
-
-RCT_EXPORT_MODULE(REALayoutView)
-
-- (UIView *)view
-{
-    return [REAAnimationRootView new];
-}
-
-- (RCTShadowView*)shadowView
-{
-    return [REAShadowView new];
-}
-
-RCT_CUSTOM_VIEW_PROPERTY(animated, BOOL, REAAnimationRootView)
-{
-    view.shouldBeAnimated = [RCTConvert BOOL:json];
-}
-
-@end