react-native-reanimated 3.0.0-rc.9 → 3.0.0

package/src/reanimated2/hook/useAnimatedSensor.ts

@@ -1,17 +1,17 @@
 import { useEffect, useRef } from 'react';
 import { makeMutable, registerSensor, unregisterSensor } from '../core';
-import { SharedValue, Value3D, ValueRotation } from '../commonTypes';
-
-export enum SensorType {
-  ACCELEROMETER = 1,
-  GYROSCOPE = 2,
-  GRAVITY = 3,
-  MAGNETIC_FIELD = 4,
-  ROTATION = 5,
-}
+import {
+  SensorType,
+  SharedValue,
+  Value3D,
+  ValueRotation,
+  IOSReferenceFrame,
+} from '../commonTypes';
 
 export type SensorConfig = {
   interval: number | 'auto';
+  adjustToInterfaceOrientation: boolean;
+  iosReferenceFrame: IOSReferenceFrame;
 };
 
 export type AnimatedSensor = {
@@ -33,19 +33,81 @@ function initSensorData(
       yaw: 0,
       pitch: 0,
       roll: 0,
+      interfaceOrientation: 0,
     });
   } else {
     return makeMutable<Value3D | ValueRotation>({
       x: 0,
       y: 0,
       z: 0,
+      interfaceOrientation: 0,
     });
   }
 }
 
+// euler angles are in order ZXY, z = yaw, x = pitch, y = roll
+// https://github.com/mrdoob/three.js/blob/dev/src/math/Quaternion.js#L237
+function eulerToQuaternion(pitch: number, roll: number, yaw: number) {
+  'worklet';
+  const c1 = Math.cos(pitch / 2);
+  const s1 = Math.sin(pitch / 2);
+  const c2 = Math.cos(roll / 2);
+  const s2 = Math.sin(roll / 2);
+  const c3 = Math.cos(yaw / 2);
+  const s3 = Math.sin(yaw / 2);
+
+  return [
+    s1 * c2 * c3 - c1 * s2 * s3,
+    c1 * s2 * c3 + s1 * c2 * s3,
+    c1 * c2 * s3 + s1 * s2 * c3,
+    c1 * c2 * c3 - s1 * s2 * s3,
+  ];
+}
+
+function adjustRotationToInterfaceOrientation(data: ValueRotation) {
+  'worklet';
+  const { interfaceOrientation, pitch, roll, yaw } = data;
+  if (interfaceOrientation === 90) {
+    data.pitch = roll;
+    data.roll = -pitch;
+    data.yaw = yaw - Math.PI / 2;
+  } else if (interfaceOrientation === 270) {
+    data.pitch = -roll;
+    data.roll = pitch;
+    data.yaw = yaw + Math.PI / 2;
+  } else if (interfaceOrientation === 180) {
+    data.pitch *= -1;
+    data.roll *= -1;
+    data.yaw *= -1;
+  }
+
+  const q = eulerToQuaternion(data.pitch, data.roll, data.yaw);
+  data.qx = q[0];
+  data.qy = q[1];
+  data.qz = q[2];
+  data.qw = q[3];
+  return data;
+}
+
+function adjustVectorToInterfaceOrientation(data: Value3D) {
+  'worklet';
+  const { interfaceOrientation, x, y } = data;
+  if (interfaceOrientation === 90) {
+    data.x = -y;
+    data.y = x;
+  } else if (interfaceOrientation === 270) {
+    data.x = y;
+    data.y = -x;
+  } else if (interfaceOrientation === 180) {
+    data.x *= -1;
+    data.y *= -1;
+  }
+  return data;
+}
+
 export function useAnimatedSensor(
   sensorType: SensorType,
-  userConfig?: SensorConfig
+  userConfig?: Partial<SensorConfig>
 ): AnimatedSensor {
   const ref = useRef<AnimatedSensor>({
     sensor: initSensorData(sensorType),
@@ -55,17 +117,32 @@ export function useAnimatedSensor(
     isAvailable: false,
     config: {
       interval: 0,
+      adjustToInterfaceOrientation: true,
+      iosReferenceFrame: IOSReferenceFrame.Auto,
     },
   });
 
   useEffect(() => {
-    ref.current.config = { interval: 'auto', ...userConfig };
+    ref.current.config = {
+      interval: 'auto',
+      adjustToInterfaceOrientation: true,
+      iosReferenceFrame: IOSReferenceFrame.Auto,
+      ...userConfig,
+    };
     const sensorData = ref.current.sensor!;
     const id = registerSensor(
       sensorType,
       ref.current.config.interval === 'auto' ? -1 : ref.current.config.interval,
+      ref.current.config.iosReferenceFrame,
       (data) => {
         'worklet';
+        if (ref.current.config.adjustToInterfaceOrientation) {
+          if (sensorType === SensorType.ROTATION) {
+            data = adjustRotationToInterfaceOrientation(data as ValueRotation);
+          } else {
+            data = adjustVectorToInterfaceOrientation(data as Value3D);
+          }
+        }
         sensorData.value = data;
       }
     );

package/src/reanimated2/hook/useAnimatedStyle.ts

@@ -1,16 +1,14 @@
-/* global _frameTimestamp */
 import { MutableRefObject, useEffect, useRef } from 'react';
 
-import { startMapper, stopMapper, makeRemote, getTimestamp } from '../core';
+import { startMapper, stopMapper, makeRemote } from '../core';
 import updateProps, { updatePropsJestWrapper } from '../UpdateProps';
 import { initialUpdaterRun } from '../animation';
 import NativeReanimatedModule from '../NativeReanimated';
 import { useSharedValue } from './useSharedValue';
 import {
   buildWorkletsHash,
-  getStyleWithoutAnimations,
   isAnimated,
-  styleDiff,
+  shallowEqual,
   validateAnimatedStyles,
 } from './utils';
 import { DependencyList, Descriptor } from './commonTypes';
@@ -20,7 +18,7 @@ import {
   ViewDescriptorsSet,
   ViewRefSet,
 } from '../ViewDescriptorsSet';
-import { isJest } from '../PlatformChecker';
+import { isJest, shouldBeUseWeb } from '../PlatformChecker';
 import {
   AnimationObject,
   Timestamp,
@@ -30,6 +28,7 @@ import {
   BasicWorkletFunctionOptional,
   NestedObjectValues,
   SharedValue,
+  StyleProps,
 } from '../commonTypes';
 export interface AnimatedStyleResult {
   viewDescriptors: ViewDescriptorsSet;
@@ -55,6 +54,7 @@ interface AnimationRef {
 }
 
 function prepareAnimation(
+  frameTimestamp: number,
   animatedProp: AnimatedStyle,
   lastAnimation: AnimatedStyle,
   lastValue: AnimatedStyle
@@ -63,6 +63,7 @@ function prepareAnimation(
   if (Array.isArray(animatedProp)) {
     animatedProp.forEach((prop, index) => {
       prepareAnimation(
+        frameTimestamp,
         prop,
         lastAnimation && lastAnimation[index],
         lastValue && lastValue[index]
@@ -97,12 +98,13 @@ function prepareAnimation(
     animation.callStart = (timestamp: Timestamp) => {
       animation.onStart(animation, value, timestamp, lastAnimation);
     };
-    animation.callStart(getTimestamp());
+    animation.callStart(frameTimestamp);
     animation.callStart = null;
   } else if (typeof animatedProp === 'object') {
     // it is an object
     Object.keys(animatedProp).forEach((key) =>
       prepareAnimation(
+        frameTimestamp,
         animatedProp[key],
         lastAnimation && lastAnimation[key],
         lastValue && lastValue[key]
@@ -183,23 +185,28 @@ function styleUpdater(
   const animations = state.animations ?? {};
   const newValues = updater() ?? {};
   const oldValues = state.last;
+  const nonAnimatedNewValues: StyleProps = {};
 
   let hasAnimations = false;
+  let frameTimestamp: number | undefined;
+  let hasNonAnimatedValues = false;
   for (const key in newValues) {
     const value = newValues[key];
     if (isAnimated(value)) {
-      prepareAnimation(value, animations[key], oldValues[key]);
+      frameTimestamp = global.__frameTimestamp || performance.now();
+      prepareAnimation(frameTimestamp, value, animations[key], oldValues[key]);
       animations[key] = value;
       hasAnimations = true;
     } else {
+      hasNonAnimatedValues = true;
+      nonAnimatedNewValues[key] = value;
       delete animations[key];
     }
   }
 
   if (hasAnimations) {
-    const frame = (_timestamp?: Timestamp) => {
+    const frame = (timestamp: Timestamp) => {
       const { animations, last, isAnimationCancelled } = state;
-      const timestamp = _timestamp ?? getTimestamp();
       if (isAnimationCancelled) {
         state.isAnimationRunning = false;
         return;
@@ -238,27 +245,21 @@ function styleUpdater(
     if (!state.isAnimationRunning) {
       state.isAnimationCancelled = false;
       state.isAnimationRunning = true;
-      if (_frameTimestamp) {
-        frame(_frameTimestamp);
-      } else {
-        requestAnimationFrame(frame);
-      }
+      frame(frameTimestamp!);
     }
-    state.last = Object.assign({}, oldValues, newValues);
-    const style = getStyleWithoutAnimations(state.last);
-    if (style) {
-      updateProps(viewDescriptors, style, maybeViewRef);
+
+    if (hasNonAnimatedValues) {
+      updateProps(viewDescriptors, nonAnimatedNewValues, maybeViewRef);
     }
   } else {
     state.isAnimationCancelled = true;
     state.animations = [];
 
-    const diff = styleDiff(oldValues, newValues);
-    state.last = Object.assign({}, oldValues, newValues);
-    if (diff) {
+    if (!shallowEqual(oldValues, newValues)) {
       updateProps(viewDescriptors, newValues, maybeViewRef);
     }
   }
+  state.last = newValues;
 }
 
 function jestStyleUpdater(
@@ -277,6 +278,7 @@ function jestStyleUpdater(
 
   // extract animated props
   let hasAnimations = false;
+  let frameTimestamp: number | undefined;
   Object.keys(animations).forEach((key) => {
     const value = newValues[key];
     if (!isAnimated(value)) {
@@ -286,15 +288,15 @@ function jestStyleUpdater(
   Object.keys(newValues).forEach((key) => {
     const value = newValues[key];
     if (isAnimated(value)) {
-      prepareAnimation(value, animations[key], oldValues[key]);
+      frameTimestamp = global.__frameTimestamp || performance.now();
+      prepareAnimation(frameTimestamp, value, animations[key], oldValues[key]);
       animations[key] = value;
       hasAnimations = true;
     }
   });
 
-  function frame(_timestamp?: Timestamp) {
+  function frame(timestamp: Timestamp) {
     const { animations, last, isAnimationCancelled } = state;
-    const timestamp = _timestamp ?? getTimestamp();
     if (isAnimationCancelled) {
       state.isAnimationRunning = false;
       return;
@@ -340,11 +342,7 @@ function jestStyleUpdater(
     if (!state.isAnimationRunning) {
       state.isAnimationCancelled = false;
       state.isAnimationRunning = true;
-      if (_frameTimestamp) {
-        frame(_frameTimestamp);
-      } else {
-        requestAnimationFrame(frame);
-      }
+      frame(frameTimestamp!);
     }
   } else {
     state.isAnimationCancelled = true;
@@ -352,13 +350,12 @@ function jestStyleUpdater(
   }
 
   // calculate diff
-  const diff = styleDiff(oldValues, newValues);
-  state.last = Object.assign({}, oldValues, newValues);
+  state.last = newValues;
 
-  if (Object.keys(diff).length !== 0) {
+  if (!shallowEqual(oldValues, newValues)) {
     updatePropsJestWrapper(
       viewDescriptors,
-      diff,
+      newValues,
       maybeViewRef,
       animatedStyle,
       adapters
@@ -400,7 +397,20 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
 ): AnimatedStyleResult {
   const viewsRef: ViewRefSet<any> = makeViewsRefSet();
   const initRef = useRef<AnimationRef>();
-  const inputs = Object.values(updater._closure ?? {});
+  let inputs = Object.values(updater._closure ?? {});
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+    if (__DEV__ && !inputs.length && !dependencies && !updater.__workletHash) {
+      throw new Error(
+        `useAnimatedStyle was used without a dependency array or Babel plugin. Please explicitly pass a dependency array, or enable the Babel/SWC plugin.
+
+For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support#web-without-a-babel-plugin`
+      );
+    }
+  }
   const adaptersArray: AdapterWorkletFunction[] = adapters
     ? Array.isArray(adapters)
       ? adapters
@@ -493,8 +503,6 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
   useEffect(() => {
     animationsActive.value = true;
     return () => {
-      // initRef.current = null;
-      // viewsRef = null;
       animationsActive.value = false;
     };
   }, []);

package/src/reanimated2/hook/useDerivedValue.ts

@@ -3,6 +3,7 @@ import { initialUpdaterRun } from '../animation';
 import { BasicWorkletFunction, SharedValue } from '../commonTypes';
 import { makeMutable, startMapper, stopMapper } from '../core';
 import { DependencyList } from './commonTypes';
+import { shouldBeUseWeb } from '../PlatformChecker';
 
 export type DerivedValue<T> = Readonly<SharedValue<T>>;
 
@@ -11,7 +12,13 @@ export function useDerivedValue<T>(
   dependencies: DependencyList
 ): DerivedValue<T> {
   const initRef = useRef<SharedValue<T> | null>(null);
-  const inputs = Object.values(processor._closure ?? {});
+  let inputs = Object.values(processor._closure ?? {});
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+  }
 
   // build dependencies
   if (dependencies === undefined) {

package/src/reanimated2/hook/useScrollViewOffset.ts

@@ -7,7 +7,7 @@ import { findNodeHandle } from 'react-native';
 import { useEvent } from './utils';
 import { useSharedValue } from './useSharedValue';
 
-const subscribeForEvents = [
+const scrollEventNames = [
   'onScroll',
   'onScrollBeginDrag',
   'onScrollEndDrag',
@@ -26,7 +26,7 @@ export function useScrollViewOffset(
       event.contentOffset.x === 0
         ? event.contentOffset.y
         : event.contentOffset.x;
-  }, subscribeForEvents);
+  }, scrollEventNames);
 
   useEffect(() => {
     const viewTag = findNodeHandle(aref.current);

package/src/reanimated2/hook/utils.ts

@@ -5,7 +5,6 @@ import {
   Context,
   NativeEvent,
   NestedObjectValues,
-  StyleProps,
   WorkletFunction,
   AnimationObject,
 } from '../commonTypes';
@@ -164,78 +163,33 @@ export function parseColors(updates: AnimatedStyle): void {
   }
 }
 
-export function canApplyOptimalisation(upadterFn: WorkletFunction): number {
-  const FUNCTIONLESS_FLAG = 0b00000001;
-  const STATEMENTLESS_FLAG = 0b00000010;
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const optimalization = upadterFn.__optimalization!;
-  return (
-    optimalization & FUNCTIONLESS_FLAG && optimalization & STATEMENTLESS_FLAG
-  );
-}
-
 export function isAnimated(prop: NestedObjectValues<AnimationObject>): boolean {
   'worklet';
-  const propsToCheck: NestedObjectValues<AnimationObject>[] = [prop];
-  while (propsToCheck.length > 0) {
-    const currentProp: NestedObjectValues<AnimationObject> =
-      propsToCheck.pop() as NestedObjectValues<AnimationObject>;
-    if (Array.isArray(currentProp)) {
-      for (const item of currentProp) {
-        propsToCheck.push(item);
-      }
-    } else if (currentProp?.onFrame !== undefined) {
+  if (Array.isArray(prop)) {
+    return prop.some(isAnimated);
+  } else if (typeof prop === 'object') {
+    if (prop.onFrame !== undefined) {
       return true;
-    } else if (typeof currentProp === 'object') {
-      for (const item of Object.values(currentProp)) {
-        propsToCheck.push(item);
-      }
+    } else {
+      return Object.values(prop).some(isAnimated);
     }
-    // if none of the above, it's not the animated prop, check next one
   }
-
-  // when none of the props were animated return false
   return false;
 }
 
-export function styleDiff<T extends AnimatedStyle>(
-  oldStyle: AnimatedStyle,
-  newStyle: AnimatedStyle
-): Partial<T> {
+export function shallowEqual(a: any, b: any) {
   'worklet';
-  const diff: any = {};
-  for (const key in oldStyle) {
-    if (newStyle[key] === undefined) {
-      diff[key] = null;
-    }
-  }
-  for (const key in newStyle) {
-    const value = newStyle[key];
-    const oldValue = oldStyle[key];
-
-    if (isAnimated(value)) {
-      // do nothing
-      continue;
-    }
-    if (oldValue !== value) {
-      diff[key] = value;
-    }
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) {
+    return false;
   }
-  return diff;
-}
-
-export function getStyleWithoutAnimations(newStyle: AnimatedStyle): StyleProps {
-  'worklet';
-  const diff: StyleProps = {};
-
-  for (const key in newStyle) {
-    const value = newStyle[key];
-    if (isAnimated(value)) {
-      continue;
+  for (let i = 0; i < aKeys.length; i++) {
+    if (a[aKeys[i]] !== b[aKeys[i]]) {
+      return false;
     }
-    diff[key] = value;
   }
-  return diff;
+  return true;
 }
 
 export const validateAnimatedStyles = (styles: AnimatedStyle): void => {

package/src/reanimated2/index.ts

@@ -10,3 +10,4 @@ export * from './PropAdapters';
 export * from './layoutReanimation';
 export * from './utils';
 export * from './commonTypes';
+export * from './pluginUtils';

package/src/reanimated2/initializers.ts

@@ -1,7 +1,12 @@
 import { reportFatalErrorOnJS } from './errors';
 import NativeReanimatedModule from './NativeReanimated';
 import { isJest } from './PlatformChecker';
-import { runOnUI, runOnJS } from './threads';
+import {
+  runOnJS,
+  setupSetImmediate,
+  flushImmediates,
+  runOnUIImmediately,
+} from './threads';
 
 // callGuard is only used with debug builds
 function callGuardDEV<T extends Array<any>, U>(
@@ -29,18 +34,20 @@ function valueUnpacker(objectToUnpack: any, category?: string): any {
     workletsCache = global.__workletsCache = new Map();
     handleCache = global.__handleCache = new WeakMap();
   }
-  if (objectToUnpack.__workletHash) {
-    let workletFun = workletsCache.get(objectToUnpack.__workletHash);
+  const workletHash = objectToUnpack.__workletHash;
+  if (workletHash !== undefined) {
+    let workletFun = workletsCache.get(workletHash);
     if (workletFun === undefined) {
+      const initData = objectToUnpack.__initData;
       if (global.evalWithSourceMap) {
         // if the runtime (hermes only for now) supports loading source maps
         // we want to use the proper filename for the location as it guarantees
         // that debugger understands and loads the source code of the file where
         // the worklet is defined.
         workletFun = global.evalWithSourceMap(
-          '(' + objectToUnpack.asString + '\n)',
-          objectToUnpack.__location,
-          objectToUnpack.__sourceMap
+          '(' + initData.code + '\n)',
+          initData.location,
+          initData.sourceMap
         ) as (...args: any[]) => any;
       } else if (global.evalWithSourceUrl) {
         // if the runtime doesn't support loading source maps, in dev mode we
@@ -48,17 +55,17 @@ function valueUnpacker(objectToUnpack: any, category?: string): any {
         // the actual file location we use worklet hash, as it the allows us to
         // properly symbolicate traces (see errors.ts for details)
         workletFun = global.evalWithSourceUrl(
-          '(' + objectToUnpack.asString + '\n)',
-          `worklet_${objectToUnpack.__workletHash}`
+          '(' + initData.code + '\n)',
+          `worklet_${workletHash}`
         ) as (...args: any[]) => any;
       } else {
         // in release we use the regular eval to save on JSI calls
         // eslint-disable-next-line no-eval
-        workletFun = eval('(' + objectToUnpack.asString + '\n)') as (
+        workletFun = eval('(' + initData.code + '\n)') as (
           ...args: any[]
         ) => any;
       }
-      workletsCache.set(objectToUnpack.__workletHash, workletFun);
+      workletsCache.set(workletHash, workletFun);
     }
     const functionInstance = workletFun.bind(objectToUnpack);
     objectToUnpack._recur = functionInstance;
@@ -85,13 +92,69 @@ Possible solutions are:
   }
 }
 
+function setupRequestAnimationFrame() {
+  'worklet';
+
+  // Jest mocks requestAnimationFrame API and it does not like if that mock gets overridden
+  // so we avoid doing requestAnimationFrame batching in Jest environment.
+  const nativeRequestAnimationFrame = global.requestAnimationFrame;
+
+  let animationFrameCallbacks: Array<(timestamp: number) => void> = [];
+  let lastNativeAnimationFrameTimestamp = -1;
+
+  global.__flushAnimationFrame = (frameTimestamp: number) => {
+    const currentCallbacks = animationFrameCallbacks;
+    animationFrameCallbacks = [];
+    currentCallbacks.forEach((f) => f(frameTimestamp));
+    flushImmediates();
+  };
+
+  global.requestAnimationFrame = (
+    callback: (timestamp: number) => void
+  ): number => {
+    animationFrameCallbacks.push(callback);
+    if (animationFrameCallbacks.length === 1) {
+      // We schedule native requestAnimationFrame only when the first callback
+      // is added and then use it to execute all the enqueued callbacks. Once
+      // the callbacks are run, we clear the array.
+      nativeRequestAnimationFrame((timestamp) => {
+        if (lastNativeAnimationFrameTimestamp >= timestamp) {
+          // Make sure we only execute the callbacks once for a given frame
+          return;
+        }
+        lastNativeAnimationFrameTimestamp = timestamp;
+        global.__frameTimestamp = timestamp;
+        global.__flushAnimationFrame(timestamp);
+        global.__frameTimestamp = undefined;
+      });
+    }
+    // Reanimated currently does not support cancelling calbacks requested with
+    // requestAnimationFrame. We return -1 as identifier which isn't in line
+    // with the spec but it should give users better clue in case they actually
+    // attempt to store the value returned from rAF and use it for cancelling.
+    return -1;
+  };
+}
+
 export function initializeUIRuntime() {
   NativeReanimatedModule.installCoreFunctions(callGuardDEV, valueUnpacker);
 
   const IS_JEST = isJest();
 
+  if (IS_JEST) {
+    // requestAnimationFrame react-native jest's setup is incorrect as it polyfills
+    // the method directly using setTimeout, therefore the callback doesn't get the
+    // expected timestamp as the only argument: https://github.com/facebook/react-native/blob/main/jest/setup.js#L28
+    // We override this setup here to make sure that callbacks get the proper timestamps
+    // when executed. For non-jest environments we define requestAnimationFrame in setupRequestAnimationFrame
+    // @ts-ignore TypeScript uses Node definition for rAF, setTimeout, etc which returns a Timeout object rather than a number
+    global.requestAnimationFrame = (callback: (timestamp: number) => void) => {
+      return setTimeout(() => callback(performance.now()), 0);
+    };
+  }
+
   const capturableConsole = console;
-  runOnUI(() => {
+  runOnUIImmediately(() => {
     'worklet';
     // setup error handler
     global.ErrorUtils = {
@@ -114,30 +177,8 @@ export function initializeUIRuntime() {
     };
 
     if (!IS_JEST) {
-      // Jest mocks requestAnimationFrame API and it does not like if that mock gets overridden
-      // so we avoid doing requestAnimationFrame batching in Jest environment.
-      const nativeRequestAnimationFrame = global.requestAnimationFrame;
-      let callbacks: Array<(time: number) => void> = [];
-      global.requestAnimationFrame = (
-        callback: (timestamp: number) => void
-      ): number => {
-        callbacks.push(callback);
-        if (callbacks.length === 1) {
-          // We schedule native requestAnimationFrame only when the first callback
-          // is added and then use it to execute all the enqueued callbacks. Once
-          // the callbacks are run, we clear the array.
-          nativeRequestAnimationFrame((timestamp) => {
-            const currentCallbacks = callbacks;
-            callbacks = [];
-            currentCallbacks.forEach((f) => f(timestamp));
-          });
-        }
-        // Reanimated currently does not support cancelling calbacks requested with
-        // requestAnimationFrame. We return -1 as identifier which isn't in line
-        // with the spec but it should give users better clue in case they actually
-        // attempt to store the value returned from rAF and use it for cancelling.
-        return -1;
-      };
+      setupSetImmediate();
+      setupRequestAnimationFrame();
     }
   })();
 }