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

package/lib/commonjs/reanimated2/threads.js.map

@@ -1 +1 @@
-{"version":3,"names":["runOnUI","worklet","__DEV__","__workletHash","undefined","Error","args","NativeReanimatedModule","scheduleOnUI","makeShareableCloneRecursive","runOnJS","fun","__remoteFunction","_WORKLET","_scheduleOnJS","length","makeShareableCloneOnUIRecursive"],"sources":["threads.ts"],"sourcesContent":["import NativeReanimatedModule from './NativeReanimated';\nimport { ComplexWorkletFunction } from './commonTypes';\nimport {\n  makeShareableCloneOnUIRecursive,\n  makeShareableCloneRecursive,\n} from './shareables';\n\nexport function runOnUI<A extends any[], R>(\n  worklet: ComplexWorkletFunction<A, R>\n): (...args: A) => void {\n  if (__DEV__) {\n    if (worklet.__workletHash === undefined) {\n      throw new Error('runOnUI() can only be used on worklets');\n    }\n  }\n  return (...args) => {\n    NativeReanimatedModule.scheduleOnUI(\n      makeShareableCloneRecursive(() => {\n        'worklet';\n        return worklet(...args);\n      })\n    );\n  };\n}\n\nexport function runOnJS<A extends any[], R>(\n  fun: ComplexWorkletFunction<A, R>\n): (...args: A) => void {\n  'worklet';\n  if (fun.__remoteFunction) {\n    // in development mode the function provided as `fun` throws an error message\n    // such that when someone accidently calls it directly on the UI runtime, they\n    // see that they should use `runOnJS` instead. To facilitate that we purt the\n    // reference to the original remote function in the `__remoteFunction` property.\n    fun = fun.__remoteFunction;\n  }\n  if (!_WORKLET) {\n    return fun;\n  }\n  return (...args) => {\n    _scheduleOnJS(\n      fun,\n      args.length > 0 ? makeShareableCloneOnUIRecursive(args) : undefined\n    );\n  };\n}\n"],"mappings":";;;;;;;;AAAA;;AAEA;;;;AAKO,SAASA,OAAT,CACLC,OADK,EAEiB;EACtB,IAAIC,OAAJ,EAAa;IACX,IAAID,OAAO,CAACE,aAAR,KAA0BC,SAA9B,EAAyC;MACvC,MAAM,IAAIC,KAAJ,CAAU,wCAAV,CAAN;IACD;EACF;;EACD,OAAO,YAAa;IAAA,kCAATC,IAAS;MAATA,IAAS;IAAA;;IAClBC,yBAAA,CAAuBC,YAAvB,CACE,IAAAC,uCAAA,EAA4B,MAAM;MAChC;;MACA,OAAOR,OAAO,CAAC,GAAGK,IAAJ,CAAd;IACD,CAHD,CADF;EAMD,CAPD;AAQD;;AAEM,SAASI,OAAT,CACLC,GADK,EAEiB;EACtB;;EACA,IAAIA,GAAG,CAACC,gBAAR,EAA0B;IACxB;IACA;IACA;IACA;IACAD,GAAG,GAAGA,GAAG,CAACC,gBAAV;EACD;;EACD,IAAI,CAACC,QAAL,EAAe;IACb,OAAOF,GAAP;EACD;;EACD,OAAO,YAAa;IAAA,mCAATL,IAAS;MAATA,IAAS;IAAA;;IAClBQ,aAAa,CACXH,GADW,EAEXL,IAAI,CAACS,MAAL,GAAc,CAAd,GAAkB,IAAAC,2CAAA,EAAgCV,IAAhC,CAAlB,GAA0DF,SAF/C,CAAb;EAID,CALD;AAMD"}
+{"version":3,"names":["IS_JEST","isJest","IS_WEB","shouldBeUseWeb","_runOnUIQueue","setupSetImmediate","immediateCallbacks","global","setImmediate","callback","push","__flushImmediates","index","length","flushImmediatesOnUIThread","flushImmediates","runOnUI","worklet","__DEV__","__workletHash","undefined","Error","args","NativeReanimatedModule","scheduleOnUI","makeShareableCloneRecursive","queue","forEach","runOnUIImmediately","e","runOnJS","fun","__remoteFunction","_WORKLET","_scheduleOnJS","makeShareableCloneOnUIRecursive"],"sources":["threads.ts"],"sourcesContent":["import NativeReanimatedModule from './NativeReanimated';\nimport { isJest, shouldBeUseWeb } from './PlatformChecker';\nimport { ComplexWorkletFunction } from './commonTypes';\nimport {\n  makeShareableCloneOnUIRecursive,\n  makeShareableCloneRecursive,\n} from './shareables';\n\nconst IS_JEST = isJest();\nconst IS_WEB = shouldBeUseWeb();\n\nlet _runOnUIQueue: Array<[ComplexWorkletFunction<any[], any>, any[]]> = [];\n\nexport function setupSetImmediate() {\n  'worklet';\n\n  let immediateCallbacks: Array<() => void> = [];\n\n  // @ts-ignore – typescript expects this to conform to NodeJS definition and expects the return value to be NodeJS.Immediate which is an object and not a number\n  global.setImmediate = (callback: () => void): number => {\n    immediateCallbacks.push(callback);\n    return -1;\n  };\n\n  global.__flushImmediates = () => {\n    for (let index = 0; index < immediateCallbacks.length; index += 1) {\n      // we use classic 'for' loop because the size of the currentTasks array may change while executing some of the callbacks due to setImmediate calls\n      immediateCallbacks[index]();\n    }\n    immediateCallbacks = [];\n  };\n}\n\nfunction flushImmediatesOnUIThread() {\n  'worklet';\n  global.__flushImmediates();\n}\n\nexport const flushImmediates = shouldBeUseWeb()\n  ? () => {\n      // on web flushing is a noop as immediates are handled by the browser\n    }\n  : flushImmediatesOnUIThread;\n\n/**\n * Schedule a worklet to execute on the UI runtime. This method does not schedule the work immediately but instead\n * waits for other worklets to be scheduled within the same JS loop. It uses setImmediate to schedule all the worklets\n * at once making sure they will run within the same frame boundaries on the UI thread.\n */\nexport function runOnUI<A extends any[], R>(\n  worklet: ComplexWorkletFunction<A, R>\n): (...args: A) => void {\n  if (__DEV__ && !IS_WEB && worklet.__workletHash === undefined) {\n    throw new Error('runOnUI() can only be used on worklets');\n  }\n  return (...args) => {\n    if (IS_JEST) {\n      // Mocking time in Jest is tricky as both requestAnimationFrame and setImmediate\n      // callbacks run on the same queue and can be interleaved. There is no way\n      // to flush particular queue in Jest and the only control over mocked timers\n      // is by using jest.advanceTimersByTime() method which advances all types\n      // of timers including immediate and animation callbacks. Ideally we'd like\n      // to have some way here to schedule work along with React updates, but\n      // that's not possible, and hence in Jest environment instead of using scheduling\n      // mechanism we just schedule the work ommiting the queue. This is ok for the\n      // uses that we currently have but may not be ok for future tests that we write.\n      NativeReanimatedModule.scheduleOnUI(\n        makeShareableCloneRecursive(() => {\n          'worklet';\n          worklet(...args);\n        })\n      );\n      return;\n    }\n    _runOnUIQueue.push([worklet, args]);\n    if (_runOnUIQueue.length === 1) {\n      setImmediate(() => {\n        const queue = _runOnUIQueue;\n        _runOnUIQueue = [];\n        NativeReanimatedModule.scheduleOnUI(\n          makeShareableCloneRecursive(() => {\n            'worklet';\n            queue.forEach(([worklet, args]) => {\n              worklet(...args);\n            });\n            flushImmediates();\n          })\n        );\n      });\n    }\n  };\n}\n\n/**\n * Schedule a worklet to execute on the UI runtime skipping batching mechanism.\n */\nexport function runOnUIImmediately<A extends any[], R>(\n  worklet: ComplexWorkletFunction<A, R>\n): (...args: A) => void {\n  if (__DEV__ && !IS_WEB && worklet.__workletHash === undefined) {\n    throw new Error('runOnUI() can only be used on worklets');\n  }\n  return (...args) => {\n    NativeReanimatedModule.scheduleOnUI(\n      makeShareableCloneRecursive(() => {\n        'worklet';\n        worklet(...args);\n      })\n    );\n  };\n}\n\nif (__DEV__) {\n  try {\n    runOnUI(() => {\n      'worklet';\n    });\n  } catch (e) {\n    throw new Error(\n      'Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? See installation docs at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin.'\n    );\n  }\n}\n\nexport function runOnJS<A extends any[], R>(\n  fun: ComplexWorkletFunction<A, R>\n): (...args: A) => void {\n  'worklet';\n  if (fun.__remoteFunction) {\n    // in development mode the function provided as `fun` throws an error message\n    // such that when someone accidently calls it directly on the UI runtime, they\n    // see that they should use `runOnJS` instead. To facilitate that we purt the\n    // reference to the original remote function in the `__remoteFunction` property.\n    fun = fun.__remoteFunction;\n  }\n  if (!_WORKLET) {\n    return fun;\n  }\n  return (...args) => {\n    _scheduleOnJS(\n      fun,\n      args.length > 0 ? makeShareableCloneOnUIRecursive(args) : undefined\n    );\n  };\n}\n"],"mappings":"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"}

package/lib/commonjs/reanimated2/utils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getRelativeCoords = getRelativeCoords;
+exports.isSharedValue = isSharedValue;
 
 var _NativeMethods = require("./NativeMethods");
 
@@ -25,4 +26,10 @@ function getRelativeCoords(parentRef, absoluteX, absoluteY) {
     y: absoluteY - parentCoords.y
   };
 }
+
+function isSharedValue(value) {
+  'worklet';
+
+  return (value === null || value === void 0 ? void 0 : value._isReanimatedSharedValue) === true;
+}
 //# sourceMappingURL=utils.js.map

package/lib/commonjs/reanimated2/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["getRelativeCoords","parentRef","absoluteX","absoluteY","parentCoords","measure","x","y"],"sources":["utils.ts"],"sourcesContent":["import { Component } from 'react';\nimport { measure } from './NativeMethods';\nimport { RefObjectFunction } from './hook/commonTypes';\n\nexport interface ComponentCoords {\n  x: number;\n  y: number;\n}\n\n/**\n * Given an absolute position and a component ref, returns the relative\n * position in the component's local coordinate space.\n */\nexport function getRelativeCoords(\n  parentRef: RefObjectFunction<Component>,\n  absoluteX: number,\n  absoluteY: number\n): ComponentCoords | null {\n  'worklet';\n  const parentCoords = measure(parentRef);\n  if (parentCoords === null) {\n    return null;\n  }\n  return {\n    x: absoluteX - parentCoords.x,\n    y: absoluteY - parentCoords.y,\n  };\n}\n"],"mappings":";;;;;;;AACA;;AAQA;AACA;AACA;AACA;AACO,SAASA,iBAAT,CACLC,SADK,EAELC,SAFK,EAGLC,SAHK,EAImB;EACxB;;EACA,MAAMC,YAAY,GAAG,IAAAC,sBAAA,EAAQJ,SAAR,CAArB;;EACA,IAAIG,YAAY,KAAK,IAArB,EAA2B;IACzB,OAAO,IAAP;EACD;;EACD,OAAO;IACLE,CAAC,EAAEJ,SAAS,GAAGE,YAAY,CAACE,CADvB;IAELC,CAAC,EAAEJ,SAAS,GAAGC,YAAY,CAACG;EAFvB,CAAP;AAID"}
+{"version":3,"names":["getRelativeCoords","parentRef","absoluteX","absoluteY","parentCoords","measure","x","y","isSharedValue","value","_isReanimatedSharedValue"],"sources":["utils.ts"],"sourcesContent":["import { Component } from 'react';\nimport { measure } from './NativeMethods';\nimport { RefObjectFunction } from './hook/commonTypes';\nimport { SharedValue } from './commonTypes';\n\nexport interface ComponentCoords {\n  x: number;\n  y: number;\n}\n\n/**\n * Given an absolute position and a component ref, returns the relative\n * position in the component's local coordinate space.\n */\nexport function getRelativeCoords(\n  parentRef: RefObjectFunction<Component>,\n  absoluteX: number,\n  absoluteY: number\n): ComponentCoords | null {\n  'worklet';\n  const parentCoords = measure(parentRef);\n  if (parentCoords === null) {\n    return null;\n  }\n  return {\n    x: absoluteX - parentCoords.x,\n    y: absoluteY - parentCoords.y,\n  };\n}\n\nexport function isSharedValue<T>(value: any): value is SharedValue<T> {\n  'worklet';\n  return value?._isReanimatedSharedValue === true;\n}\n"],"mappings":";;;;;;;;AACA;;AASA;AACA;AACA;AACA;AACO,SAASA,iBAAT,CACLC,SADK,EAELC,SAFK,EAGLC,SAHK,EAImB;EACxB;;EACA,MAAMC,YAAY,GAAG,IAAAC,sBAAA,EAAQJ,SAAR,CAArB;;EACA,IAAIG,YAAY,KAAK,IAArB,EAA2B;IACzB,OAAO,IAAP;EACD;;EACD,OAAO;IACLE,CAAC,EAAEJ,SAAS,GAAGE,YAAY,CAACE,CADvB;IAELC,CAAC,EAAEJ,SAAS,GAAGC,YAAY,CAACG;EAFvB,CAAP;AAID;;AAEM,SAASC,aAAT,CAA0BC,KAA1B,EAA+D;EACpE;;EACA,OAAO,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,wBAAP,MAAoC,IAA3C;AACD"}

package/lib/commonjs/reanimated2/valueSetter.js

@@ -11,8 +11,6 @@ Object.defineProperty(exports, "stopMapper", {
 });
 exports.valueSetter = valueSetter;
 
-var _time = require("./time");
-
 var _mappers = require("./mappers");
 
 function valueSetter(sv, value) {
@@ -41,7 +39,7 @@ function valueSetter(sv, value) {
       animation.onStart(animation, sv.value, timestamp, previousAnimation);
     };
 
-    const currentTimestamp = (0, _time.getTimestamp)();
+    const currentTimestamp = global.__frameTimestamp || performance.now();
     initializeAnimation(currentTimestamp);
 
     const step = timestamp => {

package/lib/commonjs/reanimated2/valueSetter.js.map

@@ -1 +1 @@
-{"version":3,"names":["valueSetter","sv","value","previousAnimation","_animation","cancelled","onFrame","undefined","animation","_value","current","isHigherOrder","callback","initializeAnimation","timestamp","onStart","currentTimestamp","getTimestamp","step","finished","requestAnimationFrame"],"sources":["valueSetter.ts"],"sourcesContent":["import { AnimationObject, AnimatableValue } from './commonTypes';\nimport { Descriptor } from './hook/commonTypes';\nimport { getTimestamp } from './time';\nexport { stopMapper } from './mappers';\n\nexport function valueSetter(sv: any, value: any): void {\n  'worklet';\n  const previousAnimation = sv._animation;\n  if (previousAnimation) {\n    previousAnimation.cancelled = true;\n    sv._animation = null;\n  }\n  if (\n    typeof value === 'function' ||\n    (value !== null &&\n      typeof value === 'object' &&\n      (value as AnimationObject).onFrame !== undefined)\n  ) {\n    const animation: AnimationObject =\n      typeof value === 'function'\n        ? (value as () => AnimationObject)()\n        : (value as AnimationObject);\n    // prevent setting again to the same value\n    // and triggering the mappers that treat this value as an input\n    // this happens when the animation's target value(stored in animation.current until animation.onStart is called) is set to the same value as a current one(this._value)\n    // built in animations that are not higher order(withTiming, withSpring) hold target value in .current\n    if (sv._value === animation.current && !animation.isHigherOrder) {\n      animation.callback && animation.callback(true);\n      return;\n    }\n    // animated set\n    const initializeAnimation = (timestamp: number) => {\n      animation.onStart(animation, sv.value, timestamp, previousAnimation);\n    };\n    const currentTimestamp = getTimestamp();\n    initializeAnimation(currentTimestamp);\n    const step = (timestamp: number) => {\n      if (animation.cancelled) {\n        animation.callback && animation.callback(false /* finished */);\n        return;\n      }\n      const finished = animation.onFrame(animation, timestamp);\n      animation.finished = true;\n      animation.timestamp = timestamp;\n      sv._value = animation.current;\n      if (finished) {\n        animation.callback && animation.callback(true /* finished */);\n      } else {\n        requestAnimationFrame(step);\n      }\n    };\n\n    sv._animation = animation;\n\n    step(currentTimestamp);\n  } else {\n    // prevent setting again to the same value\n    // and triggering the mappers that treat this value as an input\n    if (sv._value === value) {\n      return;\n    }\n    sv._value = value as Descriptor | AnimatableValue;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAEA;;AACA;;AAEO,SAASA,WAAT,CAAqBC,EAArB,EAA8BC,KAA9B,EAAgD;EACrD;;EACA,MAAMC,iBAAiB,GAAGF,EAAE,CAACG,UAA7B;;EACA,IAAID,iBAAJ,EAAuB;IACrBA,iBAAiB,CAACE,SAAlB,GAA8B,IAA9B;IACAJ,EAAE,CAACG,UAAH,GAAgB,IAAhB;EACD;;EACD,IACE,OAAOF,KAAP,KAAiB,UAAjB,IACCA,KAAK,KAAK,IAAV,IACC,OAAOA,KAAP,KAAiB,QADlB,IAEEA,KAAD,CAA2BI,OAA3B,KAAuCC,SAJ3C,EAKE;IACA,MAAMC,SAA0B,GAC9B,OAAON,KAAP,KAAiB,UAAjB,GACKA,KAAD,EADJ,GAEKA,KAHP,CADA,CAKA;IACA;IACA;IACA;;IACA,IAAID,EAAE,CAACQ,MAAH,KAAcD,SAAS,CAACE,OAAxB,IAAmC,CAACF,SAAS,CAACG,aAAlD,EAAiE;MAC/DH,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB,IAAnB,CAAtB;MACA;IACD,CAZD,CAaA;;;IACA,MAAMC,mBAAmB,GAAIC,SAAD,IAAuB;MACjDN,SAAS,CAACO,OAAV,CAAkBP,SAAlB,EAA6BP,EAAE,CAACC,KAAhC,EAAuCY,SAAvC,EAAkDX,iBAAlD;IACD,CAFD;;IAGA,MAAMa,gBAAgB,GAAG,IAAAC,kBAAA,GAAzB;IACAJ,mBAAmB,CAACG,gBAAD,CAAnB;;IACA,MAAME,IAAI,GAAIJ,SAAD,IAAuB;MAClC,IAAIN,SAAS,CAACH,SAAd,EAAyB;QACvBG,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB;QAAM;QAAzB,CAAtB;QACA;MACD;;MACD,MAAMO,QAAQ,GAAGX,SAAS,CAACF,OAAV,CAAkBE,SAAlB,EAA6BM,SAA7B,CAAjB;MACAN,SAAS,CAACW,QAAV,GAAqB,IAArB;MACAX,SAAS,CAACM,SAAV,GAAsBA,SAAtB;MACAb,EAAE,CAACQ,MAAH,GAAYD,SAAS,CAACE,OAAtB;;MACA,IAAIS,QAAJ,EAAc;QACZX,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB;QAAK;QAAxB,CAAtB;MACD,CAFD,MAEO;QACLQ,qBAAqB,CAACF,IAAD,CAArB;MACD;IACF,CAdD;;IAgBAjB,EAAE,CAACG,UAAH,GAAgBI,SAAhB;IAEAU,IAAI,CAACF,gBAAD,CAAJ;EACD,CA3CD,MA2CO;IACL;IACA;IACA,IAAIf,EAAE,CAACQ,MAAH,KAAcP,KAAlB,EAAyB;MACvB;IACD;;IACDD,EAAE,CAACQ,MAAH,GAAYP,KAAZ;EACD;AACF"}
+{"version":3,"names":["valueSetter","sv","value","previousAnimation","_animation","cancelled","onFrame","undefined","animation","_value","current","isHigherOrder","callback","initializeAnimation","timestamp","onStart","currentTimestamp","global","__frameTimestamp","performance","now","step","finished","requestAnimationFrame"],"sources":["valueSetter.ts"],"sourcesContent":["import { AnimationObject, AnimatableValue } from './commonTypes';\nimport { Descriptor } from './hook/commonTypes';\nexport { stopMapper } from './mappers';\n\nexport function valueSetter(sv: any, value: any): void {\n  'worklet';\n  const previousAnimation = sv._animation;\n  if (previousAnimation) {\n    previousAnimation.cancelled = true;\n    sv._animation = null;\n  }\n  if (\n    typeof value === 'function' ||\n    (value !== null &&\n      typeof value === 'object' &&\n      (value as AnimationObject).onFrame !== undefined)\n  ) {\n    const animation: AnimationObject =\n      typeof value === 'function'\n        ? (value as () => AnimationObject)()\n        : (value as AnimationObject);\n    // prevent setting again to the same value\n    // and triggering the mappers that treat this value as an input\n    // this happens when the animation's target value(stored in animation.current until animation.onStart is called) is set to the same value as a current one(this._value)\n    // built in animations that are not higher order(withTiming, withSpring) hold target value in .current\n    if (sv._value === animation.current && !animation.isHigherOrder) {\n      animation.callback && animation.callback(true);\n      return;\n    }\n    // animated set\n    const initializeAnimation = (timestamp: number) => {\n      animation.onStart(animation, sv.value, timestamp, previousAnimation);\n    };\n    const currentTimestamp = global.__frameTimestamp || performance.now();\n    initializeAnimation(currentTimestamp);\n    const step = (timestamp: number) => {\n      if (animation.cancelled) {\n        animation.callback && animation.callback(false /* finished */);\n        return;\n      }\n      const finished = animation.onFrame(animation, timestamp);\n      animation.finished = true;\n      animation.timestamp = timestamp;\n      sv._value = animation.current;\n      if (finished) {\n        animation.callback && animation.callback(true /* finished */);\n      } else {\n        requestAnimationFrame(step);\n      }\n    };\n\n    sv._animation = animation;\n\n    step(currentTimestamp);\n  } else {\n    // prevent setting again to the same value\n    // and triggering the mappers that treat this value as an input\n    if (sv._value === value) {\n      return;\n    }\n    sv._value = value as Descriptor | AnimatableValue;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAEA;;AAEO,SAASA,WAAT,CAAqBC,EAArB,EAA8BC,KAA9B,EAAgD;EACrD;;EACA,MAAMC,iBAAiB,GAAGF,EAAE,CAACG,UAA7B;;EACA,IAAID,iBAAJ,EAAuB;IACrBA,iBAAiB,CAACE,SAAlB,GAA8B,IAA9B;IACAJ,EAAE,CAACG,UAAH,GAAgB,IAAhB;EACD;;EACD,IACE,OAAOF,KAAP,KAAiB,UAAjB,IACCA,KAAK,KAAK,IAAV,IACC,OAAOA,KAAP,KAAiB,QADlB,IAEEA,KAAD,CAA2BI,OAA3B,KAAuCC,SAJ3C,EAKE;IACA,MAAMC,SAA0B,GAC9B,OAAON,KAAP,KAAiB,UAAjB,GACKA,KAAD,EADJ,GAEKA,KAHP,CADA,CAKA;IACA;IACA;IACA;;IACA,IAAID,EAAE,CAACQ,MAAH,KAAcD,SAAS,CAACE,OAAxB,IAAmC,CAACF,SAAS,CAACG,aAAlD,EAAiE;MAC/DH,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB,IAAnB,CAAtB;MACA;IACD,CAZD,CAaA;;;IACA,MAAMC,mBAAmB,GAAIC,SAAD,IAAuB;MACjDN,SAAS,CAACO,OAAV,CAAkBP,SAAlB,EAA6BP,EAAE,CAACC,KAAhC,EAAuCY,SAAvC,EAAkDX,iBAAlD;IACD,CAFD;;IAGA,MAAMa,gBAAgB,GAAGC,MAAM,CAACC,gBAAP,IAA2BC,WAAW,CAACC,GAAZ,EAApD;IACAP,mBAAmB,CAACG,gBAAD,CAAnB;;IACA,MAAMK,IAAI,GAAIP,SAAD,IAAuB;MAClC,IAAIN,SAAS,CAACH,SAAd,EAAyB;QACvBG,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB;QAAM;QAAzB,CAAtB;QACA;MACD;;MACD,MAAMU,QAAQ,GAAGd,SAAS,CAACF,OAAV,CAAkBE,SAAlB,EAA6BM,SAA7B,CAAjB;MACAN,SAAS,CAACc,QAAV,GAAqB,IAArB;MACAd,SAAS,CAACM,SAAV,GAAsBA,SAAtB;MACAb,EAAE,CAACQ,MAAH,GAAYD,SAAS,CAACE,OAAtB;;MACA,IAAIY,QAAJ,EAAc;QACZd,SAAS,CAACI,QAAV,IAAsBJ,SAAS,CAACI,QAAV,CAAmB;QAAK;QAAxB,CAAtB;MACD,CAFD,MAEO;QACLW,qBAAqB,CAACF,IAAD,CAArB;MACD;IACF,CAdD;;IAgBApB,EAAE,CAACG,UAAH,GAAgBI,SAAhB;IAEAa,IAAI,CAACL,gBAAD,CAAJ;EACD,CA3CD,MA2CO;IACL;IACA;IACA,IAAIf,EAAE,CAACQ,MAAH,KAAcP,KAAlB,EAAyB;MACvB;IACD;;IACDD,EAAE,CAACQ,MAAH,GAAYP,KAAZ;EACD;AACF"}

package/lib/module/createAnimatedComponent.js

@@ -10,11 +10,15 @@ import './reanimated2/layoutReanimation/animationsManager';
 import invariant from 'invariant';
 import { adaptViewConfig } from './ConfigHelper';
 import { RNRenderer } from './reanimated2/platform-specific/RNRenderer';
-import { configureLayoutAnimations, enableLayoutAnimations, runOnUI } from './reanimated2/core';
+import { configureLayoutAnimations, enableLayoutAnimations, runOnUI, startMapper, stopMapper } from './reanimated2/core';
 import { isJest, isChromeDebugger, shouldBeUseWeb } from './reanimated2/PlatformChecker';
 import { initialUpdaterRun } from './reanimated2/animation';
+import { DefaultSharedTransition, LayoutAnimationType } from './reanimated2/layoutReanimation';
+import { makeViewDescriptorsSet } from './reanimated2/ViewDescriptorsSet';
 import { getShadowNodeWrapperFromRef } from './reanimated2/fabricUtils';
-import { makeShareableShadowNodeWrapper } from './reanimated2/shareables';
+import updateProps from './reanimated2/UpdateProps';
+import NativeReanimatedModule from './reanimated2/NativeReanimated';
+import { isSharedValue } from './reanimated2';
 
 function dummyListener() {// empty listener we use to assign to listener properties for which animated
   // event is used.
@@ -76,6 +80,86 @@ const has = (key, x) => {
   return false;
 };
 
+function isInlineStyleTransform(transform) {
+  if (!transform) {
+    return false;
+  }
+
+  return transform.some(t => hasInlineStyles(t));
+}
+
+function hasInlineStyles(style) {
+  if (!style) {
+    return false;
+  }
+
+  return Object.keys(style).some(key => {
+    const styleValue = style[key];
+    return isSharedValue(styleValue) || key === 'transform' && isInlineStyleTransform(styleValue);
+  });
+}
+
+function extractSharedValuesMapFromProps(props) {
+  const inlineProps = {};
+
+  for (const key in props) {
+    const value = props[key];
+
+    if (key === 'style') {
+      const styles = flattenArray(props.style ?? []);
+      styles.forEach(style => {
+        if (!style) {
+          return;
+        }
+
+        for (const [key, styleValue] of Object.entries(style)) {
+          if (isSharedValue(styleValue)) {
+            inlineProps[key] = styleValue;
+          } else if (key === 'transform' && isInlineStyleTransform(styleValue)) {
+            inlineProps[key] = styleValue;
+          }
+        }
+      });
+    } else if (isSharedValue(value)) {
+      inlineProps[key] = value;
+    }
+  }
+
+  return inlineProps;
+}
+
+function inlinePropsHasChanged(styles1, styles2) {
+  if (Object.keys(styles1).length !== Object.keys(styles2).length) {
+    return true;
+  }
+
+  for (const key of Object.keys(styles1)) {
+    if (styles1[key] !== styles2[key]) return true;
+  }
+
+  return false;
+}
+
+function getInlinePropsUpdate(inlineProps) {
+  'worklet';
+
+  const update = {};
+
+  for (const [key, styleValue] of Object.entries(inlineProps)) {
+    if (key === 'transform') {
+      update[key] = styleValue.map(transform => {
+        return getInlinePropsUpdate(transform);
+      });
+    } else if (isSharedValue(styleValue)) {
+      update[key] = styleValue.value;
+    } else {
+      update[key] = styleValue;
+    }
+  }
+
+  return update;
+}
+
 export default function createAnimatedComponent(Component, options) {
   invariant(typeof Component !== 'function' || Component.prototype && Component.prototype.isReactComponent, '`createAnimatedComponent` does not support stateless functional components; ' + 'use a class component instead.');
 
@@ -99,6 +183,12 @@ export default function createAnimatedComponent(Component, options) {
 
       _defineProperty(this, "_component", null);
 
+      _defineProperty(this, "_inlinePropsViewDescriptors", null);
+
+      _defineProperty(this, "_inlinePropsMapperId", null);
+
+      _defineProperty(this, "_inlineProps", {});
+
       _defineProperty(this, "_setComponentRef", setAndForwardRef({
         getForwardedRef: () => this.props.forwardedRef,
         setLocalRef: ref => {
@@ -107,24 +197,30 @@ export default function createAnimatedComponent(Component, options) {
           const {
             layout,
             entering,
-            exiting
+            exiting,
+            sharedTransitionTag
           } = this.props;
 
-          if ((layout || entering || exiting) && tag != null) {
+          if ((layout || entering || exiting || sharedTransitionTag) && tag != null) {
             if (!shouldBeUseWeb()) {
               enableLayoutAnimations(true, false);
             }
 
             if (layout) {
-              configureLayoutAnimations(tag, 'layout', maybeBuild(layout));
+              configureLayoutAnimations(tag, LayoutAnimationType.LAYOUT, maybeBuild(layout));
             }
 
             if (entering) {
-              configureLayoutAnimations(tag, 'entering', maybeBuild(entering));
+              configureLayoutAnimations(tag, LayoutAnimationType.ENTERING, maybeBuild(entering));
             }
 
             if (exiting) {
-              configureLayoutAnimations(tag, 'exiting', maybeBuild(exiting));
+              configureLayoutAnimations(tag, LayoutAnimationType.EXITING, maybeBuild(exiting));
+            }
+
+            if (sharedTransitionTag) {
+              const sharedElementTransition = this.props.sharedTransitionStyle ?? DefaultSharedTransition;
+              configureLayoutAnimations(tag, LayoutAnimationType.SHARED_ELEMENT_TRANSITION, maybeBuild(sharedElementTransition), sharedTransitionTag);
             }
           }
 
@@ -145,16 +241,30 @@ export default function createAnimatedComponent(Component, options) {
       this._detachNativeEvents();
 
       this._detachStyles();
+
+      this._detachInlineProps();
     }
 
     componentDidMount() {
       this._attachNativeEvents();
 
       this._attachAnimatedStyles();
+
+      this._attachInlineProps();
+    }
+
+    _getEventViewRef() {
+      var _this$_component;
+
+      // Make sure to get the scrollable node for components that implement
+      // `ScrollResponder.Mixin`.
+      return (_this$_component = this._component) !== null && _this$_component !== void 0 && _this$_component.getScrollableNode ? this._component.getScrollableNode() : this._component;
     }
 
     _attachNativeEvents() {
-      const viewTag = findNodeHandle(this);
+      const node = this._getEventViewRef();
+
+      const viewTag = findNodeHandle(options !== null && options !== void 0 && options.setNativeProps ? this : node);
 
       for (const key in this.props) {
         const prop = this.props[key];
@@ -194,11 +304,11 @@ export default function createAnimatedComponent(Component, options) {
         }
 
         if (global._IS_FABRIC) {
-          const shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
+          const viewTag = this._viewTag;
           runOnUI(() => {
             'worklet';
 
-            _removeShadowNodeFromRegistry(shadowNodeWrapper);
+            _removeShadowNodeFromRegistry(viewTag);
           })();
         }
       }
@@ -241,31 +351,26 @@ export default function createAnimatedComponent(Component, options) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         options.setNativeProps(this._component, props);
       } else {
-        var _this$_component, _this$_component$setN;
+        var _this$_component2, _this$_component2$set;
 
         // eslint-disable-next-line no-unused-expressions
-        (_this$_component = this._component) === null || _this$_component === void 0 ? void 0 : (_this$_component$setN = _this$_component.setNativeProps) === null || _this$_component$setN === void 0 ? void 0 : _this$_component$setN.call(_this$_component, props);
+        (_this$_component2 = this._component) === null || _this$_component2 === void 0 ? void 0 : (_this$_component2$set = _this$_component2.setNativeProps) === null || _this$_component2$set === void 0 ? void 0 : _this$_component2$set.call(_this$_component2, props);
       }
     }
 
-    _attachAnimatedStyles() {
-      var _this$props$animatedP3;
-
-      const styles = this.props.style ? onlyAnimatedStyles(flattenArray(this.props.style)) : [];
-      const prevStyles = this._styles;
-      this._styles = styles;
-      const prevAnimatedProps = this._animatedProps;
-      this._animatedProps = this.props.animatedProps;
+    _getViewInfo() {
       let viewTag;
       let viewName;
       let shadowNodeWrapper = null;
+      let viewConfig;
 
       if (Platform.OS === 'web') {
         viewTag = findNodeHandle(this);
         viewName = null;
         shadowNodeWrapper = null;
+        viewConfig = null;
       } else {
-        var _hostInstance$viewCon, _this$props$animatedP2;
+        var _hostInstance$viewCon;
 
         // hostInstance can be null for a component that doesn't render anything (render function returns null). Example: svg Stop: https://github.com/react-native-svg/react-native-svg/blob/develop/src/elements/Stop.tsx
         const hostInstance = RNRenderer.findHostInstance_DEPRECATED(this);
@@ -281,19 +386,45 @@ export default function createAnimatedComponent(Component, options) {
          * The name we're looking for is in the field named uiViewClassName.
          */
 
-        viewName = hostInstance === null || hostInstance === void 0 ? void 0 : (_hostInstance$viewCon = hostInstance.viewConfig) === null || _hostInstance$viewCon === void 0 ? void 0 : _hostInstance$viewCon.uiViewClassName; // update UI props whitelist for this view
-
-        const hasReanimated2Props = ((_this$props$animatedP2 = this.props.animatedProps) === null || _this$props$animatedP2 === void 0 ? void 0 : _this$props$animatedP2.viewDescriptors) || styles.length;
-
-        if (hasReanimated2Props && hostInstance !== null && hostInstance !== void 0 && hostInstance.viewConfig) {
-          adaptViewConfig(hostInstance.viewConfig);
-        }
+        viewName = hostInstance === null || hostInstance === void 0 ? void 0 : (_hostInstance$viewCon = hostInstance.viewConfig) === null || _hostInstance$viewCon === void 0 ? void 0 : _hostInstance$viewCon.uiViewClassName;
+        viewConfig = hostInstance === null || hostInstance === void 0 ? void 0 : hostInstance.viewConfig;
 
         if (global._IS_FABRIC) {
-          shadowNodeWrapper = makeShareableShadowNodeWrapper(getShadowNodeWrapperFromRef(this));
+          shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
         }
       }
 
+      return {
+        viewTag,
+        viewName,
+        shadowNodeWrapper,
+        viewConfig
+      };
+    }
+
+    _attachAnimatedStyles() {
+      var _this$props$animatedP2, _this$props$animatedP3;
+
+      const styles = this.props.style ? onlyAnimatedStyles(flattenArray(this.props.style)) : [];
+      const prevStyles = this._styles;
+      this._styles = styles;
+      const prevAnimatedProps = this._animatedProps;
+      this._animatedProps = this.props.animatedProps;
+
+      const {
+        viewTag,
+        viewName,
+        shadowNodeWrapper,
+        viewConfig
+      } = this._getViewInfo(); // update UI props whitelist for this view
+
+
+      const hasReanimated2Props = ((_this$props$animatedP2 = this.props.animatedProps) === null || _this$props$animatedP2 === void 0 ? void 0 : _this$props$animatedP2.viewDescriptors) || styles.length;
+
+      if (hasReanimated2Props && viewConfig) {
+        adaptViewConfig(viewConfig);
+      }
+
       this._viewTag = viewTag; // remove old styles
 
       if (prevStyles) {
@@ -350,10 +481,73 @@ export default function createAnimatedComponent(Component, options) {
       }
     }
 
+    _attachInlineProps() {
+      const newInlineProps = extractSharedValuesMapFromProps(this.props);
+      const hasChanged = inlinePropsHasChanged(newInlineProps, this._inlineProps);
+
+      if (hasChanged) {
+        if (!this._inlinePropsViewDescriptors) {
+          this._inlinePropsViewDescriptors = makeViewDescriptorsSet();
+
+          const {
+            viewTag,
+            viewName,
+            shadowNodeWrapper,
+            viewConfig
+          } = this._getViewInfo();
+
+          if (Object.keys(newInlineProps).length && viewConfig) {
+            adaptViewConfig(viewConfig);
+          }
+
+          this._inlinePropsViewDescriptors.add({
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            tag: viewTag,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            name: viewName,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            shadowNodeWrapper: shadowNodeWrapper
+          });
+        }
+
+        const sharableViewDescriptors = this._inlinePropsViewDescriptors.sharableViewDescriptors;
+        const maybeViewRef = NativeReanimatedModule.native ? undefined : {
+          items: new Set([this])
+        }; // see makeViewsRefSet
+
+        const updaterFunction = () => {
+          'worklet';
+
+          const update = getInlinePropsUpdate(newInlineProps);
+          updateProps(sharableViewDescriptors, update, maybeViewRef);
+        };
+
+        this._inlineProps = newInlineProps;
+
+        if (this._inlinePropsMapperId) {
+          stopMapper(this._inlinePropsMapperId);
+        }
+
+        this._inlinePropsMapperId = null;
+
+        if (Object.keys(newInlineProps).length) {
+          this._inlinePropsMapperId = startMapper(updaterFunction, Object.values(newInlineProps));
+        }
+      }
+    }
+
+    _detachInlineProps() {
+      if (this._inlinePropsMapperId) {
+        stopMapper(this._inlinePropsMapperId);
+      }
+    }
+
     componentDidUpdate(prevProps) {
       this._reattachNativeEvents(prevProps);
 
       this._attachAnimatedStyles();
+
+      this._attachInlineProps();
     }
 
     _filterNonAnimatedProps(inputProps) {
@@ -377,6 +571,20 @@ export default function createAnimatedComponent(Component, options) {
               }
 
               return this.initialStyle;
+            } else if (hasInlineStyles(style)) {
+              if (this._isFirstRender) {
+                return getInlinePropsUpdate(style);
+              }
+
+              const newStyle = {};
+
+              for (const [key, styleValue] of Object.entries(style)) {
+                if (!isSharedValue(styleValue) && !(key === 'transform' && isInlineStyleTransform(styleValue))) {
+                  newStyle[key] = styleValue;
+                }
+              }
+
+              return newStyle;
             } else {
               return style;
             }
@@ -401,6 +609,10 @@ export default function createAnimatedComponent(Component, options) {
           } else {
             props[key] = dummyListener;
           }
+        } else if (isSharedValue(value)) {
+          if (this._isFirstRender) {
+            props[key] = value.value;
+          }
         } else if (key !== 'onGestureHandlerStateChange' || !isChromeDebugger()) {
           props[key] = value;
         }