chore: Fix TypeScript issues for [email protected] (#6527)

🚀
software-mansion · Sep 20, 2024 · c6ed2df · c6ed2df
1 parent 1328202
commit c6ed2df
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/apps/common-app/src/examples/RuntimeTests/ReJest/TestRunner/UpdatesContainer.ts b/apps/common-app/src/examples/RuntimeTests/ReJest/TestRunner/UpdatesContainer.ts
@@ -112,7 +112,7 @@ export function createUpdatesContainer() {
       if (!(tag in updatesForTag)) {
         updatesForTag[tag] = [];
       }
-      let update: OperationUpdate = [];
+      let update: OperationUpdate = {};
       if (propsNames.length === 0) {
         update = 'update' in updateRequest ? updateRequest.update : updateRequest.snapshot;
       } else {

diff --git a/apps/common-app/src/examples/StrictDOMExample.tsx b/apps/common-app/src/examples/StrictDOMExample.tsx
@@ -36,13 +36,16 @@ export default function StrictDOMExample() {
   const x = useSharedValue(0);
   const y = useSharedValue(0);
 
+  // @ts-expect-error There's a TypeScript bug in `react-native-dom` that
+  // doesn't allow React-Native-like `transform`, but it works in runtime.
+  // https://github.com/facebook/react-strict-dom/issues/204
   const animatedStyle = useAnimatedStyle(() => {
     return {
       opacity: opacity.value,
       width: width.value,
       transform: [{ translateX: x.value }, { translateY: y.value }],
     };
-  });
+  }) as css.StyleXStyles;
 
   const panGesture = Gesture.Pan()
     .onUpdate((e) => {
@@ -63,6 +66,10 @@ export default function StrictDOMExample() {
     <html.div style={styles.container}>
       <html.div>React Strict DOM demo</html.div>
       <GestureDetector gesture={panGesture}>
+        {/* Our property types conversion for Animated Components is conflicting
+        with Strict DOM's property type conversions in such a way they generate an endless loop. 
+        Let's circle back on it in a few years.
+        @ts-ignore TODO: */}
         <animated.html.div style={[styles.box, animatedStyle]} />
       </GestureDetector>
     </html.div>

diff --git a/packages/react-native-reanimated/src/animationBuilder.tsx b/packages/react-native-reanimated/src/animationBuilder.tsx
@@ -29,7 +29,7 @@ const mockTargetValues: LayoutAnimationsValues = {
 
 function getCommonProperties(
   layoutStyle: StyleProps,
-  componentStyle: StyleProps | Array<StyleProps>
+  componentStyle: NestedArray<StyleProps>
 ) {
   let componentStyleFlat = Array.isArray(componentStyle)
     ? componentStyle.flat()

diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx b/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx
@@ -35,7 +35,7 @@ export class PropsFilter implements IPropsFilter {
       if (key === 'style') {
         const styleProp = inputProps.style;
         const styles = flattenArray<StyleProps>(styleProp ?? []);
-        const processedStyle: StyleProps = styles.map((style) => {
+        const processedStyle: StyleProps[] = styles.map((style) => {
           if (style && style.viewDescriptors) {
             // this is how we recognize styles returned by useAnimatedStyle
             if (component._isFirstRender) {