diff --git a/packages/react-native-reanimated/src/updateProps/updateProps.ts b/packages/react-native-reanimated/src/updateProps/updateProps.ts index 3cb89d17fc0..4c814b83fdf 100644 --- a/packages/react-native-reanimated/src/updateProps/updateProps.ts +++ b/packages/react-native-reanimated/src/updateProps/updateProps.ts @@ -15,8 +15,8 @@ import { isFabric, isJest, shouldBeUseWeb } from '../PlatformChecker'; import type { ReanimatedHTMLElement } from '../ReanimatedModule/js-reanimated'; import { _updatePropsJS } from '../ReanimatedModule/js-reanimated'; import { runOnJS, runOnUIImmediately } from '../threads'; -import { processTransformOrigin } from './processTransformOrigin'; import { ComponentRegistry } from './ComponentRegistry'; +import { processTransformOrigin } from './processTransformOrigin'; let updateProps: ( viewDescriptors: ViewDescriptorsWrapper, @@ -76,15 +76,31 @@ export const updatePropsJestWrapper = ( export default updateProps; -// Apply thr changes from UI thread to JS thread.Add commentMore actions +let updatesToReactJS: { [tag: string]: StyleProps } = {}; + +function flushUpdatesToReactJS() { + Object.keys(updatesToReactJS).forEach((tagStr) => { + const tag = Number(tagStr); + const props = updatesToReactJS[tag]; + const component = ComponentRegistry.getComponent(tag); + if (component) { + component._updateReanimatedProps(props); + } + }) + updatesToReactJS = {} +} + +let timeoutId: NodeJS.Timeout | undefined; +// Apply the changes from UI thread to JS thread. function updatePropsOnReactJS(tag: number, props: StyleProps) { - const component = ComponentRegistry.getComponent(tag); - if (component) { - component._updateReanimatedProps(props); + updatesToReactJS[tag] = { + ...updatesToReactJS[tag], + ...props, } + clearTimeout(timeoutId); + timeoutId = setTimeout(flushUpdatesToReactJS, 0) ; } - const createUpdatePropsManager = isFabric() ? () => { 'worklet';