diff --git a/package/src/external/reanimated/renderHelpers.ts b/package/src/external/reanimated/renderHelpers.ts index d856d1b7ba..d9845cdcfa 100644 --- a/package/src/external/reanimated/renderHelpers.ts +++ b/package/src/external/reanimated/renderHelpers.ts @@ -15,6 +15,13 @@ import { const _bindings = new WeakMap, unknown>(); +export const unbindReanimatedNode = (node: Node) => { + const previousMapperId = _bindings.get(node); + if (previousMapperId !== undefined) { + stopMapper(previousMapperId as number); + } +}; + export function extractReanimatedProps(props: AnimatedProps) { if (!HAS_REANIMATED3 && !HAS_REANIMATED2) { return [props, {}]; @@ -76,7 +83,7 @@ export function bindReanimatedProps( node: Node, reanimatedProps: AnimatedProps ) { - if (HAS_REANIMATED2) { + if (HAS_REANIMATED2 && !HAS_REANIMATED3) { return bindReanimatedProps2(container, node, reanimatedProps); } if (!HAS_REANIMATED3) { @@ -92,8 +99,10 @@ export function bindReanimatedProps( const { SkiaViewApi } = global; const mapperId = startMapper(() => { "worklet"; - for (const propName in reanimatedProps) { - node && node.setProp(propName, reanimatedProps[propName].value); + if (node) { + for (const propName in reanimatedProps) { + node.setProp(propName, reanimatedProps[propName].value); + } } // On React Native we use the SkiaViewApi to redraw because it can // run on the worklet thread (container.redraw can't) diff --git a/package/src/renderer/HostConfig.ts b/package/src/renderer/HostConfig.ts index f461be4e54..0a1073852c 100644 --- a/package/src/renderer/HostConfig.ts +++ b/package/src/renderer/HostConfig.ts @@ -7,6 +7,7 @@ import type { SkiaValue } from "../values"; import { bindReanimatedProps, extractReanimatedProps, + unbindReanimatedNode, } from "../external/reanimated/renderHelpers"; import type { Container } from "./Container"; @@ -56,6 +57,7 @@ const appendNode = (parent: Node, child: Node) => { }; const removeNode = (parent: Node, child: Node) => { + unbindReanimatedNode(child); return parent.removeChild(child); };