refactor: Fix exhaustive deps linting errors (#3605)

Author: tjaniczek

src/components/Banner.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import useEventCallback from 'use-event-callback';
+
 import { useInternalTheme } from '../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../types';
 import Button from './Button/Button';
@@ -149,6 +151,9 @@ const Banner = ({
     measured: false,
   });
 
+  const showCallback = useEventCallback(onShowAnimationFinished);
+  const hideCallback = useEventCallback(onHideAnimationFinished);
+
   const { scale } = theme.animation;
 
   React.useEffect(() => {
@@ -158,14 +163,14 @@ const Banner = ({
         duration: 250 * scale,
         toValue: 1,
         useNativeDriver: false,
-      }).start(onShowAnimationFinished);
+      }).start(showCallback);
     } else {
       // hide
       Animated.timing(position, {
         duration: 200 * scale,
         toValue: 0,
         useNativeDriver: false,
-      }).start(onHideAnimationFinished);
+      }).start(hideCallback);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, position, scale]);

src/components/Modal.tsx

@@ -3,7 +3,6 @@ import {
   Animated,
   BackHandler,
   Easing,
-  NativeEventSubscription,
   StyleProp,
   StyleSheet,
   TouchableWithoutFeedback,
@@ -12,6 +11,7 @@ import {
 } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import useEventCallback from 'use-event-callback';
 import type { ThemeProp } from 'src/types';
 
 import { useInternalTheme } from '../core/theming';
@@ -104,7 +104,7 @@ function Modal({
   dismissable = true,
   visible = false,
   overlayAccessibilityLabel = 'Close modal',
-  onDismiss,
+  onDismiss = () => {},
   children,
   contentContainerStyle,
   style,
@@ -118,6 +118,8 @@ function Modal({
     visibleRef.current = visible;
   });
 
+  const onDismissCallback = useEventCallback(onDismiss);
+
   const { scale } = theme.animation;
 
   const { top, bottom } = useSafeAreaInsets();
@@ -130,44 +132,16 @@ function Modal({
     setRendered(true);
   }
 
-  const handleBack = () => {
-    if (dismissable) {
-      hideModal();
-    }
-    return true;
-  };
-
-  const subscription = React.useRef<NativeEventSubscription | undefined>(
-    undefined
-  );
-
-  const showModal = () => {
-    subscription.current?.remove();
-    subscription.current = addEventListener(
-      BackHandler,
-      'hardwareBackPress',
-      handleBack
-    );
-
+  const showModal = React.useCallback(() => {
     Animated.timing(opacity, {
       toValue: 1,
       duration: scale * DEFAULT_DURATION,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true,
     }).start();
-  };
-
-  const removeListeners = () => {
-    if (subscription.current?.remove) {
-      subscription.current?.remove();
-    } else {
-      BackHandler.removeEventListener('hardwareBackPress', handleBack);
-    }
-  };
-
-  const hideModal = () => {
-    removeListeners();
+  }, [opacity, scale]);
 
+  const hideModal = React.useCallback(() => {
     Animated.timing(opacity, {
       toValue: 0,
       duration: scale * DEFAULT_DURATION,
@@ -178,8 +152,8 @@ function Modal({
         return;
       }
 
-      if (visible && onDismiss) {
-        onDismiss();
+      if (visible) {
+        onDismissCallback();
       }
 
       if (visibleRef.current) {
@@ -188,7 +162,28 @@ function Modal({
         setRendered(false);
       }
     });
-  };
+  }, [onDismissCallback, opacity, scale, showModal, visible]);
+
+  React.useEffect(() => {
+    if (!visible) {
+      return undefined;
+    }
+
+    const onHardwareBackPress = () => {
+      if (dismissable) {
+        hideModal();
+      }
+
+      return true;
+    };
+
+    const subscription = addEventListener(
+      BackHandler,
+      'hardwareBackPress',
+      onHardwareBackPress
+    );
+    return () => subscription.remove();
+  }, [dismissable, hideModal, visible]);
 
   const prevVisible = React.useRef<boolean | null>(null);
 
@@ -203,11 +198,6 @@ function Modal({
     prevVisible.current = visible;
   });
 
-  React.useEffect(() => {
-    return removeListeners;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   if (!rendered) return null;
 
   return (
@@ -247,6 +237,7 @@ function Modal({
         testID={`${testID}-wrapper`}
       >
         <Surface
+          testID={`${testID}-surface`}
           theme={theme}
           style={
             [

src/components/ProgressBar.tsx

@@ -83,6 +83,8 @@ const ProgressBar = ({
     new Animated.Value(0)
   );
   const { current: fade } = React.useRef<Animated.Value>(new Animated.Value(0));
+  const passedAnimatedValue =
+    React.useRef<Props['animatedValue']>(animatedValue);
   const [width, setWidth] = React.useState<number>(0);
   const [prevWidth, setPrevWidth] = React.useState<number>(0);
 
@@ -91,6 +93,10 @@ const ProgressBar = ({
 
   const { scale } = theme.animation;
 
+  React.useEffect(() => {
+    passedAnimatedValue.current = animatedValue;
+  });
+
   const startAnimation = React.useCallback(() => {
     // Show progress bar
     Animated.timing(fade, {
@@ -100,7 +106,17 @@ const ProgressBar = ({
       isInteraction: false,
     }).start();
 
-    if (animatedValue && animatedValue >= 0) {
+    /**
+     * We shouldn't add @param animatedValue to the
+     * deps array, to avoid the unnecessary loop.
+     * We can only check if the prop is passed initially,
+     * and we do early return.
+     */
+    const externalAnimation =
+      typeof passedAnimatedValue.current !== 'undefined' &&
+      passedAnimatedValue.current >= 0;
+
+    if (externalAnimation) {
       return;
     }
 
@@ -128,13 +144,6 @@ const ProgressBar = ({
         isInteraction: false,
       }).start();
     }
-    /**
-     * We shouldn't add @param animatedValue to the
-     * deps array, to avoid the unnecessary loop.
-     * We can only check if the prop is passed initially,
-     * and we do early return.
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fade, scale, indeterminate, timer, progress]);
 
   const stopAnimation = React.useCallback(() => {