react-native-reanimated 2.7.0 → 2.9.1

package/lib/reanimated2/js-reanimated/index.js

@@ -1,29 +1,5 @@
 import JSReanimated from './JSReanimated';
-import { shouldBeUseWeb } from '../PlatformChecker';
 const reanimatedJS = new JSReanimated();
-if (shouldBeUseWeb()) {
-    global._frameTimestamp = null;
-    global._setGlobalConsole = (_val) => {
-        // noop
-    };
-    global._measure = () => {
-        console.warn("[Reanimated] You can't use `measure` with Chrome Debugger or with web version");
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            pageX: 0,
-            pageY: 0,
-        };
-    };
-    global._scrollTo = () => {
-        console.warn("[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version");
-    };
-    global._setGestureState = () => {
-        console.warn("[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version");
-    };
-}
 export const _updatePropsJS = (updates, viewRef) => {
     if (viewRef._component) {
         const component = viewRef._component;

package/lib/reanimated2/mock.js

@@ -64,6 +64,12 @@ const ReanimatedV2 = {
         out: ID,
         inOut: ID,
     },
+    Extrapolation: {
+        EXTEND: 'extend',
+        CLAMP: 'clamp',
+        IDENTITY: 'identity',
+    },
     runOnJS: (fn) => fn,
+    runOnUI: (fn) => fn,
 };
 module.exports = Object.assign({}, ReanimatedV2);

package/lib/types/lib/Animated.d.ts

@@ -0,0 +1,8 @@
+export { default as createAnimatedComponent } from './createAnimatedComponent';
+export { addWhitelistedNativeProps, addWhitelistedUIProps, } from './ConfigHelper';
+export { default as Text } from './reanimated2/component/Text';
+export { default as View } from './reanimated2/component/View';
+export { default as ScrollView } from './reanimated2/component/ScrollView';
+export { default as Image } from './reanimated2/component/Image';
+export { default as FlatList } from './reanimated2/component/FlatList';
+export * from './reanimated1';

package/lib/types/lib/index.d.ts

@@ -0,0 +1,4 @@
+import './reanimated2/js-reanimated/global';
+export * from './reanimated1';
+export * from './reanimated2';
+export * as default from './Animated';

package/lib/types/lib/reanimated2/component/Image.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AnimatedImage: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
+export default AnimatedImage;

package/lib/types/lib/reanimated2/component/ScrollView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AnimatedScrollView: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
+export default AnimatedScrollView;

package/lib/types/lib/reanimated2/component/Text.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AnimatedText: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
+export default AnimatedText;

package/lib/types/lib/reanimated2/component/View.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AnimatedView: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
+export default AnimatedView;

package/lib/types/lib/reanimated2/hook/useAnimatedSensor.d.ts

@@ -13,8 +13,6 @@ export declare type AnimatedSensor = {
     sensor: SensorValue3D | SensorValueRotation | null;
     unregister: () => void;
     isAvailable: boolean;
-    config: {
-        interval: number;
-    };
+    config: SensorConfig;
 };
 export declare function useAnimatedSensor(sensorType: SensorType, userConfig?: SensorConfig): AnimatedSensor;

package/lib/types/lib/reanimated2/js-reanimated/global.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/lib/reanimated2/mock.d.ts

@@ -51,5 +51,11 @@ declare const ReanimatedV2: {
         out: (t: any) => any;
         inOut: (t: any) => any;
     };
+    Extrapolation: {
+        EXTEND: string;
+        CLAMP: string;
+        IDENTITY: string;
+    };
     runOnJS: (fn: any) => any;
+    runOnUI: (fn: any) => any;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.7.0",
+  "version": "2.9.1",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -34,10 +34,10 @@
     "clean:deep": "cd android && rm -rf .cxx .gradle build && cd ../Example/android && rm -rf .gradle build app/build && cd ../.. && yarn clean",
     "reset:deep": "yarn clean:deep && yarn setup"
   },
-  "main": "lib/Animated.js",
-  "module": "lib/Animated",
-  "react-native": "src/Animated",
-  "source": "src/Animated",
+  "main": "lib/index.js",
+  "module": "lib/index",
+  "react-native": "src/index",
+  "source": "src/index",
   "types": "react-native-reanimated.d.ts",
   "files": [
     "Common/",
@@ -74,6 +74,7 @@
   },
   "homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
   "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
     "@babel/plugin-transform-object-assign": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@types/invariant": "^2.2.35",
@@ -121,11 +122,11 @@
     "lint-staged": "^11.2.0",
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
-    "react": "17.0.2",
-    "react-native": "0.68.0",
+    "react": "18.0.0",
+    "react-native": "0.69.1",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.0.0",
     "release-it": "^13.7.2",
     "typescript": "^4.1.3"
   },
@@ -154,5 +155,10 @@
       "commonjs",
       "module"
     ]
-  }
+  },
+  "sideEffects": [
+    "./lib/reanimated2/core",
+    "./lib/reanimated2/js-reanimated/global",
+    "./lib/index"
+  ]
 }

package/plugin.js

@@ -14,7 +14,6 @@ const functionArgsToWorkletize = new Map([
   ['useAnimatedScrollHandler', [0]],
   ['useAnimatedReaction', [0, 1]],
   ['useWorkletCallback', [0]],
-  ['createWorklet', [0]],
   // animations' callbacks
   ['withTiming', [2]],
   ['withSpring', [2]],
@@ -331,7 +330,7 @@ function makeWorkletName(t, fun) {
   return '_f'; // fallback for ArrowFunctionExpression and unnamed FunctionExpression
 }
 
-function makeWorklet(t, fun, fileName) {
+function makeWorklet(t, fun, state) {
   // Returns a new FunctionExpression which is a workletized version of provided
   // FunctionDeclaration, FunctionExpression, ArrowFunctionExpression or ObjectMethod.
 
@@ -358,7 +357,7 @@ function makeWorklet(t, fun, fileName) {
     '\n(' + (t.isObjectMethod(fun) ? 'function ' : '') + fun.toString() + '\n)';
 
   const transformed = transformSync(code, {
-    filename: fileName,
+    filename: state.file.opts.filename,
     presets: ['@babel/preset-typescript'],
     plugins: [
       '@babel/plugin-transform-shorthand-properties',
@@ -445,11 +444,17 @@ function makeWorklet(t, fun, fileName) {
   );
   const workletHash = hash(funString);
 
+  let location = state.file.opts.filename;
+  if (state.opts.relativeSourceLocation) {
+    const path = require('path');
+    location = path.relative(state.cwd, location);
+  }
+
   const loc = fun && fun.node && fun.node.loc && fun.node.loc.start;
   if (loc) {
     const { line, column } = loc;
     if (typeof line === 'number' && typeof column === 'number') {
-      fileName = `${fileName} (${line}:${column})`;
+      location = `${location} (${line}:${column})`;
     }
   }
 
@@ -490,7 +495,7 @@ function makeWorklet(t, fun, fileName) {
           t.identifier('__location'),
           false
         ),
-        t.stringLiteral(fileName)
+        t.stringLiteral(location)
       )
     ),
   ];
@@ -518,7 +523,7 @@ function makeWorklet(t, fun, fileName) {
   return newFun;
 }
 
-function processWorkletFunction(t, fun, fileName) {
+function processWorkletFunction(t, fun, state) {
   // Replaces FunctionDeclaration, FunctionExpression or ArrowFunctionExpression
   // with a workletized version of itself.
 
@@ -526,7 +531,7 @@ function processWorkletFunction(t, fun, fileName) {
     return;
   }
 
-  const newFun = makeWorklet(t, fun, fileName);
+  const newFun = makeWorklet(t, fun, state);
 
   const replacement = t.callExpression(newFun, []);
 
@@ -546,14 +551,14 @@ function processWorkletFunction(t, fun, fileName) {
   );
 }
 
-function processWorkletObjectMethod(t, path, fileName) {
+function processWorkletObjectMethod(t, path, state) {
   // Replaces ObjectMethod with a workletized version of itself.
 
   if (!t.isFunctionParent(path)) {
     return;
   }
 
-  const newFun = makeWorklet(t, path, fileName);
+  const newFun = makeWorklet(t, path, state);
 
   const replacement = t.objectProperty(
     t.identifier(path.node.key.name),
@@ -563,7 +568,7 @@ function processWorkletObjectMethod(t, path, fileName) {
   path.replaceWith(replacement);
 }
 
-function processIfWorkletNode(t, fun, fileName) {
+function processIfWorkletNode(t, fun, state) {
   fun.traverse({
     DirectiveLiteral(path) {
       const value = path.node.value;
@@ -581,14 +586,14 @@ function processIfWorkletNode(t, fun, fileName) {
               directive.value.value === 'worklet'
           )
         ) {
-          processWorkletFunction(t, fun, fileName);
+          processWorkletFunction(t, fun, state);
         }
       }
     },
   });
 }
 
-function processIfGestureHandlerEventCallbackFunctionNode(t, fun, fileName) {
+function processIfGestureHandlerEventCallbackFunctionNode(t, fun, state) {
   // Auto-workletizes React Native Gesture Handler callback functions.
   // Detects `Gesture.Tap().onEnd(<fun>)` or similar, but skips `something.onEnd(<fun>)`.
   // Supports method chaining as well, e.g. `Gesture.Tap().onStart(<fun1>).onUpdate(<fun2>).onEnd(<fun3>)`.
@@ -641,7 +646,7 @@ function processIfGestureHandlerEventCallbackFunctionNode(t, fun, fileName) {
     t.isCallExpression(fun.parent) &&
     isGestureObjectEventCallbackMethod(t, fun.parent.callee)
   ) {
-    processWorkletFunction(t, fun, fileName);
+    processWorkletFunction(t, fun, state);
   }
 }
 
@@ -697,7 +702,7 @@ function isGestureObject(t, node) {
   );
 }
 
-function processWorklets(t, path, fileName) {
+function processWorklets(t, path, state) {
   const name =
     path.node.callee.type === 'MemberExpression'
       ? path.node.callee.property.name
@@ -709,17 +714,17 @@ function processWorklets(t, path, fileName) {
     const properties = path.get('arguments.0.properties');
     for (const property of properties) {
       if (t.isObjectMethod(property)) {
-        processWorkletObjectMethod(t, property, fileName);
+        processWorkletObjectMethod(t, property, state);
       } else {
         const value = property.get('value');
-        processWorkletFunction(t, value, fileName);
+        processWorkletFunction(t, value, state);
       }
     }
   } else {
     const indexes = functionArgsToWorkletize.get(name);
     if (Array.isArray(indexes)) {
       indexes.forEach((index) => {
-        processWorkletFunction(t, path.get(`arguments.${index}`), fileName);
+        processWorkletFunction(t, path.get(`arguments.${index}`), state);
       });
     }
   }
@@ -751,6 +756,16 @@ function isPossibleOptimization(fun) {
   return flags;
 }
 
+const pluginProposalExportNamespaceFrom =
+  require('@babel/plugin-proposal-export-namespace-from').default;
+const apiMock = {
+  assertVersion: () => {
+    // do nothing.
+  },
+};
+const ExportNamedDeclarationFn =
+  pluginProposalExportNamespaceFrom(apiMock).visitor.ExportNamedDeclaration;
+
 module.exports = function ({ types: t }) {
   return {
     pre() {
@@ -764,16 +779,16 @@ module.exports = function ({ types: t }) {
     visitor: {
       CallExpression: {
         enter(path, state) {
-          processWorklets(t, path, state.file.opts.filename);
+          processWorklets(t, path, state);
         },
       },
       'FunctionDeclaration|FunctionExpression|ArrowFunctionExpression': {
         enter(path, state) {
-          const fileName = state.file.opts.filename;
-          processIfWorkletNode(t, path, fileName);
-          processIfGestureHandlerEventCallbackFunctionNode(t, path, fileName);
+          processIfWorkletNode(t, path, state);
+          processIfGestureHandlerEventCallbackFunctionNode(t, path, state);
         },
       },
+      ExportNamedDeclaration: ExportNamedDeclarationFn,
     },
   };
 };

package/react-native-reanimated.d.ts

@@ -156,7 +156,7 @@ declare module 'react-native-reanimated' {
       : Record<string, unknown>;
 
     export type AnimateProps<P extends object> = {
-      [K in keyof P]: P[K] | AnimatedNode<P[K]>;
+      [K in keyof Omit<P, 'style'>]: P[K] | AnimatedNode<P[K]>;
     } & {
       style?: StyleProp<AnimateStyle<StylesOrDefault<P>>>;
     } & {
@@ -498,10 +498,17 @@ declare module 'react-native-reanimated' {
     interval: number;
   };
 
+  export type AnimatedSensor = {
+    sensor: SensorValue3D | SensorValueRotation | null;
+    unregister: () => void;
+    isAvailable: boolean;
+    config: SensorConfig;
+  };
+
   export function useAnimatedSensor(
     sensorType: SensorType,
     userConfig?: SensorConfig
-  );
+  ): AnimatedSensor;
 
   export interface ExitAnimationsValues {
     currentOriginX: number;
@@ -614,14 +621,19 @@ declare module 'react-native-reanimated' {
     callback?: AnimationCallback
   ): number;
   export function cancelAnimation<T>(sharedValue: SharedValue<T>): void;
-  export function withDelay<T extends AnimatableValue>(delayMS: number, delayedAnimation: T): T;
+  export function withDelay<T extends AnimatableValue>(
+    delayMS: number,
+    delayedAnimation: T
+  ): T;
   export function withRepeat<T extends AnimatableValue>(
     animation: T,
     numberOfReps?: number,
     reverse?: boolean,
     callback?: AnimationCallback
   ): T;
-  export function withSequence<T extends AnimatableValue>(...animations: [T, ...T[]]): T;
+  export function withSequence<T extends AnimatableValue>(
+    ...animations: [T, ...T[]]
+  ): T;
 
   // reanimated2 functions
   export function runOnUI<A extends any[], R>(
@@ -638,9 +650,6 @@ declare module 'react-native-reanimated' {
   ): PropsAdapterFunction;
 
   export function processColor(color: number | string): number;
-  export function createWorklet<A extends any[], R>(
-    fn: (...args: A) => R
-  ): (...args: Parameters<typeof fn>) => R;
 
   export function interpolateColor<T extends string | number>(
     value: number,

package/src/Animated.ts

@@ -0,0 +1,13 @@
+export { default as createAnimatedComponent } from './createAnimatedComponent';
+export {
+  addWhitelistedNativeProps,
+  addWhitelistedUIProps,
+} from './ConfigHelper';
+
+export { default as Text } from './reanimated2/component/Text';
+export { default as View } from './reanimated2/component/View';
+export { default as ScrollView } from './reanimated2/component/ScrollView';
+export { default as Image } from './reanimated2/component/Image';
+export { default as FlatList } from './reanimated2/component/FlatList';
+// @ts-ignore backward compatibility with treeshaking
+export * from './reanimated1';

package/src/index.ts

@@ -0,0 +1,7 @@
+// tree-shaken side effects
+import './reanimated2/js-reanimated/global';
+
+// @ts-ignore backward compatibility with treeshaking
+export * from './reanimated1';
+export * from './reanimated2';
+export * as default from './Animated';

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -11,7 +11,7 @@ export class NativeReanimated {
   private InnerNativeModule: any;
 
   constructor(native = true) {
-    if (global.__reanimatedModuleProxy === undefined) {
+    if (global.__reanimatedModuleProxy === undefined && native) {
       const { ReanimatedModule } = NativeModules;
       ReanimatedModule?.installTurboModule();
     }

package/src/reanimated2/animation/sequence.ts

@@ -63,11 +63,6 @@ export function withSequence(
         now: Timestamp,
         previousAnimation: SequenceAnimation
       ): void {
-        if (animations.length === 1) {
-          throw Error(
-            'withSequence() animation require more than one animation as argument'
-          );
-        }
         animation.animationIndex = 0;
         if (previousAnimation === undefined) {
           previousAnimation = animations[

package/src/reanimated2/component/FlatList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FlatList, FlatListProps, LayoutChangeEvent } from 'react-native';
-import WrappedComponents from './WrappedComponents';
+import ReanimatedView from './View';
 import createAnimatedComponent from '../../createAnimatedComponent';
 import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/commonTypes';
 
@@ -11,12 +11,9 @@ const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
     onLayout: (event: LayoutChangeEvent) => void;
   }> = (props) => {
     return (
-      <WrappedComponents.View
-        layout={itemLayoutAnimation}
-        onLayout={props.onLayout}
-      >
+      <ReanimatedView layout={itemLayoutAnimation} onLayout={props.onLayout}>
         {props.children}
-      </WrappedComponents.View>
+      </ReanimatedView>
     );
   };
 

package/src/reanimated2/component/Image.ts

@@ -0,0 +1,6 @@
+import { Image } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const AnimatedImage = createAnimatedComponent(Image as any);
+
+export default AnimatedImage;

package/src/reanimated2/component/ScrollView.ts

@@ -0,0 +1,6 @@
+import { ScrollView } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const AnimatedScrollView = createAnimatedComponent(ScrollView);
+
+export default AnimatedScrollView;

package/src/reanimated2/component/Text.ts

@@ -0,0 +1,6 @@
+import { Text } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const AnimatedText = createAnimatedComponent(Text as any);
+
+export default AnimatedText;

package/src/reanimated2/component/View.ts

@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const AnimatedView = createAnimatedComponent(View);
+
+export default AnimatedView;

package/src/reanimated2/core.ts

@@ -333,11 +333,6 @@ if (!isWeb() && isConfigured()) {
       info: runOnJS(capturableConsole.info),
     };
     _setGlobalConsole(console);
-    if (global.performance == null) {
-      global.performance = {
-        now: global._chronoNow,
-      } as any; // due to conflict with lib.dom.d.ts -> Performance
-    }
   })();
 }
 

package/src/reanimated2/hook/useAnimatedSensor.ts

@@ -19,9 +19,7 @@ export type AnimatedSensor = {
   sensor: SensorValue3D | SensorValueRotation | null;
   unregister: () => void;
   isAvailable: boolean;
-  config: {
-    interval: number;
-  };
+  config: SensorConfig;
 };
 
 export function useAnimatedSensor(

package/src/reanimated2/hook/utils.ts

@@ -44,12 +44,6 @@ export function useEvent<T extends NativeEvent<T>>(
     initRef.current.updateWorklet(handler);
   }
 
-  useEffect(() => {
-    return () => {
-      initRef.current = null;
-    };
-  }, []);
-
   return initRef;
 }
 

package/src/reanimated2/js-reanimated/global.ts

@@ -0,0 +1,33 @@
+// In order to keep bundle size down, we treat this file as a polyfill for Web.
+
+import { shouldBeUseWeb } from '../PlatformChecker';
+
+if (shouldBeUseWeb()) {
+  global._frameTimestamp = null;
+  global._setGlobalConsole = (_val) => {
+    // noop
+  };
+  global._measure = () => {
+    console.warn(
+      "[Reanimated] You can't use `measure` with Chrome Debugger or with web version"
+    );
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      pageX: 0,
+      pageY: 0,
+    };
+  };
+  global._scrollTo = () => {
+    console.warn(
+      "[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version"
+    );
+  };
+  global._setGestureState = () => {
+    console.warn(
+      "[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version"
+    );
+  };
+}

package/src/reanimated2/js-reanimated/index.ts

@@ -1,5 +1,4 @@
 import JSReanimated from './JSReanimated';
-import { shouldBeUseWeb } from '../PlatformChecker';
 import { AnimatedStyle, StyleProps } from '../commonTypes';
 
 const reanimatedJS = new JSReanimated();
@@ -13,36 +12,6 @@ interface JSReanimatedComponent {
   };
 }
 
-if (shouldBeUseWeb()) {
-  global._frameTimestamp = null;
-  global._setGlobalConsole = (_val) => {
-    // noop
-  };
-  global._measure = () => {
-    console.warn(
-      "[Reanimated] You can't use `measure` with Chrome Debugger or with web version"
-    );
-    return {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      pageX: 0,
-      pageY: 0,
-    };
-  };
-  global._scrollTo = () => {
-    console.warn(
-      "[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version"
-    );
-  };
-  global._setGestureState = () => {
-    console.warn(
-      "[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version"
-    );
-  };
-}
-
 export const _updatePropsJS = (
   updates: StyleProps | AnimatedStyle,
   viewRef: { _component?: JSReanimatedComponent }

package/src/reanimated2/mock.ts

@@ -65,8 +65,14 @@ const ReanimatedV2 = {
     out: ID,
     inOut: ID,
   },
+  Extrapolation: {
+    EXTEND: 'extend',
+    CLAMP: 'clamp',
+    IDENTITY: 'identity',
+  },
 
   runOnJS: (fn) => fn,
+  runOnUI: (fn) => fn,
 };
 
 module.exports = {

package/lib/reanimated2/component/WrappedComponents.js

@@ -1,9 +0,0 @@
-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;