react-native-reanimated 2.8.0 → 2.10.0

package/lib/types/{lib/reanimated2 → 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/mock.js

@@ -102,6 +102,7 @@ const Reanimated = {
   Text,
   Image,
   ScrollView: Animated.ScrollView,
+  FlatList: Animated.FlatList,
   Code,
 
   Clock: NOOP,

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "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:js && yarn run lint:js && yarn run test:unit",
     "test:unit": "jest",
     "lint": "yarn lint:js && yarn lint:cpp && yarn lint:java",
@@ -34,10 +33,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/",
@@ -101,7 +100,7 @@
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.14.2",
     "@types/jest": "^27.4.0",
-    "@types/react-native": "^0.66.15",
+    "@types/react-native": "^0.69.5",
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "babel-eslint": "^10.1.0",
@@ -122,10 +121,11 @@
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
     "react": "17.0.2",
-    "react-native": "0.68.0",
+    "react-native": "0.70.0-rc.3",
+    "react-native-builder-bob": "^0.18.3",
     "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 +154,10 @@
       "commonjs",
       "module"
     ]
-  }
+  },
+  "sideEffects": [
+    "./lib/reanimated2/core",
+    "./lib/reanimated2/js-reanimated/global",
+    "./lib/index"
+  ]
 }

package/plugin.js

@@ -7,6 +7,7 @@ const { transformSync } = require('@babel/core');
  * holds a map of function names as keys and array of argument indexes as values which should be automatically workletized(they have to be functions)(starting from 0)
  */
 const functionArgsToWorkletize = new Map([
+  ['useFrameCallback', [0]],
   ['useAnimatedStyle', [0]],
   ['useAnimatedProps', [0]],
   ['createAnimatedPropAdapter', [0]],
@@ -14,7 +15,6 @@ const functionArgsToWorkletize = new Map([
   ['useAnimatedScrollHandler', [0]],
   ['useAnimatedReaction', [0, 1]],
   ['useWorkletCallback', [0]],
-  ['createWorklet', [0]],
   // animations' callbacks
   ['withTiming', [2]],
   ['withSpring', [2]],
@@ -306,13 +306,14 @@ function buildWorkletString(t, fun, closureVariables, name) {
     },
   });
 
+  const expression = fun.program.body.find(
+    ({ type }) => type === 'ExpressionStatement'
+  ).expression;
+
   const workletFunction = t.functionExpression(
     t.identifier(name),
-    fun.program.body[0].expression.params,
-    prependClosureVariablesIfNecessary(
-      closureVariables,
-      fun.program.body[0].expression.body
-    )
+    expression.params,
+    prependClosureVariablesIfNecessary(closureVariables, expression.body)
   );
 
   return generate(workletFunction, { compact: true }).code;

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>>>;
     } & {
@@ -495,20 +495,71 @@ declare module 'react-native-reanimated' {
   }
 
   export type SensorConfig = {
-    interval: number;
+    interval: number | 'auto';
   };
 
-  export type AnimatedSensor = {
-    sensor: SensorValue3D | SensorValueRotation | null;
+  export type Value3D = {
+    x: number;
+    y: number;
+    z: number;
+  };
+
+  export type SensorValue3D = SharedValue<Value3D>;
+
+  export type ValueRotation = {
+    qw: number;
+    qx: number;
+    qy: number;
+    qz: number;
+    yaw: number;
+    pitch: number;
+    roll: number;
+  };
+
+  export type SensorValueRotation = SharedValue<ValueRotation>;
+
+  export type AnimatedSensor<SensorValueType> = {
+    sensor: SensorValueType;
     unregister: () => void;
     isAvailable: boolean;
     config: SensorConfig;
   };
 
+  export function useAnimatedSensor(
+    sensorType: SensorType.ROTATION,
+    userConfig?: SensorConfig
+  ): AnimatedSensor<SensorValueRotation>;
+  export function useAnimatedSensor(
+    sensorType: Exclude<SensorType, SensorType.ROTATION>,
+    userConfig?: SensorConfig
+  ): AnimatedSensor<SensorValue3D>;
   export function useAnimatedSensor(
     sensorType: SensorType,
     userConfig?: SensorConfig
-  ): AnimatedSensor;
+  ): AnimatedSensor<any>;
+
+  export type FrameCallback = {
+    setActive: (isActive: boolean) => void;
+    isActive: boolean;
+    callbackId: number;
+  };
+  export function useFrameCallback(
+    callback: () => void,
+    autostart?: boolean
+  ): FrameCallback;
+
+  export enum KeyboardState {
+    UNKNOWN = 0,
+    OPENING = 1,
+    OPEN = 2,
+    CLOSING = 3,
+    CLOSED = 4,
+  }
+  export type AnimatedKeyboardInfo = {
+    height: SharedValue<number>;
+    state: SharedValue<KeyboardState>;
+  };
+  export function useAnimatedKeyboard(): AnimatedKeyboardInfo;
 
   export interface ExitAnimationsValues {
     currentOriginX: number;
@@ -650,9 +701,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,15 @@
+import * as Animated from './Animated';
+import webGlobalIsInitialized from './reanimated2/js-reanimated/global';
+if (!webGlobalIsInitialized) {
+  /* 
+    `webGlobalIsInitialized` should always be `true`, 
+    but we need to use `webGlobalIsInitialized` somewhere to ensure function execution, 
+    in another way, the bundler can remove unused variables. 
+  */
+  console.error('[Reanimated] Unable to initialize global objects for web.');
+}
+
+// @ts-ignore backward compatibility with treeshaking
+export * from './reanimated1';
+export * from './reanimated2';
+export default Animated;

package/src/index.web.ts

@@ -0,0 +1,5 @@
+// tree-shaken side effects
+import './reanimated2/js-reanimated/global';
+
+export * from './reanimated2';
+export * as default from './Animated'; // If this line fails, you probably forgot some installation steps. Check out the installation guide here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ 1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) 2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache

package/src/reanimated2/Colors.ts

@@ -23,7 +23,7 @@ interface HSV {
 }
 
 // var INTEGER = '[-+]?\\d+';
-const NUMBER = '[-+]?\\d*\\.?\\d+';
+const NUMBER = '[-+]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)';
 const PERCENTAGE = NUMBER + '%';
 
 function call(...args: unknown[]): string {

package/src/reanimated2/NativeMethods.ts

@@ -45,6 +45,11 @@ export function measure(
   if (result.x === -1234567) {
     throw new Error(`The view with tag ${viewTag} could not be measured`);
   }
+  if (isNaN(result.x)) {
+    console.warn(
+      'Trying to measure a component which gets view-flattened on Android. To disable view-flattening, set `collapsable={false}` on this component.'
+    );
+  }
   return result;
 }
 

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -3,6 +3,7 @@ import {
   SharedValue,
   SensorValue3D,
   SensorValueRotation,
+  AnimatedKeyboardInfo,
 } from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 
@@ -11,7 +12,7 @@ export class NativeReanimated {
   private InnerNativeModule: any;
 
   constructor(native = true) {
-    if (global.__reanimatedModuleProxy === undefined) {
+    if (global.__reanimatedModuleProxy === undefined && native) {
       const { ReanimatedModule } = NativeModules;
       ReanimatedModule?.installTurboModule();
     }
@@ -97,4 +98,12 @@ export class NativeReanimated {
   configureProps(uiProps: string[], nativeProps: string[]): void {
     this.InnerNativeModule.configureProps(uiProps, nativeProps);
   }
+
+  subscribeForKeyboardEvents(keyboardEventData: AnimatedKeyboardInfo): number {
+    return this.InnerNativeModule.subscribeForKeyboardEvents(keyboardEventData);
+  }
+
+  unsubscribeFromKeyboardEvents(listenerId: number): void {
+    this.InnerNativeModule.unsubscribeFromKeyboardEvents(listenerId);
+  }
 }

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/animation/util.ts

@@ -87,7 +87,14 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     animation.startValue = strippedValue;
     animation.toValue = strippedToValue;
     if (previousAnimation && previousAnimation !== animation) {
-      previousAnimation.current = previousAnimation.strippedCurrent;
+      const {
+        prefix: paPrefix,
+        suffix: paSuffix,
+        strippedValue: paStrippedValue,
+      } = recognizePrefixSuffix(previousAnimation.current as string | number);
+      previousAnimation.current = paStrippedValue;
+      previousAnimation.__prefix = paPrefix;
+      previousAnimation.__suffix = paSuffix;
     }
 
     baseOnStart(animation, strippedValue, timestamp, previousAnimation);

package/src/reanimated2/commonTypes.ts

@@ -145,3 +145,18 @@ export type ValueRotation = {
 };
 
 export type SensorValueRotation = SharedValue<ValueRotation>;
+
+export type ShadowNodeWrapper = object;
+
+export enum KeyboardState {
+  UNKNOWN = 0,
+  OPENING = 1,
+  OPEN = 2,
+  CLOSING = 3,
+  CLOSED = 4,
+}
+
+export type AnimatedKeyboardInfo = {
+  height: SharedValue<number>;
+  state: SharedValue<KeyboardState>;
+};

package/src/reanimated2/component/FlatList.tsx

@@ -1,45 +1,52 @@
-import React from 'react';
+import React, { ForwardedRef, forwardRef } 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';
 
 const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
 
+interface AnimatedFlatListProps {
+  onLayout: (event: LayoutChangeEvent) => void;
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children: React.ReactNode;
+}
+
 const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
-  const cellRenderer: React.FC<{
-    onLayout: (event: LayoutChangeEvent) => void;
-  }> = (props) => {
+  const cellRenderer = (props: AnimatedFlatListProps) => {
     return (
-      <WrappedComponents.View
-        layout={itemLayoutAnimation}
-        onLayout={props.onLayout}
-      >
+      <ReanimatedView layout={itemLayoutAnimation} onLayout={props.onLayout}>
         {props.children}
-      </WrappedComponents.View>
+      </ReanimatedView>
     );
   };
 
   return cellRenderer;
 };
 
-export interface ReanimatedFlatlistProps<ItemT> extends FlatListProps<ItemT> {
+export interface ReanimatedFlatListProps<ItemT> extends FlatListProps<ItemT> {
   itemLayoutAnimation?: ILayoutAnimationBuilder;
 }
 
-type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatlistProps<T>>;
-
-const ReanimatedFlatlist: ReanimatedFlatListFC = ({
-  itemLayoutAnimation,
-  ...restProps
-}) => {
-  const cellRenderer = React.useMemo(
-    () => createCellRenderer(itemLayoutAnimation),
-    []
-  );
-  return (
-    <AnimatedFlatList {...restProps} CellRendererComponent={cellRenderer} />
-  );
-};
+type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatListProps<T>>;
+
+const ReanimatedFlatlist: ReanimatedFlatListFC = forwardRef(
+  (props: ReanimatedFlatListProps<any>, ref: ForwardedRef<FlatList>) => {
+    const { itemLayoutAnimation, ...restProps } = props;
+
+    const cellRenderer = React.useMemo(
+      () => createCellRenderer(itemLayoutAnimation),
+      []
+    );
+
+    return (
+      <AnimatedFlatList
+        ref={ref}
+        {...restProps}
+        CellRendererComponent={cellRenderer}
+      />
+    );
+  }
+);
 
 export default ReanimatedFlatlist;

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

@@ -41,14 +41,18 @@ const testWorklet: BasicWorkletFunction<void> = () => {
   'worklet';
 };
 
+const throwUninitializedReanimatedException = () => {
+  throw new Error(
+    "Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ \n1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) \n2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache"
+  );
+};
+
 export const checkPluginState: (throwError: boolean) => boolean = (
   throwError = true
 ) => {
   if (!testWorklet.__workletHash && !shouldBeUseWeb()) {
     if (throwError) {
-      throw new Error(
-        "Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?"
-      );
+      throwUninitializedReanimatedException();
     }
     return false;
   }
@@ -62,11 +66,7 @@ export const isConfigured: (throwError?: boolean) => boolean = (
 };
 
 export const isConfiguredCheck: () => void = () => {
-  if (!isConfigured(true)) {
-    throw new Error(
-      'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation'
-    );
-  }
+  checkPluginState(true);
 };
 
 function pushFrame(frame: (timestamp: Timestamp) => void): void {
@@ -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/frameCallback/FrameCallbackRegistryJS.ts

@@ -0,0 +1,43 @@
+import { runOnUI } from '../core';
+import { prepareUIRegistry } from './FrameCallbackRegistryUI';
+
+export default class FrameCallbackRegistryJS {
+  private nextCallbackId = 0;
+
+  constructor() {
+    prepareUIRegistry();
+  }
+
+  registerFrameCallback(callback: () => void): number {
+    if (!callback) {
+      return -1;
+    }
+
+    const callbackId = this.nextCallbackId;
+    this.nextCallbackId++;
+
+    runOnUI(() => {
+      'worklet';
+      global._frameCallbackRegistry.registerFrameCallback(callback, callbackId);
+    })();
+
+    return callbackId;
+  }
+
+  unregisterFrameCallback(frameCallbackId: number): void {
+    runOnUI(() => {
+      'worklet';
+      global._frameCallbackRegistry.unregisterFrameCallback(frameCallbackId);
+    })();
+  }
+
+  manageStateFrameCallback(frameCallbackId: number, state: boolean): void {
+    runOnUI(() => {
+      'worklet';
+      global._frameCallbackRegistry.manageStateFrameCallback(
+        frameCallbackId,
+        state
+      );
+    })();
+  }
+}