fix: added support for web without Babel/SWC (#1741)(by @joshsmith)

- refactor: add support for web without Babel/SWC - refactor: add exhaustive deps rules to eslintrc for Reanimated hooks - fix: add missing metro-react-native-babel-preset (breaking linting)
gorhom · Feb 18, 2024 · d620494 · d620494
1 parent 9475a7e
commit d620494
Show file tree

Hide file tree

Showing 15 changed files with 165 additions and 47 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,5 +4,11 @@ module.exports = {
   rules: {
     'no-console': ['error', { allow: ['warn', 'error'] }],
     'prettier/prettier': 'error',
+    'react-hooks/exhaustive-deps': [
+      'error',
+      {
+        additionalHooks: '(useAnimatedStyle|useDerivedValue|useAnimatedProps)',
+      },
+    ],
   },
 };
diff --git a/example/src/components/customBackground/CustomBackground.tsx b/example/src/components/customBackground/CustomBackground.tsx
@@ -13,14 +13,17 @@ const CustomBackgroundComponent: React.FC<CustomBackgroundProps> = ({
   animatedIndex,
 }) => {
   //#region styles
-  const containerAnimatedStyle = useAnimatedStyle(() => ({
-    // @ts-ignore
-    backgroundColor: interpolateColor(
-      animatedIndex.value,
-      [0, 1],
-      ['#ffffff', '#a8b5eb']
-    ),
-  }));
+  const containerAnimatedStyle = useAnimatedStyle(
+    () => ({
+      // @ts-ignore
+      backgroundColor: interpolateColor(
+        animatedIndex.value,
+        [0, 1],
+        ['#ffffff', '#a8b5eb']
+      ),
+    }),
+    [animatedIndex.value]
+  );
   const containerStyle = useMemo(
     () => [styles.container, style, containerAnimatedStyle],
     [style, containerAnimatedStyle]

diff --git a/example/src/components/customFooter/CustomFooter.tsx b/example/src/components/customFooter/CustomFooter.tsx
@@ -36,7 +36,7 @@ const CustomFooterComponent = ({
     return {
       transform: [{ rotate: `${arrowRotate}rad` }],
     };
-  }, []);
+  }, [animatedIndex.value]);
   const arrowStyle = useMemo(
     () => [arrowAnimatedStyle, styles.arrow],
     [arrowAnimatedStyle]

diff --git a/example/src/components/customHandle/CustomHandle.tsx b/example/src/components/customHandle/CustomHandle.tsx
@@ -22,8 +22,15 @@ const CustomHandleComponent: React.FC<CustomHandleProps> = ({
 }) => {
   //#region animations
 
-  const indicatorTransformOriginY = useDerivedValue(() =>
-    interpolate(animatedIndex.value, [0, 1, 2], [-1, 0, 1], Extrapolate.CLAMP)
+  const indicatorTransformOriginY = useDerivedValue(
+    () =>
+      interpolate(
+        animatedIndex.value,
+        [0, 1, 2],
+        [-1, 0, 1],
+        Extrapolate.CLAMP
+      ),
+    [animatedIndex.value]
   );
   //#endregion
 
@@ -40,7 +47,7 @@ const CustomHandleComponent: React.FC<CustomHandleProps> = ({
       borderTopLeftRadius: borderTopRadius,
       borderTopRightRadius: borderTopRadius,
     };
-  });
+  }, [animatedIndex.value]);
   const leftIndicatorStyle = useMemo(
     () => ({
       ...styles.indicator,
@@ -66,7 +73,7 @@ const CustomHandleComponent: React.FC<CustomHandleProps> = ({
         }
       ),
     };
-  });
+  }, [animatedIndex.value, indicatorTransformOriginY.value]);
   const rightIndicatorStyle = useMemo(
     () => ({
       ...styles.indicator,
@@ -92,7 +99,7 @@ const CustomHandleComponent: React.FC<CustomHandleProps> = ({
         }
       ),
     };
-  });
+  }, [animatedIndex.value, indicatorTransformOriginY.value]);
   //#endregion
 
   // render

diff --git a/example/src/screens/integrations/map/LocationListBottomSheet.tsx b/example/src/screens/integrations/map/LocationListBottomSheet.tsx
@@ -37,9 +37,12 @@ export const LocationListBottomSheet = forwardRef<
   //#endregion
 
   //#region styles
-  const scrollViewAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: index.value,
-  }));
+  const scrollViewAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: index.value,
+    }),
+    [index.value]
+  );
   const scrollViewStyle = useMemo(
     () => [styles.scrollView, scrollViewAnimatedStyle],
     [scrollViewAnimatedStyle]

diff --git a/example/src/screens/integrations/map/Weather.tsx b/example/src/screens/integrations/map/Weather.tsx
@@ -54,7 +54,7 @@ const Weather = ({ animatedIndex, animatedPosition }: WeatherProps) => {
         },
       ],
     };
-  }, [height, screenHeight]);
+  }, [animatedIndex.value, animatedPosition.value, height, screenHeight]);
   const containerStyle = useMemo(
     () => [
       styles.container,

diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^4.3.8",
     "lint-staged": "^13.2.2",
+    "metro-react-native-babel-preset": "^0.77.0",
     "prettier": "^2.8.8",
     "react": "18.2.0",
     "react-native": "0.73.1",

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -195,7 +195,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       return $modal
         ? _animatedContainerHeight.value - verticalInset
         : _animatedContainerHeight.value;
-    }, [$modal, topInset, bottomInset]);
+    }, [topInset, bottomInset, $modal, _animatedContainerHeight.value]);
     const animatedContainerOffset = useReactiveSharedValue(
       _providedContainerOffset ?? INITIAL_CONTAINER_OFFSET
     ) as Animated.SharedValue<Insets>;
@@ -214,7 +214,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         maxDynamicContentSize
       );
     const animatedHighestSnapPoint = useDerivedValue(
-      () => animatedSnapPoints.value[animatedSnapPoints.value.length - 1]
+      () => animatedSnapPoints.value[animatedSnapPoints.value.length - 1],
+      [animatedSnapPoints.value]
     );
     const animatedClosedPosition = useDerivedValue(() => {
       let closedPosition = animatedContainerHeight.value;
@@ -224,9 +225,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       }
 
       return closedPosition;
-    }, [$modal, detached, bottomInset]);
+    }, [animatedContainerHeight.value, $modal, detached, bottomInset]);
     const animatedSheetHeight = useDerivedValue(
-      () => animatedContainerHeight.value - animatedHighestSnapPoint.value
+      () => animatedContainerHeight.value - animatedHighestSnapPoint.value,
+      [animatedContainerHeight.value, animatedHighestSnapPoint.value]
     );
     const animatedCurrentIndex = useReactiveSharedValue(
       animateOnMount ? -1 : _providedIndex
@@ -274,7 +276,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         isHandleHeightCalculated &&
         isSnapPointsNormalized
       );
-    });
+    }, [
+      _providedContainerHeight,
+      animatedContainerHeight.value,
+      animatedHandleHeight,
+      animatedSnapPoints.value,
+      handleComponent,
+    ]);
     const isInTemporaryPosition = useSharedValue(false);
     const isForcedClosing = useSharedValue(false);
 
@@ -399,7 +407,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       }
 
       return SCROLLABLE_STATE.LOCKED;
-    });
+    }, [
+      animatedAnimationState.value,
+      animatedKeyboardState.value,
+      animatedScrollableOverrideState.value,
+      animatedSheetState.value,
+    ]);
     // dynamic
     const animatedContentHeightMax = useDerivedValue(() => {
       const keyboardHeightInContainer = animatedKeyboardHeightInContainer.value;
@@ -513,7 +526,18 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       }
 
       return currentIndex;
-    }, [android_keyboardInputMode]);
+    }, [
+      android_keyboardInputMode,
+      animatedAnimationSource.value,
+      animatedAnimationState.value,
+      animatedContainerHeight.value,
+      animatedCurrentIndex.value,
+      animatedNextPositionIndex.value,
+      animatedPosition.value,
+      animatedSnapPoints.value,
+      isInTemporaryPosition.value,
+      isLayoutCalculated.value,
+    ]);
     //#endregion
 
     //#region private methods
@@ -1258,7 +1282,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           configs: _providedAnimationConfigs,
         }),
       };
-    }, [animatedContentHeightMax, enableDynamicSizing, animatedContentHeight]);
+    }, [
+      enableDynamicSizing,
+      animatedContentHeight.value,
+      animatedContentHeightMax.value,
+      _providedAnimationConfigs,
+    ]);
     const contentContainerStyle = useMemo(
       () => [styles.contentContainer, contentContainerAnimatedStyle],
       [contentContainerAnimatedStyle]
@@ -1277,7 +1306,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       return {
         paddingBottom: animatedContainerHeight.value,
       };
-    }, [detached]);
+    }, [animatedContainerHeight.value, detached]);
     const contentMaskContainerStyle = useMemo(
       () => [styles.contentMaskContainer, contentMaskContainerAnimatedStyle],
       [contentMaskContainerAnimatedStyle]
@@ -1424,7 +1453,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           }
         }
         animateToPosition(nextPosition, animationSource, 0, animationConfig);
-      }
+      },
+      []
     );
 
     /**
@@ -1547,7 +1577,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         if (_providedAnimatedPosition) {
           _providedAnimatedPosition.value = _animatedPosition + topInset;
         }
-      }
+      },
+      []
     );
 
     /**
@@ -1559,7 +1590,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         if (_providedAnimatedIndex) {
           _providedAnimatedIndex.value = _animatedIndex;
         }
-      }
+      },
+      []
     );
 
     /**

diff --git a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
@@ -96,15 +96,18 @@ const BottomSheetBackdropComponent = ({
   //#endregion
 
   //#region styles
-  const containerAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      animatedIndex.value,
-      [-1, disappearsOnIndex, appearsOnIndex],
-      [0, 0, opacity],
-      Extrapolation.CLAMP
-    ),
-    flex: 1,
-  }));
+  const containerAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(
+        animatedIndex.value,
+        [-1, disappearsOnIndex, appearsOnIndex],
+        [0, 0, opacity],
+        Extrapolation.CLAMP
+      ),
+      flex: 1,
+    }),
+    [animatedIndex.value, appearsOnIndex, disappearsOnIndex, opacity]
+  );
   const containerStyle = useMemo(
     () => [styles.container, style, containerAnimatedStyle],
     [style, containerAnimatedStyle]

diff --git a/src/components/bottomSheetDebugView/ReText.webx.tsx b/src/components/bottomSheetDebugView/ReText.webx.tsx
@@ -26,7 +26,7 @@ const ReText = (props: TextProps) => {
         : _providedValue.value;
 
     return `${text}: ${value}`;
-  });
+  }, [_providedValue, text]);
 
   //region effects
   useAnimatedReaction(
@@ -35,7 +35,8 @@ const ReText = (props: TextProps) => {
       textRef.current?.setNativeProps({
         text: result,
       });
-    }
+    },
+    []
   );
   //endregion
 

diff --git a/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx b/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx
@@ -27,9 +27,12 @@ function BottomSheetRefreshControlComponent({
   //#endregion
 
   //#region variables
-  const animatedProps = useAnimatedProps(() => ({
-    enabled: animatedScrollableState.value === SCROLLABLE_STATE.UNLOCKED,
-  }));
+  const animatedProps = useAnimatedProps(
+    () => ({
+      enabled: animatedScrollableState.value === SCROLLABLE_STATE.UNLOCKED,
+    }),
+    [animatedScrollableState.value]
+  );
   const gesture = useMemo(
     () =>
       Gesture.Simultaneous(

diff --git a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
@@ -108,7 +108,7 @@ export function createBottomSheetScrollableComponent<T, P>(
           ? animatedFooterHeight.value
           : 0,
       }),
-      [enableFooterMarginAdjustment]
+      [animatedFooterHeight.value, enableFooterMarginAdjustment]
     );
     const containerStyle = useMemo(() => {
       return enableFooterMarginAdjustment

diff --git a/src/hooks/useKeyboard.ts b/src/hooks/useKeyboard.ts
@@ -119,7 +119,8 @@ export const useKeyboard = () => {
       if (result && params.length > 0) {
         handleKeyboardEvent(params[0], params[1], params[2], params[3]);
       }
-    }
+    },
+    []
   );
   //#endregion
 

diff --git a/src/hooks/useNormalizedSnapPoints.ts b/src/hooks/useNormalizedSnapPoints.ts
@@ -88,6 +88,14 @@ export const useNormalizedSnapPoints = (
       _normalizedSnapPoints.indexOf(dynamicSnapPoint);
 
     return _normalizedSnapPoints;
-  }, [snapPoints, enableDynamicSizing, maxDynamicContentSize]);
+  }, [
+    containerHeight.value,
+    snapPoints,
+    enableDynamicSizing,
+    handleHeight.value,
+    contentHeight.value,
+    maxDynamicContentSize,
+    dynamicSnapPointIndex,
+  ]);
   return [normalizedSnapPoints, dynamicSnapPointIndex];
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,7 +119,8 @@ export const useKeyboard = () => { @@
           if (result && params.length > 0) {
             handleKeyboardEvent(params[0], params[1], params[2], params[3]);
           }
-        }
+        },
+        []
       );
       //#endregion
@@ Expand Down @@