react-native-reanimated 2.3.3 → 2.5.0

package/lib/ConfigHelper.js

@@ -1,4 +1,4 @@
-import ReanimatedModule from './ReanimatedModule';
+import { configureProps as jsiConfigureProps } from './reanimated2/core';
 /**
  * Styles allowed to be direcly updated in UI thread
  */
@@ -104,7 +104,7 @@ let NATIVE_THREAD_PROPS_WHITELIST = {
     placeholderTextColor: true,
 };
 function configureProps() {
-    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));
 }
 export function addWhitelistedNativeProps(props) {
     const oldSize = Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length;

package/lib/createAnimatedComponent.js

@@ -90,6 +90,7 @@ export default function createAnimatedComponent(Component, options) {
             this._viewTag = -1;
             this._isFirstRender = true;
             this.animatedStyle = { value: {} };
+            this.initialStyle = {};
             this._component = null;
             // The system is best designed when setNativeProps is implemented. It is
             // able to avoid re-rendering and directly set the attributes that changed.
@@ -438,11 +439,9 @@ export default function createAnimatedComponent(Component, options) {
                             // this is how we recognize styles returned by useAnimatedStyle
                             style.viewsRef.add(this);
                             if (this._isFirstRender) {
-                                return Object.assign(Object.assign({}, style.initial.value), initialUpdaterRun(style.initial.updater));
-                            }
-                            else {
-                                return style.initial.value;
+                                this.initialStyle = Object.assign(Object.assign({}, style.initial.value), initialUpdaterRun(style.initial.updater));
                             }
+                            return this.initialStyle;
                         }
                         else {
                             return style;

package/lib/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/lib/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/lib/reanimated2/Colors.js

@@ -8,9 +8,6 @@
 /* eslint no-bitwise: 0 */
 import { Platform } from 'react-native';
 import { makeRemote, makeShareable, isConfigured } from './core';
-import { interpolate } from './interpolation';
-// @ts-ignore JS file
-import { Extrapolate } from '../reanimated1/derived';
 // var INTEGER = '[-+]?\\d+';
 const NUMBER = '[-+]?\\d*\\.?\\d+';
 const PERCENTAGE = NUMBER + '%';
@@ -34,7 +31,8 @@ function getMatchers() {
         cachedMatchers.hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));
         cachedMatchers.hsla = new RegExp('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})$/;
     }
@@ -381,7 +379,7 @@ export const rgbaColor = (r, g, b, alpha = 1) => {
     }
     return c;
 };
-function RGBtoHSV(r, g, b) {
+export function RGBtoHSV(r, g, b) {
     'worklet';
     /* eslint-disable */
     if (arguments.length === 1) {
@@ -522,96 +520,3 @@ export function toRGBA(HSVA) {
     const { r, g, b } = HSVtoRGB(HSVA[0], HSVA[1], HSVA[2]);
     return `rgba(${r}, ${g}, ${b}, ${HSVA[3]})`;
 }
-const interpolateColorsHSV = (value, inputRange, colors) => {
-    'worklet';
-    const h = interpolate(value, inputRange, colors.h, Extrapolate.CLAMP);
-    const s = interpolate(value, inputRange, colors.s, Extrapolate.CLAMP);
-    const v = interpolate(value, inputRange, colors.v, Extrapolate.CLAMP);
-    return hsvToColor(h, s, v);
-};
-const interpolateColorsRGB = (value, inputRange, colors) => {
-    'worklet';
-    const r = interpolate(value, inputRange, colors.r, Extrapolate.CLAMP);
-    const g = interpolate(value, inputRange, colors.g, Extrapolate.CLAMP);
-    const b = interpolate(value, inputRange, colors.b, Extrapolate.CLAMP);
-    const a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP);
-    return rgbaColor(r, g, b, a);
-};
-const BUFFER_SIZE = 200;
-const hashOrderRGBA = new ArrayBuffer(BUFFER_SIZE);
-let curentHashIndexRGBA = 0;
-const interpolateCacheRGBA = {};
-const getInterpolateCacheRGBA = (colors) => {
-    'worklet';
-    const hash = colors.join('');
-    const cache = interpolateCacheRGBA[hash];
-    if (cache !== undefined) {
-        return cache;
-    }
-    const r = [];
-    const g = [];
-    const b = [];
-    const a = [];
-    for (let i = 0; i < colors.length; ++i) {
-        const color = colors[i];
-        const proocessedColor = processColor(color);
-        // explicit check in case if processedColor is 0
-        if (proocessedColor !== null && proocessedColor !== undefined) {
-            r.push(red(proocessedColor));
-            g.push(green(proocessedColor));
-            b.push(blue(proocessedColor));
-            a.push(opacity(proocessedColor));
-        }
-    }
-    const newCache = { r, g, b, a };
-    const overrideHash = hashOrderRGBA[curentHashIndexRGBA];
-    if (overrideHash) {
-        delete interpolateCacheRGBA[overrideHash];
-    }
-    interpolateCacheRGBA[hash] = newCache;
-    hashOrderRGBA[curentHashIndexRGBA] = hash;
-    curentHashIndexRGBA = (curentHashIndexRGBA + 1) % BUFFER_SIZE;
-    return newCache;
-};
-const hashOrderHSV = new ArrayBuffer(BUFFER_SIZE);
-let curentHashIndexHSV = 0;
-const interpolateCacheHSV = {};
-const getInterpolateCacheHSV = (colors) => {
-    'worklet';
-    const hash = colors.join('');
-    const cache = interpolateCacheHSV[hash];
-    if (cache !== undefined) {
-        return cache;
-    }
-    const h = [];
-    const s = [];
-    const v = [];
-    for (let i = 0; i < colors.length; ++i) {
-        const color = colors[i];
-        const proocessedColor = RGBtoHSV(processColor(color));
-        if (proocessedColor) {
-            h.push(proocessedColor.h);
-            s.push(proocessedColor.s);
-            v.push(proocessedColor.v);
-        }
-    }
-    const newCache = { h, s, v };
-    const overrideHash = hashOrderHSV[curentHashIndexHSV];
-    if (overrideHash) {
-        delete interpolateCacheHSV[overrideHash];
-    }
-    interpolateCacheHSV[hash] = newCache;
-    hashOrderHSV[curentHashIndexHSV] = hash;
-    curentHashIndexHSV = (curentHashIndexHSV + 1) % BUFFER_SIZE;
-    return newCache;
-};
-export const interpolateColor = (value, inputRange, outputRange, colorSpace = 'RGB') => {
-    'worklet';
-    if (colorSpace === 'HSV') {
-        return interpolateColorsHSV(value, inputRange, getInterpolateCacheHSV(outputRange));
-    }
-    else if (colorSpace === 'RGB') {
-        return interpolateColorsRGB(value, inputRange, getInterpolateCacheRGBA(outputRange));
-    }
-    throw new Error(`invalid color space provided: ${colorSpace}. Supported values are: ['RGB', 'HSV']`);
-};

package/lib/reanimated2/Easing.js

@@ -149,6 +149,10 @@ function bezier(x1, y1, x2, y2) {
         },
     };
 }
+function bezierFn(x1, y1, x2, y2) {
+    'worklet';
+    return Bezier(x1, y1, x2, y2);
+}
 /**
  * Runs an easing function forwards.
  */
@@ -194,6 +198,7 @@ const EasingObject = {
     back,
     bounce,
     bezier,
+    bezierFn,
     in: in_,
     out,
     inOut,

package/lib/reanimated2/NativeMethods.js

@@ -1,12 +1,21 @@
 import { findNodeHandle } from 'react-native';
-import { isChromeDebugger } from './PlatformChecker';
+import { shouldBeUseWeb } from './PlatformChecker';
 export function getTag(view) {
     return findNodeHandle(view);
 }
+const isNativeIndefined = shouldBeUseWeb();
 export function measure(animatedRef) {
     'worklet';
-    if (!_WORKLET && !isChromeDebugger()) {
-        throw new Error('(measure) method cannot be used on RN side!');
+    if (!_WORKLET || isNativeIndefined) {
+        console.warn('[reanimated.measure] method cannot be used for web or Chrome Debugger');
+        return {
+            x: NaN,
+            y: NaN,
+            width: NaN,
+            height: NaN,
+            pageX: NaN,
+            pageY: NaN,
+        };
     }
     const viewTag = animatedRef();
     const result = _measure(viewTag);
@@ -17,7 +26,7 @@ export function measure(animatedRef) {
 }
 export function scrollTo(animatedRef, x, y, animated) {
     'worklet';
-    if (!_WORKLET && !isChromeDebugger()) {
+    if (!_WORKLET || isNativeIndefined) {
         return;
     }
     const viewTag = animatedRef();
@@ -25,8 +34,9 @@ export function scrollTo(animatedRef, x, y, animated) {
 }
 export function setGestureState(handlerTag, newState) {
     'worklet';
-    if (!_WORKLET && !isChromeDebugger()) {
+    if (!_WORKLET || isNativeIndefined) {
         console.warn('[Reanimated] You can not use setGestureState in non-worklet function.');
+        return;
     }
     _setGestureState(handlerTag, newState);
 }

package/lib/reanimated2/NativeReanimated/NativeReanimated.js

@@ -1,37 +1,50 @@
-const InnerNativeModule = global.__reanimatedModuleProxy;
+import { NativeModules } from 'react-native';
 export class NativeReanimated {
     constructor(native = true) {
+        if (global.__reanimatedModuleProxy === undefined) {
+            const { ReanimatedModule } = NativeModules;
+            ReanimatedModule === null || ReanimatedModule === void 0 ? void 0 : ReanimatedModule.installTurboModule();
+        }
+        this.InnerNativeModule = global.__reanimatedModuleProxy;
         this.native = native;
-        this.useOnlyV1 = InnerNativeModule === null;
     }
     installCoreFunctions(valueSetter) {
-        return InnerNativeModule.installCoreFunctions(valueSetter);
+        return this.InnerNativeModule.installCoreFunctions(valueSetter);
     }
     makeShareable(value) {
-        return InnerNativeModule.makeShareable(value);
+        return this.InnerNativeModule.makeShareable(value);
     }
     makeMutable(value) {
-        return InnerNativeModule.makeMutable(value);
+        return this.InnerNativeModule.makeMutable(value);
     }
     makeRemote(object = {}) {
-        return InnerNativeModule.makeRemote(object);
+        return this.InnerNativeModule.makeRemote(object);
+    }
+    registerSensor(sensorType, interval, sensorData) {
+        return this.InnerNativeModule.registerSensor(sensorType, interval, sensorData);
+    }
+    unregisterSensor(sensorId) {
+        return this.InnerNativeModule.unregisterSensor(sensorId);
     }
     startMapper(mapper, inputs = [], outputs = [], updater, viewDescriptors) {
-        return InnerNativeModule.startMapper(mapper, inputs, outputs, updater, viewDescriptors);
+        return this.InnerNativeModule.startMapper(mapper, inputs, outputs, updater, viewDescriptors);
     }
     stopMapper(mapperId) {
-        return InnerNativeModule.stopMapper(mapperId);
+        return this.InnerNativeModule.stopMapper(mapperId);
     }
     registerEventHandler(eventHash, eventHandler) {
-        return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+        return this.InnerNativeModule.registerEventHandler(eventHash, eventHandler);
     }
     unregisterEventHandler(id) {
-        return InnerNativeModule.unregisterEventHandler(id);
+        return this.InnerNativeModule.unregisterEventHandler(id);
     }
     getViewProp(viewTag, propName, callback) {
-        return InnerNativeModule.getViewProp(viewTag, propName, callback);
+        return this.InnerNativeModule.getViewProp(viewTag, propName, callback);
     }
     enableLayoutAnimations(flag) {
-        InnerNativeModule.enableLayoutAnimations(flag);
+        this.InnerNativeModule.enableLayoutAnimations(flag);
+    }
+    configureProps(uiProps, nativeProps) {
+        this.InnerNativeModule.configureProps(uiProps, nativeProps);
     }
 }

package/lib/reanimated2/NativeReanimated/index.js

@@ -1,15 +1,11 @@
 import reanimatedJS from '../js-reanimated';
-import { nativeShouldBeMock } from '../PlatformChecker';
-import { Platform } from 'react-native';
+import { shouldBeUseWeb } from '../PlatformChecker';
 import { NativeReanimated } from './NativeReanimated';
 let exportedModule;
-if (nativeShouldBeMock()) {
+if (shouldBeUseWeb()) {
     exportedModule = reanimatedJS;
 }
 else {
     exportedModule = new NativeReanimated();
-    if (exportedModule.useOnlyV1 && Platform.OS === 'android') {
-        console.warn(`If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`);
-    }
 }
 export default exportedModule;

package/lib/reanimated2/ViewDescriptorsSet.js

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { makeMutable } from './core';
-import { Platform } from 'react-native';
-const scheduleUpdates = Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
+import { shouldBeUseWeb } from './PlatformChecker';
+const scheduleUpdates = shouldBeUseWeb() ? requestAnimationFrame : setImmediate;
 export function makeViewDescriptorsSet() {
     const ref = useRef(null);
     if (ref.current === null) {

package/lib/reanimated2/animation/styleAnimation.js

@@ -35,7 +35,8 @@ export function setPath(obj, path, value) {
         }
         currObj = currObj[keys[i]];
     }
-    currObj[keys[keys.length - 1]] = value;
+    currObj[keys[keys.length - 1]] =
+        value;
 }
 export function withStyleAnimation(styleAnimations) {
     'worklet';

package/lib/reanimated2/core.js

@@ -24,7 +24,7 @@ export const checkPluginState = (throwError = true) => {
     return true;
 };
 export const isConfigured = (throwError = false) => {
-    return checkPluginState(throwError) && !NativeReanimatedModule.useOnlyV1;
+    return checkPluginState(throwError);
 };
 export const isConfiguredCheck = () => {
     if (!isConfigured(true)) {
@@ -259,29 +259,27 @@ export function runOnJS(fun) {
         return fun.__callAsync;
     }
 }
-if (!NativeReanimatedModule.useOnlyV1) {
-    NativeReanimatedModule.installCoreFunctions(NativeReanimatedModule.native
-        ? workletValueSetter
-        : workletValueSetterJS);
-    if (!isWeb() && isConfigured()) {
-        const capturableConsole = console;
-        runOnUI(() => {
-            'worklet';
-            const console = {
-                debug: runOnJS(capturableConsole.debug),
-                log: runOnJS(capturableConsole.log),
-                warn: runOnJS(capturableConsole.warn),
-                error: runOnJS(capturableConsole.error),
-                info: runOnJS(capturableConsole.info),
-            };
-            _setGlobalConsole(console);
-            if (global.performance == null) {
-                global.performance = {
-                    now: global._chronoNow,
-                };
-            }
-        })();
-    }
+NativeReanimatedModule.installCoreFunctions(NativeReanimatedModule.native
+    ? workletValueSetter
+    : workletValueSetterJS);
+if (!isWeb() && isConfigured()) {
+    const capturableConsole = console;
+    runOnUI(() => {
+        'worklet';
+        const console = {
+            debug: runOnJS(capturableConsole.debug),
+            log: runOnJS(capturableConsole.log),
+            warn: runOnJS(capturableConsole.warn),
+            error: runOnJS(capturableConsole.error),
+            info: runOnJS(capturableConsole.info),
+        };
+        _setGlobalConsole(console);
+        if (global.performance == null) {
+            global.performance = {
+                now: global._chronoNow,
+            }; // due to conflict with lib.dom.d.ts -> Performance
+        }
+    })();
 }
 let featuresConfig = {
     enableLayoutAnimations: false,
@@ -301,3 +299,11 @@ export function enableLayoutAnimations(flag, isCallByUser = true) {
         NativeReanimatedModule.enableLayoutAnimations(flag);
     }
 }
+export function configureProps(uiProps, nativeProps) {
+    if (!nativeShouldBeMock()) {
+        NativeReanimatedModule.configureProps(uiProps, nativeProps);
+    }
+}
+export function jestResetJsReanimatedModule() {
+    NativeReanimatedModule.jestResetModule();
+}

package/lib/reanimated2/globals.d.ts

@@ -27,6 +27,9 @@ declare global {
     animated: boolean
   ) => void;
   const _chronoNow: () => number;
+  const ReanimatedDataMock: {
+    now: () => number;
+  };
   namespace NodeJS {
     interface Global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
@@ -50,6 +53,9 @@ declare global {
           yogaValues: unknown
         ): void;
       };
+      ReanimatedDataMock: {
+        now: () => number;
+      };
     }
   }
 }

package/lib/reanimated2/hook/index.js

@@ -6,3 +6,4 @@ export { useAnimatedReaction, } from './useAnimatedReaction';
 export { useAnimatedRef } from './useAnimatedRef';
 export { useAnimatedScrollHandler, } from './useAnimatedScrollHandler';
 export { useDerivedValue } from './useDerivedValue';
+export { useAnimatedSensor, SensorType } from './useAnimatedSensor';

package/lib/reanimated2/hook/useAnimatedGestureHandler.js

@@ -1,4 +1,3 @@
-import { isWeb } from '../PlatformChecker';
 import { useEvent, useHandler } from './Hooks';
 export var EventType;
 (function (EventType) {
@@ -43,7 +42,7 @@ export function useAnimatedGestureHandler(handlers, dependencies) {
             handlers.onFinish(event, context, event.state === EventType.CANCELLED || event.state === EventType.FAILED);
         }
     };
-    if (isWeb()) {
+    if (useWeb) {
         return handler;
     }
     return useEvent(handler, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], doDependenciesDiffer);

package/lib/reanimated2/hook/useAnimatedSensor.js

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from 'react';
+import { makeMutable } from '../core';
+import NativeReanimated from '../NativeReanimated';
+export var SensorType;
+(function (SensorType) {
+    SensorType[SensorType["ACCELEROMETER"] = 1] = "ACCELEROMETER";
+    SensorType[SensorType["GYROSCOPE"] = 2] = "GYROSCOPE";
+    SensorType[SensorType["GRAVITY"] = 3] = "GRAVITY";
+    SensorType[SensorType["MAGNETIC_FIELD"] = 4] = "MAGNETIC_FIELD";
+    SensorType[SensorType["ROTATION"] = 5] = "ROTATION";
+})(SensorType || (SensorType = {}));
+export function useAnimatedSensor(sensorType, userConfig) {
+    const ref = useRef({
+        sensor: null,
+        unregister: () => {
+            // NOOP
+        },
+        isAvailable: false,
+        config: {
+            interval: 0,
+        },
+    });
+    if (ref.current.sensor === null) {
+        ref.current.config = Object.assign({ interval: 10 }, userConfig);
+        let sensorData;
+        if (sensorType === SensorType.ROTATION) {
+            sensorData = {
+                qw: 0,
+                qx: 0,
+                qy: 0,
+                qz: 0,
+                yaw: 0,
+                pitch: 0,
+                roll: 0,
+            };
+        }
+        else {
+            sensorData = {
+                x: 0,
+                y: 0,
+                z: 0,
+            };
+        }
+        ref.current.sensor = makeMutable(sensorData);
+    }
+    useEffect(() => {
+        ref.current.config = Object.assign({ interval: 10 }, userConfig);
+        const id = NativeReanimated.registerSensor(sensorType, ref.current.config.interval, ref.current.sensor);
+        if (id !== -1) {
+            // if sensor is available
+            ref.current.unregister = () => NativeReanimated.unregisterSensor(id);
+            ref.current.isAvailable = true;
+        }
+        else {
+            // if sensor is unavailable
+            ref.current.unregister = () => {
+                // NOOP
+            };
+            ref.current.isAvailable = false;
+        }
+        return () => {
+            ref.current.unregister();
+        };
+    }, [sensorType, userConfig]);
+    return ref.current;
+}

package/lib/reanimated2/hook/useAnimatedStyle.js

@@ -164,7 +164,11 @@ function styleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsA
     else {
         state.isAnimationCancelled = true;
         state.animations = [];
-        updateProps(viewDescriptors, newValues, maybeViewRef);
+        const diff = styleDiff(oldValues, newValues);
+        state.last = Object.assign({}, oldValues, newValues);
+        if (diff) {
+            updateProps(viewDescriptors, newValues, maybeViewRef);
+        }
     }
 }
 function jestStyleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsActive, animatedStyle, adapters = []) {
@@ -305,10 +309,10 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
     const maybeViewRef = NativeReanimatedModule.native ? undefined : viewsRef;
     useEffect(() => {
         let fun;
-        let upadterFn = updater;
+        let updaterFn = updater;
         let optimalization = updater.__optimalization;
         if (adapters) {
-            upadterFn = () => {
+            updaterFn = () => {
                 'worklet';
                 const newValues = updater();
                 adaptersArray.forEach((adapter) => {
@@ -317,27 +321,40 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
                 return newValues;
             };
         }
-        if (canApplyOptimalisation(upadterFn) && !shouldBeUseWeb()) {
-            if (hasColorProps(upadterFn())) {
-                upadterFn = () => {
+        if (canApplyOptimalisation(updaterFn) && !shouldBeUseWeb()) {
+            if (hasColorProps(updaterFn())) {
+                updaterFn = () => {
+                    'worklet';
+                    const newValues = updaterFn();
+                    const oldValues = remoteState.last;
+                    const diff = styleDiff(oldValues, newValues);
+                    remoteState.last = Object.assign({}, oldValues, newValues);
+                    parseColors(diff);
+                    return diff;
+                };
+            }
+            else {
+                updaterFn = () => {
                     'worklet';
-                    const style = upadterFn();
-                    parseColors(style);
-                    return style;
+                    const newValues = updaterFn();
+                    const oldValues = remoteState.last;
+                    const diff = styleDiff(oldValues, newValues);
+                    remoteState.last = Object.assign({}, oldValues, newValues);
+                    return diff;
                 };
             }
         }
         else if (!shouldBeUseWeb()) {
             optimalization = 0;
-            upadterFn = () => {
+            updaterFn = () => {
                 'worklet';
-                const style = upadterFn();
+                const style = updaterFn();
                 parseColors(style);
                 return style;
             };
         }
         if (typeof updater.__optimalization !== undefined) {
-            upadterFn.__optimalization = optimalization;
+            updaterFn.__optimalization = optimalization;
         }
         if (isJest()) {
             fun = () => {
@@ -348,10 +365,10 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
         else {
             fun = () => {
                 'worklet';
-                styleUpdater(sharableViewDescriptors, upadterFn, remoteState, maybeViewRef, animationsActive);
+                styleUpdater(sharableViewDescriptors, updaterFn, remoteState, maybeViewRef, animationsActive);
             };
         }
-        const mapperId = startMapper(fun, inputs, [], upadterFn, 
+        const mapperId = startMapper(fun, inputs, [], updaterFn, 
         // TODO fix this
         sharableViewDescriptors);
         return () => {