react-native-reanimated 3.13.0-rc.2 → 3.13.0

package/lib/module/layoutReanimation/web/domUtils.js.map

@@ -1 +1 @@
-{"version":3,"names":["isWindowAvailable","setDummyPosition","snapshots","Animations","PREDEFINED_WEB_ANIMATIONS_ID","CUSTOM_WEB_ANIMATIONS_ID","animationNameToIndex","Map","animationNameList","isObserverSet","configureWebLayoutAnimations","document","getElementById","predefinedAnimationsStyleTag","createElement","id","onload","sheet","console","error","animationName","insertRule","style","customAnimationsStyleTag","head","appendChild","insertWebAnimation","keyframe","styleTag","unshift","set","i","length","nextAnimationName","nextAnimationIndex","get","undefined","Error","removeWebAnimation","_styleTag$sheet","currentAnimationIndex","deleteRule","splice","delete","timeoutScale","frameDurationMs","minimumFrames","scheduleAnimationCleanup","animationDuration","timeoutValue","Math","max","setTimeout","reattachElementToAncestor","child","parent","childSnapshot","removedAfterAnimation","originalOnAnimationEnd","onanimationend","event","removeChild","call","findDescendantWithExitingAnimation","node","root","HTMLElement","reanimatedDummy","children","Array","from","checkIfScreenWasChanged","mutationTarget","_mutationTarget$react","reactFiberKey","key","Object","keys","startsWith","memoizedProps","navigation","addHTMLMutationObserver","observer","MutationObserver","mutationsList","rootMutation","target","removedNodes","observe","body","childList","subtree","areDOMRectsEqual","r1","r2","x","y","width","height"],"sources":["domUtils.ts"],"sourcesContent":["'use strict';\n\nimport type { ReanimatedHTMLElement } from '../../js-reanimated';\nimport { isWindowAvailable } from '../../PlatformChecker';\nimport { setDummyPosition, snapshots } from './componentStyle';\nimport { Animations } from './config';\nimport type { AnimationNames } from './config';\n\nconst PREDEFINED_WEB_ANIMATIONS_ID = 'ReanimatedPredefinedWebAnimationsStyle';\nconst CUSTOM_WEB_ANIMATIONS_ID = 'ReanimatedCustomWebAnimationsStyle';\n\n// Since we cannot remove keyframe from DOM by its name, we have to store its id\nconst animationNameToIndex = new Map<string, number>();\nconst animationNameList: string[] = [];\n\nlet isObserverSet = false;\n\n/**\n *  Creates `HTMLStyleElement`, inserts it into DOM and then inserts CSS rules into the stylesheet.\n *  If style element already exists, nothing happens.\n */\nexport function configureWebLayoutAnimations() {\n  if (\n    !isWindowAvailable() || // Without this check SSR crashes because document is undefined (NextExample on CI)\n    document.getElementById(PREDEFINED_WEB_ANIMATIONS_ID) !== null\n  ) {\n    return;\n  }\n\n  const predefinedAnimationsStyleTag = document.createElement('style');\n  predefinedAnimationsStyleTag.id = PREDEFINED_WEB_ANIMATIONS_ID;\n\n  predefinedAnimationsStyleTag.onload = () => {\n    if (!predefinedAnimationsStyleTag.sheet) {\n      console.error(\n        '[Reanimated] Failed to create layout animations stylesheet.'\n      );\n      return;\n    }\n\n    for (const animationName in Animations) {\n      predefinedAnimationsStyleTag.sheet.insertRule(\n        Animations[animationName as AnimationNames].style\n      );\n    }\n  };\n\n  const customAnimationsStyleTag = document.createElement('style');\n  customAnimationsStyleTag.id = CUSTOM_WEB_ANIMATIONS_ID;\n\n  document.head.appendChild(predefinedAnimationsStyleTag);\n  document.head.appendChild(customAnimationsStyleTag);\n}\n\nexport function insertWebAnimation(animationName: string, keyframe: string) {\n  // Without this check SSR crashes because document is undefined (NextExample on CI)\n  if (!isWindowAvailable()) {\n    return;\n  }\n\n  const styleTag = document.getElementById(\n    CUSTOM_WEB_ANIMATIONS_ID\n  ) as HTMLStyleElement;\n\n  if (!styleTag.sheet) {\n    console.error(\n      '[Reanimated] Failed to create layout animations stylesheet.'\n    );\n    return;\n  }\n\n  styleTag.sheet.insertRule(keyframe, 0);\n  animationNameList.unshift(animationName);\n  animationNameToIndex.set(animationName, 0);\n\n  for (let i = 1; i < animationNameList.length; ++i) {\n    const nextAnimationName = animationNameList[i];\n    const nextAnimationIndex = animationNameToIndex.get(nextAnimationName);\n\n    if (nextAnimationIndex === undefined) {\n      throw new Error('[Reanimated] Failed to obtain animation index.');\n    }\n\n    animationNameToIndex.set(animationNameList[i], nextAnimationIndex + 1);\n  }\n}\n\nfunction removeWebAnimation(animationName: string) {\n  // Without this check SSR crashes because document is undefined (NextExample on CI)\n  if (!isWindowAvailable()) {\n    return;\n  }\n\n  const styleTag = document.getElementById(\n    CUSTOM_WEB_ANIMATIONS_ID\n  ) as HTMLStyleElement;\n\n  const currentAnimationIndex = animationNameToIndex.get(animationName);\n\n  if (currentAnimationIndex === undefined) {\n    throw new Error('[Reanimated] Failed to obtain animation index.');\n  }\n\n  styleTag.sheet?.deleteRule(currentAnimationIndex);\n  animationNameList.splice(currentAnimationIndex, 1);\n  animationNameToIndex.delete(animationName);\n\n  for (let i = currentAnimationIndex; i < animationNameList.length; ++i) {\n    const nextAnimationName = animationNameList[i];\n    const nextAnimationIndex = animationNameToIndex.get(nextAnimationName);\n\n    if (nextAnimationIndex === undefined) {\n      throw new Error('[Reanimated] Failed to obtain animation index.');\n    }\n\n    animationNameToIndex.set(animationNameList[i], nextAnimationIndex - 1);\n  }\n}\n\nconst timeoutScale = 1.25; // We use this value to enlarge timeout duration. It can prove useful if animation lags.\nconst frameDurationMs = 16; // Just an approximation.\nconst minimumFrames = 10;\n\nexport function scheduleAnimationCleanup(\n  animationName: string,\n  animationDuration: number\n) {\n  // If duration is very short, we want to keep remove delay to at least 10 frames\n  // In our case it is exactly 160/1099 s, which is approximately 0.15s\n  const timeoutValue = Math.max(\n    animationDuration * timeoutScale * 1000,\n    animationDuration + frameDurationMs * minimumFrames\n  );\n\n  setTimeout(() => removeWebAnimation(animationName), timeoutValue);\n}\n\nfunction reattachElementToAncestor(child: ReanimatedHTMLElement, parent: Node) {\n  const childSnapshot = snapshots.get(child);\n\n  if (!childSnapshot) {\n    console.error('[Reanimated] Failed to obtain snapshot.');\n    return;\n  }\n\n  // We use that so we don't end up in infinite loop\n  child.removedAfterAnimation = true;\n  parent.appendChild(child);\n\n  setDummyPosition(child, childSnapshot);\n\n  const originalOnAnimationEnd = child.onanimationend;\n\n  child.onanimationend = function (event: AnimationEvent) {\n    parent.removeChild(child);\n\n    // Given that this function overrides onAnimationEnd, it won't be null\n    originalOnAnimationEnd?.call(this, event);\n  };\n}\n\nfunction findDescendantWithExitingAnimation(\n  node: ReanimatedHTMLElement,\n  root: Node\n) {\n  // Node could be something else than HTMLElement, for example TextNode (treated as plain text, not as HTML object),\n  // therefore it won't have children prop and calling Array.from(node.children) will cause error.\n  if (!(node instanceof HTMLElement)) {\n    return;\n  }\n\n  if (node.reanimatedDummy && node.removedAfterAnimation === undefined) {\n    reattachElementToAncestor(node, root);\n  }\n\n  const children = Array.from(node.children);\n\n  for (let i = 0; i < children.length; ++i) {\n    findDescendantWithExitingAnimation(\n      children[i] as ReanimatedHTMLElement,\n      root\n    );\n  }\n}\n\ntype FiberNodeKey = `__reactFiber${string}`;\n\ninterface FiberNode {\n  memoizedProps?: {\n    navigation?: unknown;\n  };\n\n  child?: FiberNode;\n}\n\ntype WithFiberNode = {\n  [key: FiberNodeKey]: FiberNode;\n};\n\ntype MaybeWithFiberNode = Partial<WithFiberNode>;\n\nfunction checkIfScreenWasChanged(\n  mutationTarget: ReanimatedHTMLElement & MaybeWithFiberNode\n) {\n  let reactFiberKey: FiberNodeKey = '__reactFiber';\n\n  for (const key of Object.keys(mutationTarget)) {\n    if (key.startsWith('__reactFiber')) {\n      reactFiberKey = key as FiberNodeKey;\n      break;\n    }\n  }\n\n  return (\n    mutationTarget[reactFiberKey]?.child?.memoizedProps?.navigation !==\n    undefined\n  );\n}\n\nexport function addHTMLMutationObserver() {\n  if (isObserverSet || !isWindowAvailable()) {\n    return;\n  }\n\n  isObserverSet = true;\n\n  const observer = new MutationObserver((mutationsList) => {\n    const rootMutation = mutationsList[mutationsList.length - 1];\n\n    if (\n      checkIfScreenWasChanged(\n        rootMutation.target as ReanimatedHTMLElement & MaybeWithFiberNode\n      )\n    ) {\n      return;\n    }\n\n    for (let i = 0; i < rootMutation.removedNodes.length; ++i) {\n      findDescendantWithExitingAnimation(\n        rootMutation.removedNodes[i] as ReanimatedHTMLElement,\n        rootMutation.target\n      );\n    }\n  });\n\n  observer.observe(document.body, { childList: true, subtree: true });\n}\n\nexport function areDOMRectsEqual(r1: DOMRect, r2: DOMRect) {\n  // There are 4 more fields, but checking these should suffice\n  return (\n    r1.x === r2.x &&\n    r1.y === r2.y &&\n    r1.width === r2.width &&\n    r1.height === r2.height\n  );\n}\n"],"mappings":"AAAA,YAAY;;AAGZ,SAASA,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,gBAAgB,EAAEC,SAAS,QAAQ,kBAAkB;AAC9D,SAASC,UAAU,QAAQ,UAAU;AAGrC,MAAMC,4BAA4B,GAAG,wCAAwC;AAC7E,MAAMC,wBAAwB,GAAG,oCAAoC;;AAErE;AACA,MAAMC,oBAAoB,GAAG,IAAIC,GAAG,CAAiB,CAAC;AACtD,MAAMC,iBAA2B,GAAG,EAAE;AAEtC,IAAIC,aAAa,GAAG,KAAK;;AAEzB;AACA;AACA;AACA;AACA,OAAO,SAASC,4BAA4BA,CAAA,EAAG;EAC7C,IACE,CAACV,iBAAiB,CAAC,CAAC;EAAI;EACxBW,QAAQ,CAACC,cAAc,CAACR,4BAA4B,CAAC,KAAK,IAAI,EAC9D;IACA;EACF;EAEA,MAAMS,4BAA4B,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;EACpED,4BAA4B,CAACE,EAAE,GAAGX,4BAA4B;EAE9DS,4BAA4B,CAACG,MAAM,GAAG,MAAM;IAC1C,IAAI,CAACH,4BAA4B,CAACI,KAAK,EAAE;MACvCC,OAAO,CAACC,KAAK,CACX,6DACF,CAAC;MACD;IACF;IAEA,KAAK,MAAMC,aAAa,IAAIjB,UAAU,EAAE;MACtCU,4BAA4B,CAACI,KAAK,CAACI,UAAU,CAC3ClB,UAAU,CAACiB,aAAa,CAAmB,CAACE,KAC9C,CAAC;IACH;EACF,CAAC;EAED,MAAMC,wBAAwB,GAAGZ,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;EAChES,wBAAwB,CAACR,EAAE,GAAGV,wBAAwB;EAEtDM,QAAQ,CAACa,IAAI,CAACC,WAAW,CAACZ,4BAA4B,CAAC;EACvDF,QAAQ,CAACa,IAAI,CAACC,WAAW,CAACF,wBAAwB,CAAC;AACrD;AAEA,OAAO,SAASG,kBAAkBA,CAACN,aAAqB,EAAEO,QAAgB,EAAE;EAC1E;EACA,IAAI,CAAC3B,iBAAiB,CAAC,CAAC,EAAE;IACxB;EACF;EAEA,MAAM4B,QAAQ,GAAGjB,QAAQ,CAACC,cAAc,CACtCP,wBACF,CAAqB;EAErB,IAAI,CAACuB,QAAQ,CAACX,KAAK,EAAE;IACnBC,OAAO,CAACC,KAAK,CACX,6DACF,CAAC;IACD;EACF;EAEAS,QAAQ,CAACX,KAAK,CAACI,UAAU,CAACM,QAAQ,EAAE,CAAC,CAAC;EACtCnB,iBAAiB,CAACqB,OAAO,CAACT,aAAa,CAAC;EACxCd,oBAAoB,CAACwB,GAAG,CAACV,aAAa,EAAE,CAAC,CAAC;EAE1C,KAAK,IAAIW,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGvB,iBAAiB,CAACwB,MAAM,EAAE,EAAED,CAAC,EAAE;IACjD,MAAME,iBAAiB,GAAGzB,iBAAiB,CAACuB,CAAC,CAAC;IAC9C,MAAMG,kBAAkB,GAAG5B,oBAAoB,CAAC6B,GAAG,CAACF,iBAAiB,CAAC;IAEtE,IAAIC,kBAAkB,KAAKE,SAAS,EAAE;MACpC,MAAM,IAAIC,KAAK,CAAC,gDAAgD,CAAC;IACnE;IAEA/B,oBAAoB,CAACwB,GAAG,CAACtB,iBAAiB,CAACuB,CAAC,CAAC,EAAEG,kBAAkB,GAAG,CAAC,CAAC;EACxE;AACF;AAEA,SAASI,kBAAkBA,CAAClB,aAAqB,EAAE;EAAA,IAAAmB,eAAA;EACjD;EACA,IAAI,CAACvC,iBAAiB,CAAC,CAAC,EAAE;IACxB;EACF;EAEA,MAAM4B,QAAQ,GAAGjB,QAAQ,CAACC,cAAc,CACtCP,wBACF,CAAqB;EAErB,MAAMmC,qBAAqB,GAAGlC,oBAAoB,CAAC6B,GAAG,CAACf,aAAa,CAAC;EAErE,IAAIoB,qBAAqB,KAAKJ,SAAS,EAAE;IACvC,MAAM,IAAIC,KAAK,CAAC,gDAAgD,CAAC;EACnE;EAEA,CAAAE,eAAA,GAAAX,QAAQ,CAACX,KAAK,cAAAsB,eAAA,eAAdA,eAAA,CAAgBE,UAAU,CAACD,qBAAqB,CAAC;EACjDhC,iBAAiB,CAACkC,MAAM,CAACF,qBAAqB,EAAE,CAAC,CAAC;EAClDlC,oBAAoB,CAACqC,MAAM,CAACvB,aAAa,CAAC;EAE1C,KAAK,IAAIW,CAAC,GAAGS,qBAAqB,EAAET,CAAC,GAAGvB,iBAAiB,CAACwB,MAAM,EAAE,EAAED,CAAC,EAAE;IACrE,MAAME,iBAAiB,GAAGzB,iBAAiB,CAACuB,CAAC,CAAC;IAC9C,MAAMG,kBAAkB,GAAG5B,oBAAoB,CAAC6B,GAAG,CAACF,iBAAiB,CAAC;IAEtE,IAAIC,kBAAkB,KAAKE,SAAS,EAAE;MACpC,MAAM,IAAIC,KAAK,CAAC,gDAAgD,CAAC;IACnE;IAEA/B,oBAAoB,CAACwB,GAAG,CAACtB,iBAAiB,CAACuB,CAAC,CAAC,EAAEG,kBAAkB,GAAG,CAAC,CAAC;EACxE;AACF;AAEA,MAAMU,YAAY,GAAG,IAAI,CAAC,CAAC;AAC3B,MAAMC,eAAe,GAAG,EAAE,CAAC,CAAC;AAC5B,MAAMC,aAAa,GAAG,EAAE;AAExB,OAAO,SAASC,wBAAwBA,CACtC3B,aAAqB,EACrB4B,iBAAyB,EACzB;EACA;EACA;EACA,MAAMC,YAAY,GAAGC,IAAI,CAACC,GAAG,CAC3BH,iBAAiB,GAAGJ,YAAY,GAAG,IAAI,EACvCI,iBAAiB,GAAGH,eAAe,GAAGC,aACxC,CAAC;EAEDM,UAAU,CAAC,MAAMd,kBAAkB,CAAClB,aAAa,CAAC,EAAE6B,YAAY,CAAC;AACnE;AAEA,SAASI,yBAAyBA,CAACC,KAA4B,EAAEC,MAAY,EAAE;EAC7E,MAAMC,aAAa,GAAGtD,SAAS,CAACiC,GAAG,CAACmB,KAAK,CAAC;EAE1C,IAAI,CAACE,aAAa,EAAE;IAClBtC,OAAO,CAACC,KAAK,CAAC,yCAAyC,CAAC;IACxD;EACF;;EAEA;EACAmC,KAAK,CAACG,qBAAqB,GAAG,IAAI;EAClCF,MAAM,CAAC9B,WAAW,CAAC6B,KAAK,CAAC;EAEzBrD,gBAAgB,CAACqD,KAAK,EAAEE,aAAa,CAAC;EAEtC,MAAME,sBAAsB,GAAGJ,KAAK,CAACK,cAAc;EAEnDL,KAAK,CAACK,cAAc,GAAG,UAAUC,KAAqB,EAAE;IACtDL,MAAM,CAACM,WAAW,CAACP,KAAK,CAAC;;IAEzB;IACAI,sBAAsB,aAAtBA,sBAAsB,eAAtBA,sBAAsB,CAAEI,IAAI,CAAC,IAAI,EAAEF,KAAK,CAAC;EAC3C,CAAC;AACH;AAEA,SAASG,kCAAkCA,CACzCC,IAA2B,EAC3BC,IAAU,EACV;EACA;EACA;EACA,IAAI,EAAED,IAAI,YAAYE,WAAW,CAAC,EAAE;IAClC;EACF;EAEA,IAAIF,IAAI,CAACG,eAAe,IAAIH,IAAI,CAACP,qBAAqB,KAAKrB,SAAS,EAAE;IACpEiB,yBAAyB,CAACW,IAAI,EAAEC,IAAI,CAAC;EACvC;EAEA,MAAMG,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAACN,IAAI,CAACI,QAAQ,CAAC;EAE1C,KAAK,IAAIrC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGqC,QAAQ,CAACpC,MAAM,EAAE,EAAED,CAAC,EAAE;IACxCgC,kCAAkC,CAChCK,QAAQ,CAACrC,CAAC,CAAC,EACXkC,IACF,CAAC;EACH;AACF;AAkBA,SAASM,uBAAuBA,CAC9BC,cAA0D,EAC1D;EAAA,IAAAC,qBAAA;EACA,IAAIC,aAA2B,GAAG,cAAc;EAEhD,KAAK,MAAMC,GAAG,IAAIC,MAAM,CAACC,IAAI,CAACL,cAAc,CAAC,EAAE;IAC7C,IAAIG,GAAG,CAACG,UAAU,CAAC,cAAc,CAAC,EAAE;MAClCJ,aAAa,GAAGC,GAAmB;MACnC;IACF;EACF;EAEA,OACE,EAAAF,qBAAA,GAAAD,cAAc,CAACE,aAAa,CAAC,cAAAD,qBAAA,gBAAAA,qBAAA,GAA7BA,qBAAA,CAA+BnB,KAAK,cAAAmB,qBAAA,gBAAAA,qBAAA,GAApCA,qBAAA,CAAsCM,aAAa,cAAAN,qBAAA,uBAAnDA,qBAAA,CAAqDO,UAAU,MAC/D5C,SAAS;AAEb;AAEA,OAAO,SAAS6C,uBAAuBA,CAAA,EAAG;EACxC,IAAIxE,aAAa,IAAI,CAACT,iBAAiB,CAAC,CAAC,EAAE;IACzC;EACF;EAEAS,aAAa,GAAG,IAAI;EAEpB,MAAMyE,QAAQ,GAAG,IAAIC,gBAAgB,CAAEC,aAAa,IAAK;IACvD,MAAMC,YAAY,GAAGD,aAAa,CAACA,aAAa,CAACpD,MAAM,GAAG,CAAC,CAAC;IAE5D,IACEuC,uBAAuB,CACrBc,YAAY,CAACC,MACf,CAAC,EACD;MACA;IACF;IAEA,KAAK,IAAIvD,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGsD,YAAY,CAACE,YAAY,CAACvD,MAAM,EAAE,EAAED,CAAC,EAAE;MACzDgC,kCAAkC,CAChCsB,YAAY,CAACE,YAAY,CAACxD,CAAC,CAAC,EAC5BsD,YAAY,CAACC,MACf,CAAC;IACH;EACF,CAAC,CAAC;EAEFJ,QAAQ,CAACM,OAAO,CAAC7E,QAAQ,CAAC8E,IAAI,EAAE;IAAEC,SAAS,EAAE,IAAI;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC;AACrE;AAEA,OAAO,SAASC,gBAAgBA,CAACC,EAAW,EAAEC,EAAW,EAAE;EACzD;EACA,OACED,EAAE,CAACE,CAAC,KAAKD,EAAE,CAACC,CAAC,IACbF,EAAE,CAACG,CAAC,KAAKF,EAAE,CAACE,CAAC,IACbH,EAAE,CAACI,KAAK,KAAKH,EAAE,CAACG,KAAK,IACrBJ,EAAE,CAACK,MAAM,KAAKJ,EAAE,CAACI,MAAM;AAE3B","ignoreList":[]}
+{"version":3,"names":["isWindowAvailable","setElementPosition","snapshots","Animations","PREDEFINED_WEB_ANIMATIONS_ID","CUSTOM_WEB_ANIMATIONS_ID","animationNameToIndex","Map","animationNameList","isObserverSet","configureWebLayoutAnimations","document","getElementById","predefinedAnimationsStyleTag","createElement","id","onload","sheet","console","error","animationName","insertRule","style","customAnimationsStyleTag","head","appendChild","insertWebAnimation","keyframe","styleTag","unshift","set","i","length","nextAnimationName","nextAnimationIndex","get","undefined","Error","removeWebAnimation","animationRemoveCallback","_styleTag$sheet","currentAnimationIndex","deleteRule","splice","delete","timeoutScale","frameDurationMs","minimumFrames","scheduleAnimationCleanup","animationDuration","timeoutValue","Math","max","setTimeout","reattachElementToAncestor","child","parent","childSnapshot","removedAfterAnimation","originalOnAnimationEnd","onanimationend","event","removeChild","call","findDescendantWithExitingAnimation","node","root","HTMLElement","reanimatedDummy","children","Array","from","checkIfScreenWasChanged","mutationTarget","_mutationTarget$react","reactFiberKey","key","Object","keys","startsWith","memoizedProps","navigation","addHTMLMutationObserver","observer","MutationObserver","mutationsList","rootMutation","target","removedNodes","observe","body","childList","subtree","areDOMRectsEqual","r1","r2","x","y","width","height"],"sources":["domUtils.ts"],"sourcesContent":["'use strict';\n\nimport type { ReanimatedHTMLElement } from '../../js-reanimated';\nimport { isWindowAvailable } from '../../PlatformChecker';\nimport { setElementPosition, snapshots } from './componentStyle';\nimport { Animations } from './config';\nimport type { AnimationNames } from './config';\n\nconst PREDEFINED_WEB_ANIMATIONS_ID = 'ReanimatedPredefinedWebAnimationsStyle';\nconst CUSTOM_WEB_ANIMATIONS_ID = 'ReanimatedCustomWebAnimationsStyle';\n\n// Since we cannot remove keyframe from DOM by its name, we have to store its id\nconst animationNameToIndex = new Map<string, number>();\nconst animationNameList: string[] = [];\n\nlet isObserverSet = false;\n\n/**\n *  Creates `HTMLStyleElement`, inserts it into DOM and then inserts CSS rules into the stylesheet.\n *  If style element already exists, nothing happens.\n */\nexport function configureWebLayoutAnimations() {\n  if (\n    !isWindowAvailable() || // Without this check SSR crashes because document is undefined (NextExample on CI)\n    document.getElementById(PREDEFINED_WEB_ANIMATIONS_ID) !== null\n  ) {\n    return;\n  }\n\n  const predefinedAnimationsStyleTag = document.createElement('style');\n  predefinedAnimationsStyleTag.id = PREDEFINED_WEB_ANIMATIONS_ID;\n\n  predefinedAnimationsStyleTag.onload = () => {\n    if (!predefinedAnimationsStyleTag.sheet) {\n      console.error(\n        '[Reanimated] Failed to create layout animations stylesheet.'\n      );\n      return;\n    }\n\n    for (const animationName in Animations) {\n      predefinedAnimationsStyleTag.sheet.insertRule(\n        Animations[animationName as AnimationNames].style\n      );\n    }\n  };\n\n  const customAnimationsStyleTag = document.createElement('style');\n  customAnimationsStyleTag.id = CUSTOM_WEB_ANIMATIONS_ID;\n\n  document.head.appendChild(predefinedAnimationsStyleTag);\n  document.head.appendChild(customAnimationsStyleTag);\n}\n\nexport function insertWebAnimation(animationName: string, keyframe: string) {\n  // Without this check SSR crashes because document is undefined (NextExample on CI)\n  if (!isWindowAvailable()) {\n    return;\n  }\n\n  const styleTag = document.getElementById(\n    CUSTOM_WEB_ANIMATIONS_ID\n  ) as HTMLStyleElement;\n\n  if (!styleTag.sheet) {\n    console.error(\n      '[Reanimated] Failed to create layout animations stylesheet.'\n    );\n    return;\n  }\n\n  styleTag.sheet.insertRule(keyframe, 0);\n  animationNameList.unshift(animationName);\n  animationNameToIndex.set(animationName, 0);\n\n  for (let i = 1; i < animationNameList.length; ++i) {\n    const nextAnimationName = animationNameList[i];\n    const nextAnimationIndex = animationNameToIndex.get(nextAnimationName);\n\n    if (nextAnimationIndex === undefined) {\n      throw new Error('[Reanimated] Failed to obtain animation index.');\n    }\n\n    animationNameToIndex.set(animationNameList[i], nextAnimationIndex + 1);\n  }\n}\n\nfunction removeWebAnimation(\n  animationName: string,\n  animationRemoveCallback: () => void\n) {\n  // Without this check SSR crashes because document is undefined (NextExample on CI)\n  if (!isWindowAvailable()) {\n    return;\n  }\n\n  const styleTag = document.getElementById(\n    CUSTOM_WEB_ANIMATIONS_ID\n  ) as HTMLStyleElement;\n\n  const currentAnimationIndex = animationNameToIndex.get(animationName);\n\n  if (currentAnimationIndex === undefined) {\n    throw new Error('[Reanimated] Failed to obtain animation index.');\n  }\n\n  animationRemoveCallback();\n\n  styleTag.sheet?.deleteRule(currentAnimationIndex);\n\n  animationNameList.splice(currentAnimationIndex, 1);\n  animationNameToIndex.delete(animationName);\n\n  for (let i = currentAnimationIndex; i < animationNameList.length; ++i) {\n    const nextAnimationName = animationNameList[i];\n    const nextAnimationIndex = animationNameToIndex.get(nextAnimationName);\n\n    if (nextAnimationIndex === undefined) {\n      throw new Error('[Reanimated] Failed to obtain animation index.');\n    }\n\n    animationNameToIndex.set(animationNameList[i], nextAnimationIndex - 1);\n  }\n}\n\nconst timeoutScale = 1.25; // We use this value to enlarge timeout duration. It can prove useful if animation lags.\nconst frameDurationMs = 16; // Just an approximation.\nconst minimumFrames = 10;\n\nexport function scheduleAnimationCleanup(\n  animationName: string,\n  animationDuration: number,\n  animationRemoveCallback: () => void\n) {\n  // If duration is very short, we want to keep remove delay to at least 10 frames\n  // In our case it is exactly 160/1099 s, which is approximately 0.15s\n  const timeoutValue = Math.max(\n    animationDuration * timeoutScale * 1000,\n    animationDuration + frameDurationMs * minimumFrames\n  );\n\n  setTimeout(\n    () => removeWebAnimation(animationName, animationRemoveCallback),\n    timeoutValue\n  );\n}\n\nfunction reattachElementToAncestor(child: ReanimatedHTMLElement, parent: Node) {\n  const childSnapshot = snapshots.get(child);\n\n  if (!childSnapshot) {\n    console.error('[Reanimated] Failed to obtain snapshot.');\n    return;\n  }\n\n  // We use that so we don't end up in infinite loop\n  child.removedAfterAnimation = true;\n  parent.appendChild(child);\n\n  setElementPosition(child, childSnapshot);\n\n  const originalOnAnimationEnd = child.onanimationend;\n\n  child.onanimationend = function (event: AnimationEvent) {\n    parent.removeChild(child);\n\n    // Given that this function overrides onAnimationEnd, it won't be null\n    originalOnAnimationEnd?.call(this, event);\n  };\n}\n\nfunction findDescendantWithExitingAnimation(\n  node: ReanimatedHTMLElement,\n  root: Node\n) {\n  // Node could be something else than HTMLElement, for example TextNode (treated as plain text, not as HTML object),\n  // therefore it won't have children prop and calling Array.from(node.children) will cause error.\n  if (!(node instanceof HTMLElement)) {\n    return;\n  }\n\n  if (node.reanimatedDummy && node.removedAfterAnimation === undefined) {\n    reattachElementToAncestor(node, root);\n  }\n\n  const children = Array.from(node.children);\n\n  for (let i = 0; i < children.length; ++i) {\n    findDescendantWithExitingAnimation(\n      children[i] as ReanimatedHTMLElement,\n      root\n    );\n  }\n}\n\ntype FiberNodeKey = `__reactFiber${string}`;\n\ninterface FiberNode {\n  memoizedProps?: {\n    navigation?: unknown;\n  };\n\n  child?: FiberNode;\n}\n\ntype WithFiberNode = {\n  [key: FiberNodeKey]: FiberNode;\n};\n\ntype MaybeWithFiberNode = Partial<WithFiberNode>;\n\nfunction checkIfScreenWasChanged(\n  mutationTarget: ReanimatedHTMLElement & MaybeWithFiberNode\n) {\n  let reactFiberKey: FiberNodeKey = '__reactFiber';\n\n  for (const key of Object.keys(mutationTarget)) {\n    if (key.startsWith('__reactFiber')) {\n      reactFiberKey = key as FiberNodeKey;\n      break;\n    }\n  }\n\n  return (\n    mutationTarget[reactFiberKey]?.child?.memoizedProps?.navigation !==\n    undefined\n  );\n}\n\nexport function addHTMLMutationObserver() {\n  if (isObserverSet || !isWindowAvailable()) {\n    return;\n  }\n\n  isObserverSet = true;\n\n  const observer = new MutationObserver((mutationsList) => {\n    const rootMutation = mutationsList[mutationsList.length - 1];\n\n    if (\n      checkIfScreenWasChanged(\n        rootMutation.target as ReanimatedHTMLElement & MaybeWithFiberNode\n      )\n    ) {\n      return;\n    }\n\n    for (let i = 0; i < rootMutation.removedNodes.length; ++i) {\n      findDescendantWithExitingAnimation(\n        rootMutation.removedNodes[i] as ReanimatedHTMLElement,\n        rootMutation.target\n      );\n    }\n  });\n\n  observer.observe(document.body, { childList: true, subtree: true });\n}\n\nexport function areDOMRectsEqual(r1: DOMRect, r2: DOMRect) {\n  // There are 4 more fields, but checking these should suffice\n  return (\n    r1.x === r2.x &&\n    r1.y === r2.y &&\n    r1.width === r2.width &&\n    r1.height === r2.height\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/module/layoutReanimation/web/transition/Jumping.web.js

@@ -0,0 +1,43 @@
+'use strict';
+
+import { Easing } from '../../../Easing';
+export function JumpingTransition(name, transitionData) {
+  const {
+    translateX,
+    translateY,
+    scaleX,
+    scaleY
+  } = transitionData;
+  const d = Math.max(Math.abs(translateX), Math.abs(translateY)) / 2;
+  const peakTranslateY = translateY <= 0 ? translateY - d : -translateY + d;
+  const jumpingTransition = {
+    name,
+    style: {
+      0: {
+        transform: [{
+          translateX: `${translateX}px`,
+          translateY: `${translateY}px`,
+          scale: `${scaleX},${scaleY}`
+        }],
+        easing: Easing.exp
+      },
+      50: {
+        transform: [{
+          translateX: `${translateX / 2}px`,
+          translateY: `${peakTranslateY}px`,
+          scale: `${scaleX},${scaleY}`
+        }]
+      },
+      100: {
+        transform: [{
+          translateX: '0px',
+          translateY: '0px',
+          scale: '1,1'
+        }]
+      }
+    },
+    duration: 300
+  };
+  return jumpingTransition;
+}
+//# sourceMappingURL=Jumping.web.js.map

package/lib/module/layoutReanimation/web/transition/Jumping.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Easing","JumpingTransition","name","transitionData","translateX","translateY","scaleX","scaleY","d","Math","max","abs","peakTranslateY","jumpingTransition","style","transform","scale","easing","exp","duration"],"sources":["Jumping.web.ts"],"sourcesContent":["'use strict';\nimport type { TransitionData } from '../animationParser';\nimport { Easing } from '../../../Easing';\n\nexport function JumpingTransition(\n  name: string,\n  transitionData: TransitionData\n) {\n  const { translateX, translateY, scaleX, scaleY } = transitionData;\n\n  const d = Math.max(Math.abs(translateX), Math.abs(translateY)) / 2;\n  const peakTranslateY = translateY <= 0 ? translateY - d : -translateY + d;\n\n  const jumpingTransition = {\n    name,\n    style: {\n      0: {\n        transform: [\n          {\n            translateX: `${translateX}px`,\n            translateY: `${translateY}px`,\n            scale: `${scaleX},${scaleY}`,\n          },\n        ],\n        easing: Easing.exp,\n      },\n      50: {\n        transform: [\n          {\n            translateX: `${translateX / 2}px`,\n            translateY: `${peakTranslateY}px`,\n            scale: `${scaleX},${scaleY}`,\n          },\n        ],\n      },\n      100: {\n        transform: [{ translateX: '0px', translateY: '0px', scale: '1,1' }],\n      },\n    },\n    duration: 300,\n  };\n\n  return jumpingTransition;\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,MAAM,QAAQ,iBAAiB;AAExC,OAAO,SAASC,iBAAiBA,CAC/BC,IAAY,EACZC,cAA8B,EAC9B;EACA,MAAM;IAAEC,UAAU;IAAEC,UAAU;IAAEC,MAAM;IAAEC;EAAO,CAAC,GAAGJ,cAAc;EAEjE,MAAMK,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACP,UAAU,CAAC,EAAEK,IAAI,CAACE,GAAG,CAACN,UAAU,CAAC,CAAC,GAAG,CAAC;EAClE,MAAMO,cAAc,GAAGP,UAAU,IAAI,CAAC,GAAGA,UAAU,GAAGG,CAAC,GAAG,CAACH,UAAU,GAAGG,CAAC;EAEzE,MAAMK,iBAAiB,GAAG;IACxBX,IAAI;IACJY,KAAK,EAAE;MACL,CAAC,EAAE;QACDC,SAAS,EAAE,CACT;UACEX,UAAU,EAAG,GAAEA,UAAW,IAAG;UAC7BC,UAAU,EAAG,GAAEA,UAAW,IAAG;UAC7BW,KAAK,EAAG,GAAEV,MAAO,IAAGC,MAAO;QAC7B,CAAC,CACF;QACDU,MAAM,EAAEjB,MAAM,CAACkB;MACjB,CAAC;MACD,EAAE,EAAE;QACFH,SAAS,EAAE,CACT;UACEX,UAAU,EAAG,GAAEA,UAAU,GAAG,CAAE,IAAG;UACjCC,UAAU,EAAG,GAAEO,cAAe,IAAG;UACjCI,KAAK,EAAG,GAAEV,MAAO,IAAGC,MAAO;QAC7B,CAAC;MAEL,CAAC;MACD,GAAG,EAAE;QACHQ,SAAS,EAAE,CAAC;UAAEX,UAAU,EAAE,KAAK;UAAEC,UAAU,EAAE,KAAK;UAAEW,KAAK,EAAE;QAAM,CAAC;MACpE;IACF,CAAC;IACDG,QAAQ,EAAE;EACZ,CAAC;EAED,OAAON,iBAAiB;AAC1B","ignoreList":[]}

package/lib/module/platform-specific/RNRenderer.web.js

@@ -1,5 +1,5 @@
 'use strict';
 
 // RNRender is not used for web. An export is still defined to eliminate warnings from bundlers such as esbuild.
-module.exports = null;
+export {};
 //# sourceMappingURL=RNRenderer.web.js.map

package/lib/module/platform-specific/RNRenderer.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["module","exports"],"sources":["RNRenderer.web.ts"],"sourcesContent":["'use strict';\n// RNRender is not used for web. An export is still defined to eliminate warnings from bundlers such as esbuild.\nmodule.exports = null;\n"],"mappings":"AAAA,YAAY;;AACZ;AACAA,MAAM,CAACC,OAAO,GAAG,IAAI","ignoreList":[]}
+{"version":3,"names":[],"sources":["RNRenderer.web.ts"],"sourcesContent":["'use strict';\n// RNRender is not used for web. An export is still defined to eliminate warnings from bundlers such as esbuild.\nexport {};\n"],"mappings":"AAAA,YAAY;;AACZ;AACA","ignoreList":[]}

package/lib/module/platform-specific/jsVersion.js

@@ -5,5 +5,5 @@
  * with the version used to build the native part of the library in runtime.
  * Remember to keep this in sync with the version declared in `package.json`
  */
-export const jsVersion = '3.13.0-rc.2';
+export const jsVersion = '3.13.0';
 //# sourceMappingURL=jsVersion.js.map

package/lib/module/platform-specific/jsVersion.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsVersion"],"sources":["jsVersion.ts"],"sourcesContent":["'use strict';\n/**\n * We hardcode the version of Reanimated here in order to compare it\n * with the version used to build the native part of the library in runtime.\n * Remember to keep this in sync with the version declared in `package.json`\n */\nexport const jsVersion = '3.13.0-rc.2';\n"],"mappings":"AAAA,YAAY;;AACZ;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,SAAS,GAAG,aAAa","ignoreList":[]}
+{"version":3,"names":["jsVersion"],"sources":["jsVersion.ts"],"sourcesContent":["'use strict';\n/**\n * We hardcode the version of Reanimated here in order to compare it\n * with the version used to build the native part of the library in runtime.\n * Remember to keep this in sync with the version declared in `package.json`\n */\nexport const jsVersion = '3.13.0';\n"],"mappings":"AAAA,YAAY;;AACZ;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,SAAS,GAAG,QAAQ","ignoreList":[]}

package/lib/module/platformFunctions/setNativeProps.web.js

@@ -3,8 +3,6 @@
 import { _updatePropsJS } from '../js-reanimated';
 export function setNativeProps(animatedRef, updates) {
   const component = animatedRef();
-  _updatePropsJS(updates, {
-    _component: component
-  });
+  _updatePropsJS(updates, component);
 }
 //# sourceMappingURL=setNativeProps.web.js.map

package/lib/module/platformFunctions/setNativeProps.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_updatePropsJS","setNativeProps","animatedRef","updates","component","_component"],"sources":["setNativeProps.web.ts"],"sourcesContent":["'use strict';\nimport type { ReanimatedHTMLElement } from '../js-reanimated';\nimport { _updatePropsJS } from '../js-reanimated';\nimport type { StyleProps } from '../commonTypes';\nimport type { AnimatedRef } from '../hook/commonTypes';\nimport type { Component } from 'react';\n\nexport function setNativeProps<T extends Component>(\n  animatedRef: AnimatedRef<T>,\n  updates: StyleProps\n) {\n  const component = animatedRef() as ReanimatedHTMLElement;\n  _updatePropsJS(updates, { _component: component });\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,cAAc,QAAQ,kBAAkB;AAKjD,OAAO,SAASC,cAAcA,CAC5BC,WAA2B,EAC3BC,OAAmB,EACnB;EACA,MAAMC,SAAS,GAAGF,WAAW,CAAC,CAA0B;EACxDF,cAAc,CAACG,OAAO,EAAE;IAAEE,UAAU,EAAED;EAAU,CAAC,CAAC;AACpD","ignoreList":[]}
+{"version":3,"names":["_updatePropsJS","setNativeProps","animatedRef","updates","component"],"sources":["setNativeProps.web.ts"],"sourcesContent":["'use strict';\nimport type { ReanimatedHTMLElement } from '../js-reanimated';\nimport { _updatePropsJS } from '../js-reanimated';\nimport type { StyleProps } from '../commonTypes';\nimport type { AnimatedRef } from '../hook/commonTypes';\nimport type { Component } from 'react';\n\nexport function setNativeProps<T extends Component>(\n  animatedRef: AnimatedRef<T>,\n  updates: StyleProps\n) {\n  const component = animatedRef() as ReanimatedHTMLElement;\n  _updatePropsJS(updates, component);\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,cAAc,QAAQ,kBAAkB;AAKjD,OAAO,SAASC,cAAcA,CAC5BC,WAA2B,EAC3BC,OAAmB,EACnB;EACA,MAAMC,SAAS,GAAGF,WAAW,CAAC,CAA0B;EACxDF,cAAc,CAACG,OAAO,EAAEC,SAAS,CAAC;AACpC","ignoreList":[]}

package/lib/typescript/UpdateProps.d.ts

@@ -2,9 +2,8 @@ import type { MutableRefObject } from 'react';
 import type { SharedValue, StyleProps } from './commonTypes';
 import type { AnimatedStyle } from './helperTypes';
 import type { Descriptor } from './hook/commonTypes';
-import type { ViewRefSet } from './ViewDescriptorsSet';
-declare let updateProps: (viewDescriptor: SharedValue<Descriptor[]>, updates: StyleProps | AnimatedStyle<any>, maybeViewRef: ViewRefSet<any> | undefined, isAnimatedProps?: boolean) => void;
-export declare const updatePropsJestWrapper: (viewDescriptors: SharedValue<Descriptor[]>, updates: AnimatedStyle<any>, maybeViewRef: ViewRefSet<any> | undefined, animatedStyle: MutableRefObject<AnimatedStyle<any>>, adapters: ((updates: AnimatedStyle<any>) => void)[]) => void;
+declare let updateProps: (viewDescriptor: SharedValue<Descriptor[]>, updates: StyleProps | AnimatedStyle<any>, isAnimatedProps?: boolean) => void;
+export declare const updatePropsJestWrapper: (viewDescriptors: SharedValue<Descriptor[]>, updates: AnimatedStyle<any>, animatedStyle: MutableRefObject<AnimatedStyle<any>>, adapters: ((updates: AnimatedStyle<any>) => void)[]) => void;
 export default updateProps;
 export interface UpdatePropsManager {
     update(viewDescriptors: SharedValue<Descriptor[]>, updates: StyleProps | AnimatedStyle<any>): void;

package/lib/typescript/ViewDescriptorsSet.d.ts

@@ -1,17 +1,8 @@
 import type { SharedValue } from './commonTypes';
 import type { Descriptor } from './hook/commonTypes';
-export interface ViewRefSet<T> {
-    items: Set<T>;
-    add: (item: T) => void;
-    remove: (item: T) => void;
-}
 export interface ViewDescriptorsSet {
     shareableViewDescriptors: SharedValue<Descriptor[]>;
     add: (item: Descriptor) => void;
     remove: (viewTag: number) => void;
 }
 export declare function makeViewDescriptorsSet(): ViewDescriptorsSet;
-export declare const useViewRefSet: typeof useViewRefSetJS | typeof useViewRefSetNative;
-declare function useViewRefSetNative(): undefined;
-declare function useViewRefSetJS<T>(): ViewRefSet<T>;
-export {};

package/lib/typescript/createAnimatedComponent/commonTypes.d.ts

@@ -1,12 +1,11 @@
 import type { Ref, Component } from 'react';
 import type { ShadowNodeWrapper, SharedValue, StyleProps } from '../commonTypes';
 import type { ViewConfig } from '../ConfigHelper';
-import type { ViewDescriptorsSet, ViewRefSet } from '../ViewDescriptorsSet';
+import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
 import type { BaseAnimationBuilder, EntryExitAnimationFunction, ILayoutAnimationBuilder, SharedTransition } from '../layoutReanimation';
 import type { SkipEnteringContext } from '../component/LayoutAnimationConfig';
 export interface AnimatedProps extends Record<string, unknown> {
     viewDescriptors?: ViewDescriptorsSet;
-    viewsRef?: ViewRefSet<unknown>;
     initial?: SharedValue<StyleProps>;
 }
 export interface ViewInfo {

package/lib/typescript/hook/commonTypes.d.ts

@@ -1,11 +1,12 @@
 import type { Component, MutableRefObject } from 'react';
 import type { AnimatedPropsAdapterFunction, ShadowNodeWrapper, SharedValue, WorkletFunction } from '../commonTypes';
 import type { ImageStyle, NativeSyntheticEvent, TextStyle, ViewStyle, NativeScrollEvent } from 'react-native';
-import type { ViewDescriptorsSet, ViewRefSet } from '../ViewDescriptorsSet';
+import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
 import type { AnimatedStyle } from '../helperTypes';
+import type { ReanimatedHTMLElement } from '../js-reanimated';
 export type DependencyList = Array<unknown> | undefined;
 export interface Descriptor {
-    tag: number;
+    tag: number | ReanimatedHTMLElement;
     name: string;
     shadowNodeWrapper: ShadowNodeWrapper;
 }
@@ -56,10 +57,6 @@ export interface AnimatedStyleHandle<Style extends DefaultStyle = DefaultStyle>
         value: AnimatedStyle<Style>;
         updater: () => AnimatedStyle<Style>;
     };
-    /**
-     * @remarks `viewsRef` is only defined in Web implementation.
-     */
-    viewsRef: ViewRefSet<unknown> | undefined;
 }
 export interface JestAnimatedStyleHandle<Style extends DefaultStyle = DefaultStyle> extends AnimatedStyleHandle<Style> {
     jestAnimatedStyle: MutableRefObject<AnimatedStyle<Style>>;

package/lib/typescript/hook/useWorkletCallback.d.ts

@@ -1,5 +1,5 @@
 import type { DependencyList } from './commonTypes';
 /**
- * @deprecated don't use
+ * @deprecated use React.useCallback instead
  */
 export declare function useWorkletCallback<Args extends unknown[], ReturnValue>(worklet: (...args: Args) => ReturnValue, deps?: DependencyList): (...args: Args) => ReturnValue;

package/lib/typescript/js-reanimated/index.d.ts

@@ -21,9 +21,7 @@ export interface ReanimatedHTMLElement extends HTMLElement {
     reanimatedDummy?: boolean;
     removedAfterAnimation?: boolean;
 }
-export declare const _updatePropsJS: (updates: StyleProps | AnimatedStyle<any>, viewRef: {
-    _component?: (JSReanimatedComponent | ReanimatedHTMLElement) & {
-        getAnimatableRef?: () => JSReanimatedComponent | ReanimatedHTMLElement;
-    };
+export declare const _updatePropsJS: (updates: StyleProps | AnimatedStyle<any>, viewRef: (JSReanimatedComponent | ReanimatedHTMLElement) & {
+    getAnimatableRef?: () => JSReanimatedComponent | ReanimatedHTMLElement;
 }, isAnimatedProps?: boolean) => void;
 export default reanimatedJS;

package/lib/typescript/js-reanimated/webUtils.d.ts

@@ -0,0 +1,3 @@
+export declare let createReactDOMStyle: (style: any) => any;
+export declare let createTransformValue: (transform: any) => any;
+export declare let createTextShadowValue: (style: any) => void | string;

package/lib/typescript/js-reanimated/webUtils.web.d.ts

@@ -0,0 +1,3 @@
+export declare let createReactDOMStyle: (style: any) => any;
+export declare let createTransformValue: (transform: any) => any;
+export declare let createTextShadowValue: (style: any) => void | string;

package/lib/typescript/layoutReanimation/defaultTransitions/CurvedTransition.d.ts

@@ -9,6 +9,7 @@ import type { EasingFunction } from '../../Easing';
  * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#fading-transition
  */
 export declare class CurvedTransition extends BaseAnimationBuilder implements ILayoutAnimationBuilder {
+    static presetName: string;
     easingXV: EasingFunction;
     easingYV: EasingFunction;
     easingWidthV: EasingFunction;

package/lib/typescript/layoutReanimation/defaultTransitions/EntryExitTransition.d.ts

@@ -1,6 +1,7 @@
 import type { ILayoutAnimationBuilder, LayoutAnimationFunction } from '../animationBuilder/commonTypes';
 import { BaseAnimationBuilder } from '../animationBuilder';
 export declare class EntryExitTransition extends BaseAnimationBuilder implements ILayoutAnimationBuilder {
+    static presetName: string;
     enteringV: BaseAnimationBuilder | typeof BaseAnimationBuilder;
     exitingV: BaseAnimationBuilder | typeof BaseAnimationBuilder;
     static createInstance<T extends typeof BaseAnimationBuilder>(this: T): InstanceType<T>;

package/lib/typescript/layoutReanimation/defaultTransitions/FadingTransition.d.ts

@@ -8,6 +8,7 @@ import { BaseAnimationBuilder } from '../animationBuilder';
  * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#fading-transition
  */
 export declare class FadingTransition extends BaseAnimationBuilder implements ILayoutAnimationBuilder {
+    static presetName: string;
     static createInstance<T extends typeof BaseAnimationBuilder>(this: T): InstanceType<T>;
     build: () => LayoutAnimationFunction;
 }

package/lib/typescript/layoutReanimation/defaultTransitions/JumpingTransition.d.ts

@@ -8,6 +8,7 @@ import { BaseAnimationBuilder } from '../animationBuilder';
  * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#jumping-transition
  */
 export declare class JumpingTransition extends BaseAnimationBuilder implements ILayoutAnimationBuilder {
+    static presetName: string;
     static createInstance<T extends typeof BaseAnimationBuilder>(this: T): InstanceType<T>;
     build: () => LayoutAnimationFunction;
 }

package/lib/typescript/layoutReanimation/defaultTransitions/LinearTransition.d.ts

@@ -9,6 +9,7 @@ import type { ILayoutAnimationBuilder, LayoutAnimationFunction } from '../animat
  * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#linear-transition
  */
 export declare class LinearTransition extends ComplexAnimationBuilder implements ILayoutAnimationBuilder {
+    static presetName: string;
     static createInstance<T extends typeof BaseAnimationBuilder>(this: T): InstanceType<T>;
     build: () => LayoutAnimationFunction;
 }

package/lib/typescript/layoutReanimation/defaultTransitions/SequencedTransition.d.ts

@@ -8,6 +8,7 @@ import { BaseAnimationBuilder } from '../animationBuilder';
  * @see https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#sequenced-transition
  */
 export declare class SequencedTransition extends BaseAnimationBuilder implements ILayoutAnimationBuilder {
+    static presetName: string;
     reversed: boolean;
     static createInstance<T extends typeof BaseAnimationBuilder>(this: T): InstanceType<T>;
     static reverse(): SequencedTransition;

package/lib/typescript/layoutReanimation/web/Easing.web.d.ts

@@ -0,0 +1,10 @@
+export declare const WebEasings: {
+    linear: number[];
+    ease: number[];
+    quad: number[];
+    cubic: number[];
+    sin: number[];
+    circle: number[];
+    exp: number[];
+};
+export type WebEasingsNames = keyof typeof WebEasings;

package/lib/typescript/layoutReanimation/web/animationParser.d.ts

@@ -11,7 +11,7 @@ export interface ReanimatedWebTransformProperties {
     skew?: string;
     skewX?: string;
 }
-interface AnimationStyle {
+export interface AnimationStyle {
     opacity?: number;
     transform?: ReanimatedWebTransformProperties[];
 }
@@ -28,4 +28,3 @@ export interface TransitionData {
     reversed?: boolean;
 }
 export declare function convertAnimationObjectToKeyframes(animationObject: AnimationData): string;
-export {};

package/lib/typescript/layoutReanimation/web/componentStyle.d.ts

@@ -11,4 +11,4 @@ export interface ScrollOffsets {
 }
 export declare const snapshots: WeakMap<HTMLElement, ReanimatedSnapshot>;
 export declare function makeElementVisible(element: HTMLElement, delay: number): void;
-export declare function setDummyPosition(dummy: HTMLElement, snapshot: ReanimatedSnapshot): void;
+export declare function setElementPosition(element: HTMLElement, snapshot: ReanimatedSnapshot): void;

package/lib/typescript/layoutReanimation/web/componentUtils.d.ts

@@ -1,9 +1,10 @@
-import type { AnimationConfig, AnimationNames, CustomConfig } from './config';
+import type { AnimationConfig, CustomConfig } from './config';
 import type { TransitionData } from './animationParser';
 import { LayoutAnimationType } from '../animationBuilder/commonTypes';
 export declare function getReducedMotionFromConfig(config: CustomConfig): boolean;
-export declare function getProcessedConfig(animationName: string, animationType: LayoutAnimationType, config: CustomConfig, initialAnimationName: AnimationNames): AnimationConfig;
+export declare function getProcessedConfig(animationName: string, animationType: LayoutAnimationType, config: CustomConfig): AnimationConfig;
+export declare function maybeModifyStyleForKeyframe(element: HTMLElement, config: CustomConfig): void;
 export declare function saveSnapshot(element: HTMLElement): void;
-export declare function setElementAnimation(element: HTMLElement, animationConfig: AnimationConfig): void;
+export declare function setElementAnimation(element: HTMLElement, animationConfig: AnimationConfig, shouldSavePosition?: boolean): void;
 export declare function handleLayoutTransition(element: HTMLElement, animationConfig: AnimationConfig, transitionData: TransitionData): void;
 export declare function handleExitingAnimation(element: HTMLElement, animationConfig: AnimationConfig): void;

package/lib/typescript/layoutReanimation/web/config.d.ts

@@ -1,7 +1,8 @@
 import type { ReduceMotion } from '../../commonTypes';
 import type { LayoutAnimationType } from '../animationBuilder/commonTypes';
-import type { AnimationData } from './animationParser';
+import type { AnimationData, AnimationStyle } from './animationParser';
 export type AnimationCallback = ((finished: boolean) => void) | null;
+export type KeyframeDefinitions = Record<number, AnimationStyle>;
 export interface AnimationConfig {
     animationName: string;
     animationType: LayoutAnimationType;
@@ -19,11 +20,13 @@ export interface CustomConfig {
     reduceMotionV?: ReduceMotion;
     callbackV?: AnimationCallback;
     reversed?: boolean;
+    definitions?: KeyframeDefinitions;
 }
 export declare enum TransitionType {
     LINEAR = 0,
     SEQUENCED = 1,
-    FADING = 2
+    FADING = 2,
+    JUMPING = 3
 }
 export declare const AnimationsData: Record<string, AnimationData>;
 export declare const Animations: {
@@ -340,15 +343,5 @@ export declare const Animations: {
         duration: number;
     };
 };
-export declare const WebEasings: {
-    linear: number[];
-    ease: number[];
-    quad: number[];
-    cubic: number[];
-    sin: number[];
-    circle: number[];
-    exp: number[];
-};
 export type AnimationNames = keyof typeof Animations;
 export type LayoutTransitionsNames = keyof typeof AnimationsData;
-export type WebEasingsNames = keyof typeof WebEasings;

package/lib/typescript/layoutReanimation/web/createAnimation.d.ts

@@ -1,5 +1,7 @@
 import { TransitionType } from './config';
+import type { KeyframeDefinitions } from './config';
 import type { TransitionData } from './animationParser';
+export declare function createCustomKeyFrameAnimation(keyframeDefinitions: KeyframeDefinitions): string;
 /**
  * Creates transition of given type, appends it to stylesheet and returns keyframe name.
  *

package/lib/typescript/layoutReanimation/web/domUtils.d.ts

@@ -4,6 +4,6 @@
  */
 export declare function configureWebLayoutAnimations(): void;
 export declare function insertWebAnimation(animationName: string, keyframe: string): void;
-export declare function scheduleAnimationCleanup(animationName: string, animationDuration: number): void;
+export declare function scheduleAnimationCleanup(animationName: string, animationDuration: number, animationRemoveCallback: () => void): void;
 export declare function addHTMLMutationObserver(): void;
 export declare function areDOMRectsEqual(r1: DOMRect, r2: DOMRect): boolean;

package/lib/typescript/layoutReanimation/web/transition/Jumping.web.d.ts

@@ -0,0 +1,29 @@
+import type { TransitionData } from '../animationParser';
+export declare function JumpingTransition(name: string, transitionData: TransitionData): {
+    name: string;
+    style: {
+        0: {
+            transform: {
+                translateX: string;
+                translateY: string;
+                scale: string;
+            }[];
+            easing: (t: number) => number;
+        };
+        50: {
+            transform: {
+                translateX: string;
+                translateY: string;
+                scale: string;
+            }[];
+        };
+        100: {
+            transform: {
+                translateX: string;
+                translateY: string;
+                scale: string;
+            }[];
+        };
+    };
+    duration: number;
+};

package/lib/typescript/platform-specific/jsVersion.d.ts

@@ -3,4 +3,4 @@
  * with the version used to build the native part of the library in runtime.
  * Remember to keep this in sync with the version declared in `package.json`
  */
-export declare const jsVersion = "3.13.0-rc.2";
+export declare const jsVersion = "3.13.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "3.13.0-rc.2",
+  "version": "3.13.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "test": "yarn format:js && yarn lint:js && yarn test:unit",
@@ -168,8 +168,9 @@
     }
   },
   "sideEffects": [
-    "./lib/reanimated2/core",
-    "./lib/index"
+    "./lib/module/reanimated2/layoutReanimation/animationsManager.js",
+    "./lib/module/reanimated2/core.js",
+    "./lib/module/index.js"
   ],
   "packageManager": "yarn@4.1.1"
 }

package/src/Colors.ts

@@ -522,7 +522,9 @@ export const rgbaColor = (
 ): number | string => {
   'worklet';
   if (IS_WEB || !_WORKLET) {
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    // Replace tiny values like 1.234e-11 with 0:
+    const safeAlpha = alpha < 0.001 ? 0 : alpha;
+    return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
   }
 
   const c =
@@ -701,9 +703,10 @@ export function convertToRGBA(color: unknown): ParsedColorArray {
 
 export function rgbaArrayToRGBAColor(RGBA: ParsedColorArray): string {
   'worklet';
+  const alpha = RGBA[3] < 0.001 ? 0 : RGBA[3];
   return `rgba(${Math.round(RGBA[0] * 255)}, ${Math.round(
     RGBA[1] * 255
-  )}, ${Math.round(RGBA[2] * 255)}, ${RGBA[3]})`;
+  )}, ${Math.round(RGBA[2] * 255)}, ${alpha})`;
 }
 
 export function toLinearSpace(

package/src/UpdateProps.ts

@@ -5,26 +5,24 @@ import { processColorsInProps } from './Colors';
 import type { ShadowNodeWrapper, SharedValue, StyleProps } from './commonTypes';
 import type { AnimatedStyle } from './helperTypes';
 import type { Descriptor } from './hook/commonTypes';
+import type { ReanimatedHTMLElement } from './js-reanimated';
 import { _updatePropsJS } from './js-reanimated';
 import { isFabric, isJest, shouldBeUseWeb } from './PlatformChecker';
-import type { ViewRefSet } from './ViewDescriptorsSet';
 import { runOnUIImmediately } from './threads';
 
 let updateProps: (
   viewDescriptor: SharedValue<Descriptor[]>,
   updates: StyleProps | AnimatedStyle<any>,
-  maybeViewRef: ViewRefSet<any> | undefined,
   isAnimatedProps?: boolean
 ) => void;
 
 if (shouldBeUseWeb()) {
-  updateProps = (_, updates, maybeViewRef, isAnimatedProps) => {
+  updateProps = (viewDescriptors, updates, isAnimatedProps) => {
     'worklet';
-    if (maybeViewRef) {
-      maybeViewRef.items.forEach((item, _index) => {
-        _updatePropsJS(updates, item, isAnimatedProps);
-      });
-    }
+    viewDescriptors.value?.forEach((viewDescriptor) => {
+      const component = viewDescriptor.tag as ReanimatedHTMLElement;
+      _updatePropsJS(updates, component, isAnimatedProps);
+    });
   };
 } else {
   updateProps = (viewDescriptors, updates) => {
@@ -37,7 +35,6 @@ if (shouldBeUseWeb()) {
 export const updatePropsJestWrapper = (
   viewDescriptors: SharedValue<Descriptor[]>,
   updates: AnimatedStyle<any>,
-  maybeViewRef: ViewRefSet<any> | undefined,
   animatedStyle: MutableRefObject<AnimatedStyle<any>>,
   adapters: ((updates: AnimatedStyle<any>) => void)[]
 ): void => {
@@ -49,7 +46,7 @@ export const updatePropsJestWrapper = (
     ...updates,
   };
 
-  updateProps(viewDescriptors, updates, maybeViewRef);
+  updateProps(viewDescriptors, updates);
 };
 
 export default updateProps;
@@ -98,7 +95,7 @@ const createUpdatePropsManager = isFabric()
         ) {
           viewDescriptors.value.forEach((viewDescriptor) => {
             operations.push({
-              tag: viewDescriptor.tag,
+              tag: viewDescriptor.tag as number,
               name: viewDescriptor.name || 'RCTView',
               updates,
             });