react-native-reanimated 2.4.1 → 2.7.0

package/lib/types/lib/setAndForwardRef.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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
+ * its implementation.
+ *
+ * Its main use case is in wrappers for native components.
+ *
+ * Usage:
+ *
+ *   class MyView extends React.Component {
+ *     _nativeRef = null;
+ *
+ *     _setNativeRef = setAndForwardRef({
+ *       getForwardedRef: () => this.props.forwardedRef,
+ *       setLocalRef: ref => {
+ *         this._nativeRef = ref;
+ *       },
+ *     });
+ *
+ *     render() {
+ *       return <View ref={this._setNativeRef} />;
+ *     }
+ *   }
+ *
+ *   const MyViewWithRef = React.forwardRef((props, ref) => (
+ *     <MyView {...props} forwardedRef={ref} />
+ *   ));
+ *
+ *   module.exports = MyViewWithRef;
+ */
+export declare type ForwardedRef<T> = () => MutableRefObject<T> | ((ref: T) => void);
+declare function setAndForwardRef<T>({ getForwardedRef, setLocalRef, }: {
+    getForwardedRef: ForwardedRef<T>;
+    setLocalRef: (ref: T) => void;
+}): (ref: T) => void;
+export default setAndForwardRef;

package/lib/types/react-native-reanimated-tests.d.ts

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

package/mock.js

@@ -28,7 +28,7 @@ function simulateCallbackFactory(...params) {
     callback &&
       setTimeout(() => {
         // user defined callback
-        // eslint-disable-next-line standard/no-callback-literal
+        // eslint-disable-next-line node/no-callback-literal
         callback(...params);
       }, 0);
   };
@@ -73,9 +73,9 @@ function createMockComponent(name) {
 
 function createTransitioningComponent(Component) {
   return class extends React.Component {
-    static displayName = `Transitioning.${Component.displayName ||
-      Component.name ||
-      'Component'}`;
+    static displayName = `Transitioning.${
+      Component.displayName || Component.name || 'Component'
+    }`;
 
     setNativeProps() {
       // noop

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.4.1",
+  "version": "2.7.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -18,14 +18,21 @@
     "format:common": "find Common/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
     "release": "npm login && release-it",
     "type:check": "yarn tsc --noEmit",
-    "type:generate": "yarn type:generate:clean && yarn type:generate:cp-js-src && yarn type:generate:tsc && yarn type:generate:remove.ts && yarn type:generate:remove.tsx",
+    "type:generate": "yarn type:generate:clean && yarn type:generate:cp-js-src && yarn type:generate:tsc && yarn type:generate:tsc:declaration && yarn type:generate:remove.ts && yarn type:generate:remove.tsx && yarn type:generate:remove.js:from-src",
     "type:generate:clean": "rm -rf lib/ && mkdir lib/",
     "type:generate:cp-js-src": "cp -RL src/* lib/",
     "type:generate:tsc": "yarn tsc",
+    "type:generate:tsc:declaration": "yarn tsc --project tsconfig.json --pretty --declaration --emitDeclarationOnly --outDir lib/types",
     "type:generate:remove.ts": "find ./lib -type f -name \"*.ts\" -and -not -name \"*.d.ts\" -delete",
     "type:generate:remove.tsx": "find ./lib -type f -name \"*.tsx\" -and -not -name \"*.d.ts\" -delete",
+    "type:generate:remove.js:from-src": "find ./src/reanimated2 -type f -name \"*.js\" -delete",
     "prepare": "husky install",
-    "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular ./src"
+    "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular ./src",
+    "setup": "yarn && cd Example && yarn && cd ios && pod install --verbose && cd ../..",
+    "clean": "rm -rf node_modules && cd Example && rm -rf node_modules && cd ios && pod deintegrate && cd ../..",
+    "reset": "yarn clean && yarn setup",
+    "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",
@@ -36,7 +43,6 @@
     "Common/",
     "src/",
     "lib/",
-    "libSo/",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
     "android/build.gradle",
@@ -49,7 +55,6 @@
     "react-native-reanimated.d.ts",
     "mock.js",
     "plugin.js",
-    "expo-module.config.json",
     "!__snapshots__",
     "!*.test.js",
     "!*.test.js.map"
@@ -69,56 +74,55 @@
   },
   "homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
   "dependencies": {
-    "@babel/plugin-transform-object-assign": "^7.10.4",
+    "@babel/plugin-transform-object-assign": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@types/invariant": "^2.2.35",
     "invariant": "^2.2.4",
     "lodash.isequal": "^4.5.0",
-    "mockdate": "^3.0.2",
-    "react-native-screens": "^3.4.0",
+    "setimmediate": "^1.0.5",
     "string-hash-64": "^1.0.3"
   },
   "peerDependencies": {
+    "@babel/core": "^7.0.0-0",
     "react": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": "*"
+    "react-native": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/preset-typescript": "^7.7.4",
-    "@react-native-community/bob": "^0.14.3",
+    "@babel/core": "^7.17.2",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@react-native-community/bob": "^0.17.1",
     "@react-native-community/eslint-config": "^0.0.5",
-    "@testing-library/jest-native": "^3.4.3",
+    "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^5.0.3",
     "@testing-library/react-native": "^7.1.0",
-    "@types/babel-types": "^7.0.9",
-    "@types/babel__core": "^7.1.12",
-    "@types/babel__generator": "^7.6.2",
-    "@types/babel__traverse": "^7.0.15",
-    "@types/jest": "^26.0.15",
-    "@types/react-native": "^0.65.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^26.6.3",
+    "@types/babel-types": "^7.0.11",
+    "@types/babel__core": "^7.1.18",
+    "@types/babel__generator": "^7.6.4",
+    "@types/babel__traverse": "^7.14.2",
+    "@types/jest": "^27.4.0",
+    "@types/react-native": "^0.66.15",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.5.1",
     "babel-plugin-module-resolver": "^4.1.0",
-    "clang-format": "^1.5.0",
-    "eslint": "^7.31.0",
-    "eslint-config-prettier": "^6.4.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-import-resolver-babel-module": "^5.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "husky": "^7.0.0",
-    "jest": "^26.6.3",
+    "clang-format": "^1.6.0",
+    "eslint": "^8.8.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
     "lint-staged": "^11.2.0",
     "madge": "^5.0.1",
-    "prettier": "^2.2.1",
+    "prettier": "^2.5.1",
     "react": "17.0.2",
-    "react-native": "0.67.2",
+    "react-native": "0.68.0",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "17.0.2",

package/plugin.js

@@ -30,7 +30,9 @@ const objectHooks = new Set([
 const globals = new Set([
   'this',
   'console',
+  'performance',
   '_setGlobalConsole',
+  '_chronoNow',
   'Date',
   'Array',
   'ArrayBuffer',
@@ -85,6 +87,7 @@ const blacklistedFunctions = new Set([
   'toString',
   'map',
   'filter',
+  'findIndex',
   'forEach',
   'valueOf',
   'toPrecision',
@@ -508,18 +511,6 @@ function makeWorklet(t, fun, fileName) {
     );
   }
 
-  statements.push(
-    t.expressionStatement(
-      t.callExpression(
-        t.memberExpression(
-          t.identifier('global'),
-          t.identifier('__reanimatedWorkletInit'),
-          false
-        ),
-        [privateFunctionId]
-      )
-    )
-  );
   statements.push(t.returnStatement(privateFunctionId));
 
   const newFun = t.functionExpression(fun.id, [], t.blockStatement(statements));

package/react-native-reanimated.d.ts

@@ -7,8 +7,6 @@ declare module 'react-native-reanimated' {
     ReactNode,
     Component,
     RefObject,
-    ComponentType,
-    ComponentProps,
     FunctionComponent,
   } from 'react';
   import {
@@ -31,7 +29,6 @@ declare module 'react-native-reanimated' {
     NativeScrollEvent,
     NativeSyntheticEvent,
     ColorValue,
-    OpaqueColorValue,
     EasingFunction,
   } from 'react-native';
   import {
@@ -39,16 +36,24 @@ declare module 'react-native-reanimated' {
     PanGestureHandlerGestureEvent,
   } from 'react-native-gesture-handler';
 
-  export {
-    Animation,
-    TimingAnimation,
-    SpringAnimation,
-    DecayAnimation,
-    DelayAnimation,
-    RepeatAnimation,
-    SequenceAnimation,
-    StyleLayoutAnimation,
-  } from './src/reanimated2/animation/index';
+  import('./lib/reanimated2/globals');
+
+  export type TimingAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').TimingAnimation;
+  export type SpringAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').SpringAnimation;
+  export type DecayAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').DecayAnimation;
+  export type DelayAnimation =
+    import('./lib/types/lib/reanimated2/animation/commonTypes').DelayAnimation;
+  export type RepeatAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').RepeatAnimation;
+  export type SequenceAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').SequenceAnimation;
+  export type StyleLayoutAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').StyleLayoutAnimation;
+  export type Animation<T> =
+    import('./lib/types/lib/reanimated2/commonTypes').Animation<T>;
 
   namespace Animated {
     type Nullable<T> = T | null | undefined;
@@ -150,7 +155,7 @@ declare module 'react-native-reanimated' {
       ? T['style']
       : Record<string, unknown>;
 
-    export type AnimateProps<P extends Record<string, unknown>> = {
+    export type AnimateProps<P extends object> = {
       [K in keyof P]: P[K] | AnimatedNode<P[K]>;
     } & {
       style?: StyleProp<AnimateStyle<StylesOrDefault<P>>>;
@@ -394,16 +399,16 @@ declare module 'react-native-reanimated' {
       value: Adaptable<number>,
       config: InterpolationConfig
     ): AnimatedNode<number>;
-    export function interpolateColors(
+    export function interpolateColors<T extends string | number>(
       animationValue: Adaptable<number>,
       {
         inputRange,
         outputColorRange,
       }: {
         inputRange: ReadonlyArray<Adaptable<number>>;
-        outputColorRange: ReadonlyArray<Adaptable<number | string>>;
+        outputColorRange: ReadonlyArray<Adaptable<T>>;
       }
-    ): AnimatedNode<number | string>;
+    ): AnimatedNode<T>;
     export const max: BinaryOperator;
     export const min: BinaryOperator;
 
@@ -481,6 +486,23 @@ declare module 'react-native-reanimated' {
     targetGlobalOriginY: number;
   }
 
+  export enum SensorType {
+    ACCELEROMETER = 1,
+    GYROSCOPE = 2,
+    GRAVITY = 3,
+    MAGNETIC_FIELD = 4,
+    ROTATION = 5,
+  }
+
+  export type SensorConfig = {
+    interval: number;
+  };
+
+  export function useAnimatedSensor(
+    sensorType: SensorType,
+    userConfig?: SensorConfig
+  );
+
   export interface ExitAnimationsValues {
     currentOriginX: number;
     currentOriginY: number;
@@ -557,9 +579,10 @@ declare module 'react-native-reanimated' {
     finished?: boolean,
     current?: AnimatableValue
   ) => void;
+  export type EasingFunctionFactory = { factory: () => EasingFunction };
   export interface WithTimingConfig {
     duration?: number;
-    easing?: EasingFunction;
+    easing?: EasingFunction | EasingFunctionFactory;
   }
   export interface WithDecayConfig {
     deceleration?: number;
@@ -576,29 +599,29 @@ declare module 'react-native-reanimated' {
     restDisplacementThreshold?: number;
     velocity?: number;
   }
-  export function withTiming(
-    toValue: AnimatableValue,
+  export function withTiming<T extends AnimatableValue>(
+    toValue: T,
     userConfig?: WithTimingConfig,
     callback?: AnimationCallback
-  ): number;
-  export function withSpring(
-    toValue: AnimatableValue,
+  ): T;
+  export function withSpring<T extends AnimatableValue>(
+    toValue: T,
     userConfig?: WithSpringConfig,
     callback?: AnimationCallback
-  ): number;
+  ): T;
   export function withDecay(
     userConfig: WithDecayConfig,
     callback?: AnimationCallback
   ): number;
   export function cancelAnimation<T>(sharedValue: SharedValue<T>): void;
-  export function withDelay(delayMS: number, delayedAnimation: number): number;
-  export function withRepeat(
-    animation: number,
+  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
-  ): number;
-  export function withSequence(...animations: [number, ...number[]]): number;
+  ): T;
+  export function withSequence<T extends AnimatableValue>(...animations: [T, ...T[]]): T;
 
   // reanimated2 functions
   export function runOnUI<A extends any[], R>(
@@ -619,12 +642,12 @@ declare module 'react-native-reanimated' {
     fn: (...args: A) => R
   ): (...args: Parameters<typeof fn>) => R;
 
-  export function interpolateColor(
+  export function interpolateColor<T extends string | number>(
     value: number,
     inputRange: readonly number[],
-    outputRange: readonly (string | number)[],
+    outputRange: readonly T[],
     colorSpace?: 'RGB' | 'HSV'
-  ): string | number;
+  ): T;
 
   export enum ColorSpace {
     RGB = 0,
@@ -829,6 +852,9 @@ declare module 'react-native-reanimated' {
       callback: (finished: boolean) => void
     ): ComplexAnimationBuilder;
 
+    static withInitialValues(values: StyleProps): BaseAnimationBuilder;
+    withInitialValues(values: StyleProps): BaseAnimationBuilder;
+
     static easing(easingFunction: EasingFunction): ComplexAnimationBuilder;
     easing(easingFunction: EasingFunction): ComplexAnimationBuilder;
     static springify(): ComplexAnimationBuilder;

package/src/ConfigHelper.ts

@@ -1,4 +1,4 @@
-import ReanimatedModule from './ReanimatedModule';
+import { configureProps as jsiConfigureProps } from './reanimated2/core';
 
 /**
  * Styles allowed to be direcly updated in UI thread
@@ -78,7 +78,6 @@ let NATIVE_THREAD_PROPS_WHITELIST: Record<string, boolean> = {
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
   borderTopStartRadius: true,
-  opacity: true,
   elevation: true,
   fontSize: true,
   lineHeight: true,
@@ -107,9 +106,9 @@ let NATIVE_THREAD_PROPS_WHITELIST: Record<string, boolean> = {
 };
 
 function configureProps(): void {
-  ReanimatedModule.configureProps(
-    Object.keys(NATIVE_THREAD_PROPS_WHITELIST),
-    Object.keys(UI_THREAD_PROPS_WHITELIST)
+  jsiConfigureProps(
+    Object.keys(UI_THREAD_PROPS_WHITELIST),
+    Object.keys(NATIVE_THREAD_PROPS_WHITELIST)
   );
 }
 

package/src/createAnimatedComponent.tsx

@@ -161,7 +161,7 @@ interface ComponentRef extends Component {
   getScrollableNode?: () => ComponentRef;
 }
 
-interface InitialComponentProps extends Record<string, unknown> {
+export interface InitialComponentProps extends Record<string, unknown> {
   ref?: Ref<Component>;
   collapsable?: boolean;
 }
@@ -194,6 +194,7 @@ export default function createAnimatedComponent(
     _viewTag = -1;
     _isFirstRender = true;
     animatedStyle: { value: StyleProps } = { value: {} };
+    initialStyle = {};
     sv: SharedValue<null | Record<string, unknown>> | null;
     _propsAnimated?: PropsAnimated;
     _component: ComponentRef | null = null;
@@ -606,13 +607,12 @@ export default function createAnimatedComponent(
               // this is how we recognize styles returned by useAnimatedStyle
               style.viewsRef.add(this);
               if (this._isFirstRender) {
-                return {
+                this.initialStyle = {
                   ...style.initial.value,
                   ...initialUpdaterRun<StyleProps>(style.initial.updater),
                 };
-              } else {
-                return style.initial.value;
               }
+              return this.initialStyle;
             } else {
               return style;
             }

package/src/reanimated1/core/AnimatedFunction.js

@@ -37,7 +37,7 @@ export function createAnimatedFunction(cb) {
   for (let i = 0; i < params.length; i++) {
     params[i] = createAnimatedParam();
   }
-  // eslint-disable-next-line standard/no-callback-literal
+  // eslint-disable-next-line node/no-callback-literal
   const what = cb(...params);
   const func = new AnimatedFunction(what, ...params);
   return (...args) => {

package/src/reanimated1/derived/interpolate.js

@@ -128,15 +128,13 @@ export default function interpolate(value, config) {
   const right = extrapolateRight || extrapolate;
   let output = interpolateInternal(value, inputRange, outputRange);
 
-  if (left === Extrapolate.EXTEND) {
-  } else if (left === Extrapolate.CLAMP) {
+  if (left === Extrapolate.CLAMP) {
     output = cond(lessThan(value, inputRange[0]), outputRange[0], output);
   } else if (left === Extrapolate.IDENTITY) {
     output = cond(lessThan(value, inputRange[0]), value, output);
   }
 
-  if (right === Extrapolate.EXTEND) {
-  } else if (right === Extrapolate.CLAMP) {
+  if (right === Extrapolate.CLAMP) {
     output = cond(
       greaterThan(value, inputRange[inputRange.length - 1]),
       outputRange[outputRange.length - 1],

package/src/reanimated2/Colors.ts

@@ -64,7 +64,8 @@ function getMatchers(): Matchers {
       'hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)
     );
     cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-    cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+    cachedMatchers.hex4 =
+      /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
     cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
     cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
   }

package/src/reanimated2/Easing.ts

@@ -109,7 +109,10 @@ function cubic(t: number): number {
  */
 function poly(n: number): EasingFn {
   'worklet';
-  return (t) => Math.pow(t, n);
+  return (t) => {
+    'worklet';
+    return Math.pow(t, n);
+  };
 }
 
 /**
@@ -171,7 +174,10 @@ function elastic(bounciness = 1): EasingFn {
  */
 function back(s = 1.70158): (t: number) => number {
   'worklet';
-  return (t) => t * t * ((s + 1) * t - s);
+  return (t) => {
+    'worklet';
+    return t * t * ((s + 1) * t - s);
+  };
 }
 
 /**
@@ -312,7 +318,7 @@ function createChecker(
     }
     // @ts-ignore this is implicitly any - TODO
     const res = worklet.apply(this, arguments);
-    if (!_WORKLET && res && typeof res === 'function' && res.__worklet) {
+    if (!_WORKLET && res && typeof res === 'function' && res.__workletHash) {
       return createChecker(res, workletName, arguments);
     }
     return res;

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -1,31 +1,54 @@
-import { SharedValue } from '../commonTypes';
+import { NativeModules } from 'react-native';
+import {
+  SharedValue,
+  SensorValue3D,
+  SensorValueRotation,
+} from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 
-const InnerNativeModule = global.__reanimatedModuleProxy;
-
 export class NativeReanimated {
   native: boolean;
-  useOnlyV1: boolean;
+  private InnerNativeModule: any;
 
   constructor(native = true) {
+    if (global.__reanimatedModuleProxy === undefined) {
+      const { ReanimatedModule } = NativeModules;
+      ReanimatedModule?.installTurboModule();
+    }
+    this.InnerNativeModule = global.__reanimatedModuleProxy;
     this.native = native;
-    this.useOnlyV1 = InnerNativeModule === null;
   }
 
   installCoreFunctions(valueSetter: <T>(value: T) => void): void {
-    return InnerNativeModule.installCoreFunctions(valueSetter);
+    return this.InnerNativeModule.installCoreFunctions(valueSetter);
   }
 
   makeShareable<T>(value: T): T {
-    return InnerNativeModule.makeShareable(value);
+    return this.InnerNativeModule.makeShareable(value);
   }
 
   makeMutable<T>(value: T): SharedValue<T> {
-    return InnerNativeModule.makeMutable(value);
+    return this.InnerNativeModule.makeMutable(value);
   }
 
   makeRemote<T>(object = {}): T {
-    return InnerNativeModule.makeRemote(object);
+    return this.InnerNativeModule.makeRemote(object);
+  }
+
+  registerSensor(
+    sensorType: number,
+    interval: number,
+    sensorData: SensorValue3D | SensorValueRotation
+  ) {
+    return this.InnerNativeModule.registerSensor(
+      sensorType,
+      interval,
+      sensorData
+    );
+  }
+
+  unregisterSensor(sensorId: number) {
+    return this.InnerNativeModule.unregisterSensor(sensorId);
   }
 
   startMapper(
@@ -35,7 +58,7 @@ export class NativeReanimated {
     updater: () => void,
     viewDescriptors: Descriptor[] | SharedValue<Descriptor[]>
   ): number {
-    return InnerNativeModule.startMapper(
+    return this.InnerNativeModule.startMapper(
       mapper,
       inputs,
       outputs,
@@ -45,18 +68,18 @@ export class NativeReanimated {
   }
 
   stopMapper(mapperId: number): void {
-    return InnerNativeModule.stopMapper(mapperId);
+    return this.InnerNativeModule.stopMapper(mapperId);
   }
 
   registerEventHandler<T>(
     eventHash: string,
     eventHandler: (event: T) => void
   ): string {
-    return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+    return this.InnerNativeModule.registerEventHandler(eventHash, eventHandler);
   }
 
   unregisterEventHandler(id: string): void {
-    return InnerNativeModule.unregisterEventHandler(id);
+    return this.InnerNativeModule.unregisterEventHandler(id);
   }
 
   getViewProp<T>(
@@ -64,10 +87,14 @@ export class NativeReanimated {
     propName: string,
     callback?: (result: T) => void
   ): Promise<T> {
-    return InnerNativeModule.getViewProp(viewTag, propName, callback);
+    return this.InnerNativeModule.getViewProp(viewTag, propName, callback);
   }
 
   enableLayoutAnimations(flag: boolean): void {
-    InnerNativeModule.enableLayoutAnimations(flag);
+    this.InnerNativeModule.enableLayoutAnimations(flag);
+  }
+
+  configureProps(uiProps: string[], nativeProps: string[]): void {
+    this.InnerNativeModule.configureProps(uiProps, nativeProps);
   }
 }