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

package/Common/cpp/Tools/RuntimeDecorator.cpp

@@ -1,4 +1,5 @@
 #include "RuntimeDecorator.h"
+#include <chrono>
 #include <memory>
 #include <unordered_map>
 #include "LayoutAnimationsProxy.h"
@@ -83,6 +84,22 @@ void RuntimeDecorator::decorateRuntime(
           jsi::PropNameID::forAscii(rt, "_setGlobalConsole"),
           1,
           setGlobalConsole));
+
+  rt.global().setProperty(
+      rt,
+      "_chronoNow",
+      jsi::Function::createFromHostFunction(
+          rt,
+          jsi::PropNameID::forAscii(rt, "_chronoNow"),
+          0,
+          [](jsi::Runtime &rt,
+             const jsi::Value &thisValue,
+             const jsi::Value *args,
+             size_t count) -> jsi::Value {
+            double now = std::chrono::system_clock::now().time_since_epoch() /
+                std::chrono::milliseconds(1);
+            return jsi::Value(now);
+          }));
 }
 
 void RuntimeDecorator::decorateUIRuntime(

package/android/build.gradle

@@ -107,3 +107,5 @@ while (!aar.exists()) {
 }
 
 artifacts.add("default", aar)
+
+apply from: './expo/linking.gradle'

package/android/expo/linking.gradle

@@ -0,0 +1,34 @@
+def isExpoLinked = false
+rootProject.getSubprojects().forEach({ project ->
+    if (project.plugins.hasPlugin("com.android.application")) {
+        if (project.configurations.implementation.getDependencies().find { dep -> dep.name == "expo" }) {
+            isExpoLinked = true
+        }
+    }
+})
+
+def safeExtGet(prop, fallback) {
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+if (isExpoLinked) {
+    apply plugin: 'com.android.library'
+
+    android {
+        compileSdkVersion safeExtGet('compileSdkVersion', 30)
+
+        sourceSets {
+            main.manifest.srcFile 'src/AndroidManifest.xml'
+            main.java.srcDirs = [ 'expo/src/main/java' ]
+        }
+    }
+
+    dependencies {
+        implementation 'com.facebook.react:react-native:+'
+        implementation project(':expo-modules-core')
+
+        project.configurations.default.artifacts.each { artifact ->
+            api files(artifact.file)
+        }
+    }
+}

package/android/expo/src/main/java/com/swmansion/reanimated/EXReanimatedAdapter.java

@@ -0,0 +1,12 @@
+package com.swmansion.reanimated;
+
+import com.facebook.react.bridge.JavaScriptContextHolder;
+import com.facebook.react.bridge.ReactApplicationContext;
+
+public class EXReanimatedAdapter {
+  public static void registerJSIModules(ReactApplicationContext reactApplicationContext, JavaScriptContextHolder jsContext) {
+    NodesManager nodesManager =
+      reactApplicationContext.getNativeModule(ReanimatedModule.class).getNodesManager();
+    nodesManager.initWithContext(reactApplicationContext);
+  }
+}

package/android/expo/src/main/java/expo/modules/adapters/reanimated/EXReanimatedPackage.java

@@ -0,0 +1,26 @@
+package expo.modules.adapters.reanimated;
+
+import android.content.Context;
+
+import com.facebook.react.bridge.JavaScriptContextHolder;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.swmansion.reanimated.EXReanimatedAdapter;
+
+import java.util.Collections;
+import java.util.List;
+
+import expo.modules.core.interfaces.Package;
+import expo.modules.core.interfaces.ReactNativeHostHandler;
+
+public class EXReanimatedPackage implements Package {
+  @Override
+  public List<? extends ReactNativeHostHandler> createReactNativeHostHandlers(Context context) {
+    final ReactNativeHostHandler handler = new ReactNativeHostHandler() {
+      @Override
+      public void onRegisterJSIModules(ReactApplicationContext reactApplicationContext, JavaScriptContextHolder jsContext, boolean useDeveloperSupport) {
+        EXReanimatedAdapter.registerJSIModules(reactApplicationContext, jsContext);
+      }
+    };
+    return Collections.singletonList(handler);
+  }
+}

package/expo-module.config.json

@@ -0,0 +1,3 @@
+{
+  "platforms": ["android"]
+}

package/ios/LayoutReanimation/REAAnimationsManager.m

@@ -7,6 +7,8 @@
 
 @interface REAAnimationsManager ()
 
+typedef NS_ENUM(NSInteger, FrameConfigType) { EnteringFrame, ExitingFrame };
+
 @property (atomic, nullable) void (^startAnimationForTag)(NSNumber *, NSString *, NSDictionary *, NSNumber *);
 @property (atomic, nullable) void (^removeConfigForTag)(NSNumber *);
 
@@ -21,6 +23,8 @@
   NSMutableDictionary<NSNumber *, NSNumber *> *_states;
   NSMutableDictionary<NSNumber *, UIView *> *_viewForTag;
   NSMutableSet<NSNumber *> *_toRemove;
+  NSMutableArray<NSString *> *_targetKeys;
+  NSMutableArray<NSString *> *_currentKeys;
   BOOL _cleaningScheduled;
 }
 
@@ -43,6 +47,13 @@
     _viewForTag = [NSMutableDictionary new];
     _toRemove = [NSMutableSet new];
     _cleaningScheduled = false;
+
+    _targetKeys = [NSMutableArray new];
+    _currentKeys = [NSMutableArray new];
+    for (NSString *key in [[self class] layoutKeys]) {
+      [_targetKeys addObject:[NSString stringWithFormat:@"target%@", [key capitalizedString]]];
+      [_currentKeys addObject:[NSString stringWithFormat:@"current%@", [key capitalizedString]]];
+    }
   }
   return self;
 }
@@ -56,6 +67,8 @@
   _viewForTag = nil;
   _toRemove = nil;
   _cleaningScheduled = false;
+  _targetKeys = nil;
+  _currentKeys = nil;
 }
 
 - (void)setAnimationStartingBlock:
@@ -208,16 +221,53 @@
   [componentData setProps:newProps forView:view];
 }
 
-- (NSDictionary *)prepareDataForAnimatingWorklet:(NSMutableDictionary *)values
+- (NSDictionary *)prepareDataForAnimatingWorklet:(NSMutableDictionary *)values frameConfig:(FrameConfigType)frameConfig
+{
+  UIView *windowView = UIApplication.sharedApplication.keyWindow;
+  if (frameConfig == EnteringFrame) {
+    NSDictionary *preparedData = @{
+      @"targetWidth" : values[@"width"],
+      @"targetHeight" : values[@"height"],
+      @"targetOriginX" : values[@"originX"],
+      @"targetOriginY" : values[@"originY"],
+      @"targetGlobalOriginX" : values[@"globalOriginX"],
+      @"targetGlobalOriginY" : values[@"globalOriginY"],
+      @"windowWidth" : [NSNumber numberWithDouble:windowView.bounds.size.width],
+      @"windowHeight" : [NSNumber numberWithDouble:windowView.bounds.size.height]
+    };
+    return preparedData;
+  } else {
+    NSDictionary *preparedData = @{
+      @"currentWidth" : values[@"width"],
+      @"currentHeight" : values[@"height"],
+      @"currentOriginX" : values[@"originX"],
+      @"currentOriginY" : values[@"originY"],
+      @"currentGlobalOriginX" : values[@"globalOriginX"],
+      @"currentGlobalOriginY" : values[@"globalOriginY"],
+      @"windowWidth" : [NSNumber numberWithDouble:windowView.bounds.size.width],
+      @"windowHeight" : [NSNumber numberWithDouble:windowView.bounds.size.height]
+    };
+    return preparedData;
+  }
+}
+
+- (NSDictionary *)prepareDataForLayoutAnimatingWorklet:(NSMutableDictionary *)currentValues
+                                          targetValues:(NSMutableDictionary *)targetValues
 {
   UIView *windowView = UIApplication.sharedApplication.keyWindow;
   NSDictionary *preparedData = @{
-    @"width" : values[@"width"],
-    @"height" : values[@"height"],
-    @"originX" : values[@"originX"],
-    @"originY" : values[@"originY"],
-    @"globalOriginX" : values[@"globalOriginX"],
-    @"globalOriginY" : values[@"globalOriginY"],
+    @"currentWidth" : currentValues[@"width"],
+    @"currentHeight" : currentValues[@"height"],
+    @"currentOriginX" : currentValues[@"originX"],
+    @"currentOriginY" : currentValues[@"originY"],
+    @"currentGlobalOriginX" : currentValues[@"globalOriginX"],
+    @"currentGlobalOriginY" : currentValues[@"globalOriginY"],
+    @"targetWidth" : targetValues[@"width"],
+    @"targetHeight" : targetValues[@"height"],
+    @"targetOriginX" : targetValues[@"originX"],
+    @"targetOriginY" : targetValues[@"originY"],
+    @"targetGlobalOriginX" : targetValues[@"globalOriginX"],
+    @"targetGlobalOriginY" : targetValues[@"globalOriginY"],
     @"windowWidth" : [NSNumber numberWithDouble:windowView.bounds.size.width],
     @"windowHeight" : [NSNumber numberWithDouble:windowView.bounds.size.height]
   };
@@ -241,7 +291,7 @@
     return;
   }
   _states[tag] = [NSNumber numberWithInt:Disappearing];
-  NSDictionary *preparedValues = [self prepareDataForAnimatingWorklet:startValues];
+  NSDictionary *preparedValues = [self prepareDataForAnimatingWorklet:startValues frameConfig:ExitingFrame];
   _startAnimationForTag(tag, @"exiting", preparedValues, @(0));
 }
 
@@ -257,7 +307,7 @@
   ViewState state = [_states[tag] intValue];
   if (state == Inactive) {
     if (targetValues != nil) {
-      NSDictionary *preparedValues = [self prepareDataForAnimatingWorklet:targetValues];
+      NSDictionary *preparedValues = [self prepareDataForAnimatingWorklet:targetValues frameConfig:EnteringFrame];
       _startAnimationForTag(tag, @"entering", preparedValues, @(0));
     }
     return;
@@ -268,7 +318,7 @@
 {
   NSNumber *tag = view.reactTag;
   NSMutableDictionary *targetValues = after.values;
-  NSMutableDictionary *startValues = before.values;
+  NSMutableDictionary *currentValues = before.values;
   if (_states[tag] == nil) {
     return;
   }
@@ -278,8 +328,9 @@
   }
   if (state == Appearing) {
     BOOL doNotStartLayout = true;
-    for (NSString *key in [[self class] layoutKeys]) {
-      if ([((NSNumber *)startValues[key]) doubleValue] != [((NSNumber *)targetValues[key]) doubleValue]) {
+    for (int i = 0; i < [[self class] layoutKeys].count; ++i) {
+      if ([((NSNumber *)currentValues[_currentKeys[i]]) doubleValue] !=
+          [((NSNumber *)targetValues[_targetKeys[i]]) doubleValue]) {
         doNotStartLayout = false;
       }
     }
@@ -288,13 +339,7 @@
     }
   }
   _states[view.reactTag] = [NSNumber numberWithInt:Layout];
-  NSDictionary *preparedStartValues = [self prepareDataForAnimatingWorklet:startValues];
-  NSDictionary *preparedTargetValues = [self prepareDataForAnimatingWorklet:targetValues];
-  NSMutableDictionary *preparedValues = [NSMutableDictionary new];
-  [preparedValues addEntriesFromDictionary:preparedTargetValues];
-  for (NSString *key in preparedStartValues.allKeys) {
-    preparedValues[[NSString stringWithFormat:@"%@%@", @"b", key]] = preparedStartValues[key];
-  }
+  NSDictionary *preparedValues = [self prepareDataForLayoutAnimatingWorklet:currentValues targetValues:targetValues];
   _startAnimationForTag(view.reactTag, @"layout", preparedValues, @(0));
 }
 

package/ios/native/REAInitializer.mm

@@ -46,10 +46,9 @@ JSIExecutor::RuntimeInstaller REAJSIExecutorRuntimeInstaller(
     auto reanimatedModule = reanimated::createReanimatedModule(bridge, callInvoker);
 #endif
     runtime.global().setProperty(
-      runtime,
-      "_WORKLET_RUNTIME",
-      static_cast<double>(
-          reinterpret_cast<std::uintptr_t>(reanimatedModule->runtime.get())));
+        runtime,
+        "_WORKLET_RUNTIME",
+        static_cast<double>(reinterpret_cast<std::uintptr_t>(reanimatedModule->runtime.get())));
 
     runtime.global().setProperty(
         runtime,

package/lib/Animated.js

@@ -1,17 +1,15 @@
-import { Image, ScrollView, Text, View, LogBox } from 'react-native';
+import { LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
 import * as reanimated1 from './reanimated1';
+import ReanimatedComponents from './reanimated2/component';
 
 const Animated = {
   // components
-  View: createAnimatedComponent(View),
-  Text: createAnimatedComponent(Text),
-  Image: createAnimatedComponent(Image),
-  ScrollView: createAnimatedComponent(ScrollView),
+  ...ReanimatedComponents,
   createAnimatedComponent,
   // configuration
   addWhitelistedNativeProps,

package/lib/createAnimatedComponent.js

@@ -64,8 +64,9 @@ function onlyAnimatedStyles(styles) {
 function isSameAnimatedStyle(style1, style2) {
     // We cannot use equality check to compare useAnimatedStyle outputs directly.
     // Instead, we can compare its viewsRefs.
-    return style1.viewsRef === style2.viewsRef;
+    return (style1 === null || style1 === void 0 ? void 0 : style1.viewsRef) === (style2 === null || style2 === void 0 ? void 0 : style2.viewsRef);
 }
+const isSameAnimatedProps = isSameAnimatedStyle;
 const has = (key, x) => {
     if (typeof x === 'function' || typeof x === 'object') {
         if (x === null || x === undefined) {
@@ -381,7 +382,8 @@ export default function createAnimatedComponent(Component, options) {
                 }
             });
             // detach old animatedProps
-            if (prevAnimatedProps && prevAnimatedProps !== this.props.animatedProps) {
+            if (prevAnimatedProps &&
+                !isSameAnimatedProps(prevAnimatedProps, this.props.animatedProps)) {
                 prevAnimatedProps.viewDescriptors.remove(viewTag);
             }
             // attach animatedProps property

package/lib/index.js

@@ -1,17 +1,15 @@
-import { Image, ScrollView, Text, View, LogBox } from 'react-native';
+import { LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
 import * as reanimated1 from './reanimated1';
+import ReanimatedComponents from './reanimated2/component';
 
 const Animated = {
   // components
-  View: createAnimatedComponent(View),
-  Text: createAnimatedComponent(Text),
-  Image: createAnimatedComponent(Image),
-  ScrollView: createAnimatedComponent(ScrollView),
+  ...ReanimatedComponents,
   createAnimatedComponent,
   // configuration
   addWhitelistedNativeProps,

package/lib/reanimated1/core/Core.test.js

@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 jest.mock('../../ReanimatedEventEmitter');
 jest.mock('../../ReanimatedModule');
-jest.mock('../../reanimated2/NativeReanimated');
+jest.mock('../../reanimated2/NativeReanimated/NativeReanimated');
 
 describe('Core Animated components', () => {
   xit('fails if something other then a node or function that returns a node is passed to Animated.Code exec prop', () => {

package/lib/reanimated2/component/FlatList.js

@@ -0,0 +1,30 @@
+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;
+};
+import React from 'react';
+import { FlatList } from 'react-native';
+import WrappedComponents from './WrappedComponents';
+import createAnimatedComponent from '../../createAnimatedComponent';
+const AnimatedFlatList = createAnimatedComponent(FlatList);
+const createCellRenderer = (itemLayoutAnimation) => {
+    const cellRenderer = (props) => {
+        return (<WrappedComponents.View layout={itemLayoutAnimation} onLayout={props.onLayout}>
+        {props.children}
+      </WrappedComponents.View>);
+    };
+    return cellRenderer;
+};
+const ReanimatedFlatlist = (_a) => {
+    var { itemLayoutAnimation } = _a, restProps = __rest(_a, ["itemLayoutAnimation"]);
+    const cellRenderer = React.useMemo(() => createCellRenderer(itemLayoutAnimation), []);
+    return (<AnimatedFlatList {...restProps} CellRendererComponent={cellRenderer}/>);
+};
+export default ReanimatedFlatlist;

package/lib/reanimated2/component/WrappedComponents.js

@@ -0,0 +1,9 @@
+import { Image, ScrollView, Text, View } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+const WrappedComponents = {
+    View: createAnimatedComponent(View),
+    Text: createAnimatedComponent(Text),
+    Image: createAnimatedComponent(Image),
+    ScrollView: createAnimatedComponent(ScrollView),
+};
+export default WrappedComponents;

package/lib/reanimated2/component/index.js

@@ -0,0 +1,4 @@
+import ReanimatedFlatlist from './FlatList';
+import WrappedComponents from './WrappedComponents';
+const ReanimatedComponents = Object.assign(Object.assign({}, WrappedComponents), { FlatList: ReanimatedFlatlist });
+export default ReanimatedComponents;

package/lib/reanimated2/core.js

@@ -275,6 +275,9 @@ if (!NativeReanimatedModule.useOnlyV1) {
                 info: runOnJS(capturableConsole.info),
             };
             _setGlobalConsole(console);
+            global.performance = {
+                now: global._chronoNow,
+            };
         })();
 }
 let featuresConfig = {

package/lib/reanimated2/globals.d.ts

@@ -26,6 +26,7 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _chronoNow: () => number;
   namespace NodeJS {
     interface Global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
@@ -37,6 +38,8 @@ declare global {
       _frameTimestamp: number | null;
       _measure: () => MeasuredDimensions;
       _scrollTo: () => void;
+      _chronoNow: () => number;
+      performance: { now: () => number };
       LayoutAnimationRepository: {
         configs: Record<string, unknown>;
         registerConfig(tag: number, config: Record<string, unknown>): void;

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

@@ -2,34 +2,34 @@ export const DefaultLayout = (values) => {
     'worklet';
     return {
         initialValues: {
-            originX: values.originX,
-            originY: values.originY,
-            width: values.width,
-            height: values.height,
+            originX: values.targetOriginX,
+            originY: values.targetOriginY,
+            width: values.targetWidth,
+            height: values.targetHeight,
         },
         animations: {},
     };
 };
-export const DefaultEntering = (targetValues) => {
+export const DefaultEntering = (values) => {
     'worklet';
     return {
         initialValues: {
-            originX: targetValues.originX,
-            originY: targetValues.originY,
-            width: targetValues.width,
-            height: targetValues.height,
+            originX: values.targetOriginX,
+            originY: values.targetOriginY,
+            width: values.targetWidth,
+            height: values.targetHeight,
         },
         animations: {},
     };
 };
-export const DefaultExiting = (startValues) => {
+export const DefaultExiting = (values) => {
     'worklet';
     return {
         initialValues: {
-            originX: startValues.originX,
-            originY: startValues.originY,
-            width: startValues.width,
-            height: startValues.height,
+            originX: values.currentOriginX,
+            originY: values.currentOriginY,
+            width: values.currentWidth,
+            height: values.currentHeight,
         },
         animations: {},
     };

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

@@ -14,7 +14,7 @@ export class FlipInXUp extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateX: '90deg' },
-                            { translateY: -targetValues.height },
+                            { translateY: -targetValues.targetHeight },
                         ],
                     },
                     animations: {
@@ -48,7 +48,7 @@ export class FlipInYLeft extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateY: '-90deg' },
-                            { translateX: -targetValues.width },
+                            { translateX: -targetValues.targetWidth },
                         ],
                     },
                     animations: {
@@ -82,7 +82,7 @@ export class FlipInXDown extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateX: '-90deg' },
-                            { translateY: targetValues.height },
+                            { translateY: targetValues.targetHeight },
                         ],
                     },
                     animations: {
@@ -116,7 +116,7 @@ export class FlipInYRight extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateY: '90deg' },
-                            { translateX: targetValues.width },
+                            { translateX: targetValues.targetWidth },
                         ],
                     },
                     animations: {
@@ -216,7 +216,7 @@ export class FlipOutXUp extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateX: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateY: delayFunction(delay, animation(-targetValues.height, config)),
+                                translateY: delayFunction(delay, animation(-targetValues.currentHeight, config)),
                             },
                         ],
                     },
@@ -252,7 +252,7 @@ export class FlipOutYLeft extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateY: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(-targetValues.width, config)),
+                                translateX: delayFunction(delay, animation(-targetValues.currentWidth, config)),
                             },
                         ],
                     },
@@ -288,7 +288,7 @@ export class FlipOutXDown extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateX: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateY: delayFunction(delay, animation(targetValues.height, config)),
+                                translateY: delayFunction(delay, animation(targetValues.currentHeight, config)),
                             },
                         ],
                     },
@@ -324,7 +324,7 @@ export class FlipOutYRight extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateY: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(targetValues.width, config)),
+                                translateX: delayFunction(delay, animation(targetValues.currentWidth, config)),
                             },
                         ],
                     },