diff --git a/packages/react-native-reanimated/src/UpdateProps.ts b/packages/react-native-reanimated/src/UpdateProps.ts index 6f0b850fd05..2f0941c8f12 100644 --- a/packages/react-native-reanimated/src/UpdateProps.ts +++ b/packages/react-native-reanimated/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, updates: StyleProps | AnimatedStyle, - maybeViewRef: ViewRefSet | 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, updates: AnimatedStyle, - maybeViewRef: ViewRefSet | undefined, animatedStyle: MutableRefObject>, adapters: ((updates: AnimatedStyle) => 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, }); diff --git a/packages/react-native-reanimated/src/ViewDescriptorsSet.ts b/packages/react-native-reanimated/src/ViewDescriptorsSet.ts index 1e8858ff988..796c521d2c9 100644 --- a/packages/react-native-reanimated/src/ViewDescriptorsSet.ts +++ b/packages/react-native-reanimated/src/ViewDescriptorsSet.ts @@ -1,15 +1,7 @@ 'use strict'; -import { useRef } from 'react'; import { makeMutable } from './core'; import type { SharedValue } from './commonTypes'; import type { Descriptor } from './hook/commonTypes'; -import { shouldBeUseWeb } from './PlatformChecker'; - -export interface ViewRefSet { - items: Set; - add: (item: T) => void; - remove: (item: T) => void; -} export interface ViewDescriptorsSet { shareableViewDescriptors: SharedValue; @@ -51,37 +43,3 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet { }; return data; } - -const SHOULD_BE_USE_WEB = shouldBeUseWeb(); - -export const useViewRefSet = SHOULD_BE_USE_WEB - ? useViewRefSetJS - : useViewRefSetNative; - -function useViewRefSetNative() { - // Stub native implementation. - return undefined; -} - -function useViewRefSetJS(): ViewRefSet { - const ref = useRef | null>(null); - if (ref.current === null) { - const data: ViewRefSet = { - items: new Set(), - - add: (item: T) => { - if (data.items.has(item)) { - return; - } - data.items.add(item); - }, - - remove: (item: T) => { - data.items.delete(item); - }, - }; - ref.current = data; - } - - return ref.current; -} diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/InlinePropManager.ts b/packages/react-native-reanimated/src/createAnimatedComponent/InlinePropManager.ts index f6b382aafd5..70df5cc53e2 100644 --- a/packages/react-native-reanimated/src/createAnimatedComponent/InlinePropManager.ts +++ b/packages/react-native-reanimated/src/createAnimatedComponent/InlinePropManager.ts @@ -8,14 +8,11 @@ import type { } from './commonTypes'; import { flattenArray } from './utils'; import { makeViewDescriptorsSet } from '../ViewDescriptorsSet'; -import type { ViewDescriptorsSet, ViewRefSet } from '../ViewDescriptorsSet'; +import type { ViewDescriptorsSet } from '../ViewDescriptorsSet'; import { adaptViewConfig } from '../ConfigHelper'; import updateProps from '../UpdateProps'; import { stopMapper, startMapper } from '../mappers'; import { isSharedValue } from '../isSharedValue'; -import { shouldBeUseWeb } from '../PlatformChecker'; - -const SHOULD_BE_USE_WEB = shouldBeUseWeb(); function isInlineStyleTransform(transform: unknown): boolean { if (!Array.isArray(transform)) { @@ -160,13 +157,10 @@ export class InlinePropManager implements IInlinePropManager { const shareableViewDescriptors = this._inlinePropsViewDescriptors.shareableViewDescriptors; - const maybeViewRef = SHOULD_BE_USE_WEB - ? ({ items: new Set([animatedComponent]) } as ViewRefSet) // see makeViewsRefSet - : undefined; const updaterFunction = () => { 'worklet'; const update = getInlinePropsUpdate(newInlineProps); - updateProps(shareableViewDescriptors, update, maybeViewRef); + updateProps(shareableViewDescriptors, update); }; this._inlineProps = newInlineProps; if (this._inlinePropsMapperId) { diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx b/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx index 3378bc21235..e1d9493989a 100644 --- a/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx +++ b/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx @@ -47,8 +47,6 @@ export class PropsFilter implements IPropsFilter { const processedStyle: StyleProps = styles.map((style) => { if (style && style.viewDescriptors) { // this is how we recognize styles returned by useAnimatedStyle - // TODO - refactor, since `viewsRef` is only present on Web - style.viewsRef?.add(component); if (this._requiresNewInitials) { this._initialStyle = { ...style.initial.value, @@ -72,8 +70,6 @@ export class PropsFilter implements IPropsFilter { Object.keys(animatedProp.initial.value).forEach((initialValueKey) => { props[initialValueKey] = animatedProp.initial?.value[initialValueKey]; - // TODO - refacotr, since `viewsRef` is only present on Web - animatedProp.viewsRef?.add(component); }); } } else if ( diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/commonTypes.ts b/packages/react-native-reanimated/src/createAnimatedComponent/commonTypes.ts index 982c71b9db3..110cd86d263 100644 --- a/packages/react-native-reanimated/src/createAnimatedComponent/commonTypes.ts +++ b/packages/react-native-reanimated/src/createAnimatedComponent/commonTypes.ts @@ -6,7 +6,7 @@ import type { StyleProps, } from '../commonTypes'; import type { ViewConfig } from '../ConfigHelper'; -import type { ViewDescriptorsSet, ViewRefSet } from '../ViewDescriptorsSet'; +import type { ViewDescriptorsSet } from '../ViewDescriptorsSet'; import type { BaseAnimationBuilder, EntryExitAnimationFunction, @@ -17,7 +17,6 @@ import type { SkipEnteringContext } from '../component/LayoutAnimationConfig'; export interface AnimatedProps extends Record { viewDescriptors?: ViewDescriptorsSet; - viewsRef?: ViewRefSet; initial?: SharedValue; } diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx b/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx index 6c3d81d4791..577b4a74e61 100644 --- a/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx +++ b/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx @@ -239,11 +239,7 @@ export function createAnimatedComponent( } _detachStyles() { - if (IS_WEB && this._styles !== null) { - for (const style of this._styles) { - style.viewsRef.remove(this); - } - } else if (this._componentViewTag !== -1 && this._styles !== null) { + if (this._componentViewTag !== -1 && this._styles !== null) { for (const style of this._styles) { style.viewDescriptors.remove(this._componentViewTag); } diff --git a/packages/react-native-reanimated/src/hook/commonTypes.ts b/packages/react-native-reanimated/src/hook/commonTypes.ts index c7fb9879bc5..a56ee922c23 100644 --- a/packages/react-native-reanimated/src/hook/commonTypes.ts +++ b/packages/react-native-reanimated/src/hook/commonTypes.ts @@ -13,13 +13,14 @@ import type { 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 | undefined; export interface Descriptor { - tag: number; + tag: number | ReanimatedHTMLElement; name: string; shadowNodeWrapper: ShadowNodeWrapper; } @@ -96,10 +97,6 @@ export interface AnimatedStyleHandle< value: AnimatedStyle