react-native-reanimated 4.0.3 → 4.1.0-jsx-fix

package/src/createAnimatedComponent/commonTypes.ts

@@ -1,5 +1,5 @@
 'use strict';
-import type { Component, MutableRefObject, Ref } from 'react';
+import type { Component, Ref, RefObject } from 'react';
 
 import type {
   AnimatedStyle,
@@ -8,6 +8,7 @@ import type {
   ShadowNodeWrapper,
   SharedValue,
   StyleProps,
+  StyleUpdaterContainer,
 } from '../commonTypes';
 import type { SkipEnteringContext } from '../component/LayoutAnimationConfig';
 import type { BaseAnimationBuilder } from '../layoutReanimation';
@@ -16,11 +17,18 @@ import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
 export interface AnimatedProps extends Record<string, unknown> {
   viewDescriptors?: ViewDescriptorsSet;
   initial?: SharedValue<StyleProps>;
+  styleUpdaterContainer?: StyleUpdaterContainer;
 }
 
 export interface ViewInfo {
   viewTag: number | AnimatedComponentRef | HTMLElement | null;
   shadowNodeWrapper: ShadowNodeWrapper | null;
+  // This is a React host instance view name which might differ from the
+  // Fabric component name. For clarity, we use the viewName property
+  // here and componentName in C++ after converting react viewName to
+  // Fabric component name.
+  // (see react/renderer/componentregistry/componentNameByReactViewName.cpp)
+  viewName?: string;
   DOMElement?: HTMLElement | null;
 }
 
@@ -74,7 +82,7 @@ export type AnimatedComponentProps<
   ref?: Ref<Component>;
   style?: NestedArray<StyleProps>;
   animatedProps?: Partial<AnimatedComponentProps<AnimatedProps>>;
-  jestAnimatedValues?: MutableRefObject<AnimatedProps>;
+  jestAnimatedValues?: RefObject<AnimatedProps>;
   animatedStyle?: StyleProps;
   layout?: (
     | BaseAnimationBuilder
@@ -115,28 +123,34 @@ export interface AnimatedComponentRef extends Component {
   elementRef?: React.RefObject<HTMLElement>;
 }
 
-export interface IAnimatedComponentInternal {
+export interface IAnimatedComponentInternalBase {
   ChildComponent: AnyComponent;
+  _componentRef: AnimatedComponentRef | HTMLElement | null;
+  _hasAnimatedRef: boolean;
+  _viewInfo?: ViewInfo;
+
+  /**
+   * Used for Layout Animations and Animated Styles. It is not related to event
+   * handling.
+   */
+  getComponentViewTag: () => number;
+}
+
+export interface IAnimatedComponentInternal
+  extends IAnimatedComponentInternalBase {
   _animatedStyles: StyleProps[];
   _prevAnimatedStyles: StyleProps[];
-  _animatedProps?: Partial<AnimatedComponentProps<AnimatedProps>>;
+  _animatedProps: Partial<AnimatedComponentProps<AnimatedProps>>[];
+  _prevAnimatedProps: Partial<AnimatedComponentProps<AnimatedProps>>[];
   _isFirstRender: boolean;
   jestInlineStyle: NestedArray<StyleProps> | undefined;
   jestAnimatedStyle: { value: StyleProps };
   jestAnimatedProps: { value: AnimatedProps };
-  _componentRef: AnimatedComponentRef | HTMLElement | null;
-  _hasAnimatedRef: boolean;
   _InlinePropManager: IInlinePropManager;
   _PropsFilter: IPropsFilter;
   /** Doesn't exist on web. */
   _NativeEventsManager?: INativeEventsManager;
-  _viewInfo?: ViewInfo;
   context: React.ContextType<typeof SkipEnteringContext>;
-  /**
-   * Used for Layout Animations and Animated Styles. It is not related to event
-   * handling.
-   */
-  getComponentViewTag: () => number;
   setNativeProps: (props: StyleProps) => void;
 }
 

package/src/createAnimatedComponent/createAnimatedComponent.tsx

@@ -8,7 +8,7 @@ import type {
 import React from 'react';
 import type { FlatList, FlatListProps } from 'react-native';
 
-import type { AnimateProps } from '../helperTypes';
+import type { AnimatedProps } from '../helperTypes';
 import type { Options } from './AnimatedComponent';
 import AnimatedComponentImpl from './AnimatedComponent';
 import type {
@@ -33,19 +33,19 @@ type AnimatableComponent<C extends ComponentType<any>> = C & {
 export function createAnimatedComponent<P extends object>(
   component: AnimatableComponent<FunctionComponent<P>>,
   options?: Options<P>
-): FunctionComponent<AnimateProps<P>>;
+): FunctionComponent<AnimatedProps<P>>;
 
 export function createAnimatedComponent<P extends object>(
   component: AnimatableComponent<ComponentClass<P>>,
   options?: Options<P>
-): ComponentClass<AnimateProps<P>>;
+): ComponentClass<AnimatedProps<P>>;
 
 export function createAnimatedComponent<P extends object>(
   // Actually ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P> but we need this overload too
   // since some external components (like FastImage) are typed just as ComponentType
   component: AnimatableComponent<ComponentType<P>>,
   options?: Options<P>
-): FunctionComponent<AnimateProps<P>> | ComponentClass<AnimateProps<P>>;
+): FunctionComponent<AnimatedProps<P>> | ComponentClass<AnimatedProps<P>>;
 
 /**
  * @deprecated Please use `Animated.FlatList` component instead of calling
@@ -55,7 +55,7 @@ export function createAnimatedComponent<P extends object>(
 export function createAnimatedComponent(
   component: AnimatableComponent<typeof FlatList<unknown>>,
   options?: Options<typeof FlatList<unknown>>
-): ComponentClass<AnimateProps<FlatListProps<unknown>>>;
+): ComponentClass<AnimatedProps<FlatListProps<unknown>>>;
 
 export function createAnimatedComponent(
   Component: AnimatableComponent<ComponentType<InitialComponentProps>>,

package/src/createAnimatedComponent/getViewInfo.ts

@@ -7,7 +7,9 @@ export function getViewInfo(element: HostInstance): {
   viewTag?: number;
 } {
   return {
-    viewName: element?._viewConfig?.uiViewClassName as string,
+    viewName: (element?._viewConfig?.uiViewClassName ??
+      element?.__internalInstanceHandle?.type ??
+      element?.__internalInstanceHandle?.elementType) as string,
     viewTag: element?.__nativeTag,
   };
 }

package/src/createAnimatedComponent/utils.ts

@@ -36,18 +36,17 @@ export const has = <K extends string>(
   return false;
 };
 
-export function filterStyles(styles: StyleProps[] | undefined): {
-  cssStyle: CSSStyle;
+type FilteredStyles = {
+  cssStyle: CSSStyle | null;
   animatedStyles: StyleProps[];
-} {
+};
+
+export function filterStyles(styles: StyleProps[] | undefined): FilteredStyles {
   if (!styles) {
-    return { animatedStyles: [], cssStyle: {} };
+    return { animatedStyles: [], cssStyle: null };
   }
 
-  return styles.reduce<{
-    cssStyle: CSSStyle;
-    animatedStyles: StyleProps[];
-  }>(
+  return styles.reduce<FilteredStyles>(
     ({ animatedStyles, cssStyle }, style) => {
       if (style?.viewDescriptors) {
         animatedStyles.push(style);
@@ -56,6 +55,6 @@ export function filterStyles(styles: StyleProps[] | undefined): {
       }
       return { animatedStyles, cssStyle };
     },
-    { animatedStyles: [], cssStyle: {} }
+    { animatedStyles: [], cssStyle: null }
   );
 }

package/src/css/component/AnimatedComponent.tsx

@@ -5,16 +5,17 @@ import type { StyleProp } from 'react-native';
 import { Platform, StyleSheet } from 'react-native';
 
 import { IS_JEST, ReanimatedError, SHOULD_BE_USE_WEB } from '../../common';
-import type { ShadowNodeWrapper } from '../../commonTypes';
+import type { ShadowNodeWrapper, WrapperRef } from '../../commonTypes';
 import type {
   AnimatedComponentRef,
+  IAnimatedComponentInternalBase,
   ViewInfo,
 } from '../../createAnimatedComponent/commonTypes';
 import { getViewInfo } from '../../createAnimatedComponent/getViewInfo';
 import { getShadowNodeWrapperFromRef } from '../../fabricUtils';
 import { findHostInstance } from '../../platform-specific/findHostInstance';
-import { CSSManager } from '../managers';
-import { markNodeAsRemovable, unmarkNodeAsRemovable } from '../platform/native';
+import { markNodeAsRemovable, unmarkNodeAsRemovable } from '../native';
+import { CSSManager } from '../platform';
 import type { AnyComponent, AnyRecord, CSSStyle, PlainStyle } from '../types';
 import { filterNonCSSStyleProps } from './utils';
 
@@ -27,8 +28,11 @@ export type AnimatedComponentProps = Record<string, unknown> & {
 // private/protected ones when possible (when changes from this repo are merged
 // to the main one)
 export default class AnimatedComponent<
-  P extends AnyRecord = AnimatedComponentProps,
-> extends Component<P> {
+    P extends AnyRecord = AnimatedComponentProps,
+  >
+  extends Component<P>
+  implements IAnimatedComponentInternalBase
+{
   ChildComponent: AnyComponent;
 
   _CSSManager?: CSSManager;
@@ -62,6 +66,7 @@ export default class AnimatedComponent<
     let viewTag: number | typeof this._componentRef;
     let shadowNodeWrapper: ShadowNodeWrapper | null = null;
     let DOMElement: HTMLElement | null = null;
+    let viewName: string | undefined;
 
     if (SHOULD_BE_USE_WEB) {
       // At this point we assume that `_setComponentRef` was already called and `_component` is set.
@@ -84,9 +89,13 @@ export default class AnimatedComponent<
 
       const viewInfo = getViewInfo(hostInstance);
       viewTag = viewInfo.viewTag ?? -1;
-      shadowNodeWrapper = getShadowNodeWrapperFromRef(this, hostInstance);
+      viewName = viewInfo.viewName;
+      shadowNodeWrapper = getShadowNodeWrapperFromRef(
+        this as WrapperRef,
+        hostInstance
+      );
     }
-    this._viewInfo = { viewTag, shadowNodeWrapper };
+    this._viewInfo = { viewTag, shadowNodeWrapper, viewName };
     if (DOMElement) {
       this._viewInfo.DOMElement = DOMElement;
     }
@@ -199,8 +208,7 @@ export default class AnimatedComponent<
 
     return (
       <ChildComponent
-        {...this.props}
-        {...props}
+        {...(props ?? this.props)}
         {...platformProps}
         style={filterNonCSSStyleProps(props?.style ?? this.props.style)}
         // Casting is used here, because ref can be null - in that case it cannot be assigned to HTMLElement.

package/src/css/constants/settings.ts

@@ -1,5 +1,5 @@
 'use strict';
-import type { PredefinedTimingFunction, StepsModifier } from '../easings';
+import type { PredefinedTimingFunction, StepsModifier } from '../easing';
 import type { CSSAnimationProp, CSSTransitionProp } from '../types';
 
 export const ANIMATION_PROPS: CSSAnimationProp[] = [

package/src/css/index.ts

@@ -1,6 +1,6 @@
 'use strict';
 export { createAnimatedComponent } from './component';
-export { cubicBezier, linear, steps } from './easings';
+export { cubicBezier, linear, steps } from './easing';
 export * from './stylesheet';
 export type {
   CSSAnimationDelay,

package/src/css/models/index.ts

@@ -1,2 +1,2 @@
 'use strict';
-export { default as CSSKeyframesRuleImpl } from './CSSKeyframesRule';
+export { default as CSSKeyframesRuleBase } from './CSSKeyframesRuleBase';

package/src/css/native/index.ts

@@ -0,0 +1,8 @@
+'use strict';
+export * from './keyframes';
+export * from './managers';
+export * from './normalization';
+export * from './proxy';
+export * from './registry';
+export * from './style';
+export type * from './types';

package/src/css/native/keyframes/CSSKeyframesRegistry.ts

@@ -0,0 +1,99 @@
+'use strict';
+import { registerCSSKeyframes, unregisterCSSKeyframes } from '../proxy';
+import type CSSKeyframesRuleImpl from './CSSKeyframesRuleImpl';
+
+type KeyframesEntry = {
+  keyframesRule: CSSKeyframesRuleImpl;
+  usedBy: Record<string, Set<number>>;
+};
+
+/**
+ * This class is responsible for managing the registry of CSS animation
+ * keyframes. It keeps track of views that use specific animations and handles
+ * native-side registration. Animation keyframes are registered on the native
+ * side only when used for the first time and unregistered when removed from the
+ * last view that uses them.
+ */
+class CSSKeyframesRegistry {
+  private readonly cssTextToNameMap_: Map<string, string> = new Map();
+  private readonly nameToKeyframes_: Map<string, KeyframesEntry> = new Map();
+
+  get(nameOrCssText: string) {
+    const result = this.nameToKeyframes_.get(nameOrCssText);
+    if (result) {
+      return result.keyframesRule;
+    }
+
+    const animationName = this.cssTextToNameMap_.get(nameOrCssText);
+    if (animationName) {
+      return this.nameToKeyframes_.get(animationName)?.keyframesRule;
+    }
+  }
+
+  add(keyframesRule: CSSKeyframesRuleImpl, viewName: string, viewTag: number) {
+    const existingKeyframesEntry = this.nameToKeyframes_.get(
+      keyframesRule.name
+    );
+    const existingComponentEntry = existingKeyframesEntry?.usedBy[viewName];
+
+    if (existingComponentEntry) {
+      // Just add the view tag to the existing component entry if keyframes
+      // for the specific animation and component name are already registered
+      existingComponentEntry.add(viewTag);
+      return;
+    }
+
+    // Otherwise, we have to register keyframes preprocessed for the specific
+    // component name
+    if (existingKeyframesEntry) {
+      existingKeyframesEntry.usedBy[viewName] = new Set([viewTag]);
+    } else {
+      this.nameToKeyframes_.set(keyframesRule.name, {
+        keyframesRule,
+        usedBy: { [viewName]: new Set([viewTag]) },
+      });
+    }
+
+    // Store the keyframes to name mapping in order to reuse the same
+    // animation name when possible (when the same inline keyframes object
+    // is used)
+    this.cssTextToNameMap_.set(keyframesRule.cssText, keyframesRule.name);
+
+    // Register animation keyframes only if they are not already registered
+    // (when they are added for the first time)
+    registerCSSKeyframes(
+      keyframesRule.name,
+      viewName,
+      keyframesRule.getNormalizedKeyframesConfig(viewName)
+    );
+  }
+
+  remove(animationName: string, viewName: string, viewTag: number) {
+    const keyframesEntry = this.nameToKeyframes_.get(animationName);
+    if (!keyframesEntry) {
+      return;
+    }
+
+    const componentEntry = keyframesEntry.usedBy[viewName];
+    componentEntry.delete(viewTag);
+
+    if (componentEntry.size === 0) {
+      delete keyframesEntry.usedBy[viewName];
+      unregisterCSSKeyframes(animationName, viewName);
+    }
+
+    if (Object.keys(keyframesEntry.usedBy).length === 0) {
+      this.nameToKeyframes_.delete(animationName);
+      this.cssTextToNameMap_.delete(keyframesEntry.keyframesRule.cssText);
+    }
+  }
+
+  clear() {
+    this.nameToKeyframes_.clear();
+    this.cssTextToNameMap_.clear();
+  }
+}
+
+const cssKeyframesRegistry = new CSSKeyframesRegistry();
+
+export default cssKeyframesRegistry;

package/src/css/native/keyframes/CSSKeyframesRuleImpl.ts

@@ -0,0 +1,32 @@
+'use strict';
+import { CSSKeyframesRuleBase } from '../../models';
+import type { CSSAnimationKeyframes, PlainStyle } from '../../types';
+import { normalizeAnimationKeyframes } from '../normalization';
+import { getStyleBuilder } from '../registry';
+import type { NormalizedCSSAnimationKeyframesConfig } from '../types';
+
+export default class CSSKeyframesRuleImpl<
+  S extends PlainStyle = PlainStyle,
+> extends CSSKeyframesRuleBase<S> {
+  private readonly normalizedKeyframesCache_: Record<
+    string,
+    NormalizedCSSAnimationKeyframesConfig
+  > = {};
+
+  constructor(keyframes: CSSAnimationKeyframes<S>, cssText?: string) {
+    super(keyframes, cssText);
+  }
+
+  getNormalizedKeyframesConfig(
+    viewName: string
+  ): NormalizedCSSAnimationKeyframesConfig {
+    if (!this.normalizedKeyframesCache_[viewName]) {
+      this.normalizedKeyframesCache_[viewName] = normalizeAnimationKeyframes(
+        this.cssRules,
+        getStyleBuilder(viewName)
+      );
+    }
+
+    return this.normalizedKeyframesCache_[viewName];
+  }
+}

package/src/css/{registry → native/keyframes}/index.ts

@@ -1,2 +1,3 @@
 'use strict';
 export { default as cssKeyframesRegistry } from './CSSKeyframesRegistry';
+export { default as CSSKeyframesRuleImpl } from './CSSKeyframesRuleImpl';

package/src/css/{managers → native/managers}/CSSAnimationsManager.ts

@@ -1,23 +1,21 @@
 'use strict';
-import type { ShadowNodeWrapper } from '../../commonTypes';
-import { CSSKeyframesRuleImpl } from '../models';
+import type { ShadowNodeWrapper } from '../../../commonTypes';
 import type {
-  CSSAnimationUpdates,
-  NormalizedSingleCSSAnimationSettings,
-} from '../platform/native';
+  CSSAnimationKeyframes,
+  ExistingCSSAnimationProperties,
+  ICSSAnimationsManager,
+} from '../../types';
+import { cssKeyframesRegistry, CSSKeyframesRuleImpl } from '../keyframes';
 import {
-  applyCSSAnimations,
   createSingleCSSAnimationProperties,
   getAnimationSettingsUpdates,
   normalizeSingleCSSAnimationSettings,
-  unregisterCSSAnimations,
-} from '../platform/native';
-import { cssKeyframesRegistry } from '../registry';
+} from '../normalization';
+import { applyCSSAnimations, unregisterCSSAnimations } from '../proxy';
 import type {
-  CSSAnimationKeyframes,
-  ExistingCSSAnimationProperties,
+  CSSAnimationUpdates,
+  NormalizedSingleCSSAnimationSettings,
 } from '../types';
-import type { ICSSAnimationsManager } from '../types/interfaces';
 
 type ProcessedAnimation = {
   normalizedSettings: NormalizedSingleCSSAnimationSettings;
@@ -25,14 +23,20 @@ type ProcessedAnimation = {
 };
 
 export default class CSSAnimationsManager implements ICSSAnimationsManager {
-  private readonly viewTag: number;
   private readonly shadowNodeWrapper: ShadowNodeWrapper;
+  private readonly viewName: string;
+  private readonly viewTag: number;
 
   private attachedAnimations: ProcessedAnimation[] = [];
 
-  constructor(shadowNodeWrapper: ShadowNodeWrapper, viewTag: number) {
-    this.viewTag = viewTag;
+  constructor(
+    shadowNodeWrapper: ShadowNodeWrapper,
+    viewName: string,
+    viewTag: number
+  ) {
     this.shadowNodeWrapper = shadowNodeWrapper;
+    this.viewName = viewName;
+    this.viewTag = viewTag;
   }
 
   update(animationProperties: ExistingCSSAnimationProperties | null): void {
@@ -77,7 +81,7 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
 
     // Register keyframes for all new animations
     processedAnimations.forEach(({ keyframesRule }) => {
-      cssKeyframesRegistry.add(keyframesRule, this.viewTag);
+      cssKeyframesRegistry.add(keyframesRule, this.viewName, this.viewTag);
       newAnimationNames.add(keyframesRule.name);
     });
 
@@ -85,7 +89,7 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
     // to the view
     this.attachedAnimations.forEach(({ keyframesRule: { name } }) => {
       if (!newAnimationNames.has(name)) {
-        cssKeyframesRegistry.remove(name, this.viewTag);
+        cssKeyframesRegistry.remove(name, this.viewName, this.viewTag);
       }
     });
   }
@@ -94,7 +98,7 @@ export default class CSSAnimationsManager implements ICSSAnimationsManager {
     // Unregister keyframes usage by the view (it is necessary to clean up
     // keyframes from the CPP registry once all views that use them are unmounted)
     this.attachedAnimations.forEach(({ keyframesRule: { name } }) => {
-      cssKeyframesRegistry.remove(name, this.viewTag);
+      cssKeyframesRegistry.remove(name, this.viewName, this.viewTag);
     });
   }
 

package/src/css/{managers → native/managers}/CSSManager.ts

@@ -1,10 +1,13 @@
 'use strict';
-import type { ShadowNodeWrapper } from '../../commonTypes';
-import type { ViewInfo } from '../../createAnimatedComponent/commonTypes';
-import { setViewStyle, styleBuilder } from '../platform/native';
-import type { CSSStyle } from '../types';
-import type { ICSSManager } from '../types/interfaces';
-import { filterCSSAndStyleProperties } from '../utils';
+import { ReanimatedError } from '../../../common';
+import type { ShadowNodeWrapper } from '../../../commonTypes';
+import type { ViewInfo } from '../../../createAnimatedComponent/commonTypes';
+import type { AnyRecord, CSSStyle } from '../../types';
+import type { ICSSManager } from '../../types/interfaces';
+import { filterCSSAndStyleProperties } from '../../utils';
+import { setViewStyle } from '../proxy';
+import { getStyleBuilder, hasStyleBuilder } from '../registry';
+import type { StyleBuilder } from '../style';
 import CSSAnimationsManager from './CSSAnimationsManager';
 import CSSTransitionsManager from './CSSTransitionsManager';
 
@@ -12,20 +15,37 @@ export default class CSSManager implements ICSSManager {
   private readonly cssAnimationsManager: CSSAnimationsManager;
   private readonly cssTransitionsManager: CSSTransitionsManager;
   private readonly viewTag: number;
+  private readonly viewName: string;
+  private readonly styleBuilder: StyleBuilder<AnyRecord> | null = null;
   private isFirstUpdate: boolean = true;
 
-  constructor({ shadowNodeWrapper, viewTag }: ViewInfo) {
+  constructor({ shadowNodeWrapper, viewTag, viewName = 'RCTView' }: ViewInfo) {
     const tag = (this.viewTag = viewTag as number);
     const wrapper = shadowNodeWrapper as ShadowNodeWrapper;
 
-    this.cssAnimationsManager = new CSSAnimationsManager(wrapper, tag);
+    this.viewName = viewName;
+    this.styleBuilder = hasStyleBuilder(viewName)
+      ? getStyleBuilder(viewName)
+      : null;
+    this.cssAnimationsManager = new CSSAnimationsManager(
+      wrapper,
+      viewName,
+      tag
+    );
     this.cssTransitionsManager = new CSSTransitionsManager(wrapper, tag);
   }
 
   update(style: CSSStyle): void {
     const [animationProperties, transitionProperties, filteredStyle] =
       filterCSSAndStyleProperties(style);
-    const normalizedStyle = styleBuilder.buildFrom(filteredStyle);
+
+    if (!this.styleBuilder && (animationProperties || transitionProperties)) {
+      throw new ReanimatedError(
+        `Tried to apply CSS animations to ${this.viewName} which is not supported`
+      );
+    }
+
+    const normalizedStyle = this.styleBuilder?.buildFrom(filteredStyle);
 
     // If the update is called during the first css style update, we won't
     // trigger CSS transitions and set styles before attaching CSS transitions

package/src/css/{managers → native/managers}/CSSTransitionsManager.ts

@@ -1,17 +1,19 @@
 'use strict';
-import type { ShadowNodeWrapper } from '../../commonTypes';
-import type { NormalizedCSSTransitionConfig } from '../platform/native';
+import type { ShadowNodeWrapper } from '../../../commonTypes';
+import type {
+  CSSTransitionProperties,
+  ICSSTransitionsManager,
+} from '../../types';
 import {
   getNormalizedCSSTransitionConfigUpdates,
   normalizeCSSTransitionProperties,
-} from '../platform/native';
+} from '../normalization';
 import {
   registerCSSTransition,
   unregisterCSSTransition,
   updateCSSTransition,
-} from '../platform/native/native';
-import type { CSSTransitionProperties } from '../types';
-import type { ICSSTransitionsManager } from '../types/interfaces';
+} from '../proxy';
+import type { NormalizedCSSTransitionConfig } from '../types';
 
 export default class CSSTransitionsManager implements ICSSTransitionsManager {
   private readonly viewTag: number;

package/src/css/{platform/native → native}/normalization/animation/constants.ts

@@ -3,7 +3,7 @@ import type {
   CSSAnimationDirection,
   CSSAnimationFillMode,
   CSSAnimationPlayState,
-} from '../../../../types';
+} from '../../../types';
 
 export const VALID_ANIMATION_DIRECTIONS = new Set<CSSAnimationDirection>([
   'normal',