Fix ESLint plugin and respond to height

Author: harveyappleton

package.json

@@ -66,9 +66,10 @@
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.32",
     "@types/react-native": "0.66.0",
+    "@typescript-eslint/eslint-plugin": "^5.2.0",
     "commitlint": "^13.2.1",
-    "eslint": "^8.1.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^7.0.0",
+    "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.4",
     "jest": "^27.3.1",

src/__tests__/BottomSheet.test.tsx

@@ -174,7 +174,7 @@ describe('BottomSheet', () => {
     await waitFor(() => expect(onCloseFinish).toHaveBeenCalledTimes(1));
   });
 
-  it('should respond to height changes', () => {
+  it('should respond to height changes', async () => {
     const ref = createRef<BottomSheetRef>();
     const { getByTestId, rerender } = render(
       <BottomSheet ref={ref} height={400}>
@@ -185,7 +185,7 @@ describe('BottomSheet', () => {
       ref.current?.show();
     });
 
-    expect(getByTestId('animated-view')).toHaveStyle({ height: 400 });
+    await waitFor(() => expect(getByTestId('animated-view')).toHaveStyle({ height: 400 }));
 
     rerender(
       <BottomSheet ref={ref} height={600}>

src/features/BottomSheet/BottomSheet.tsx

@@ -125,14 +125,17 @@ export const BottomSheet = memo(
       })
     ).current;
 
-    // If `height` prop changes, respond and change to new height immediately
+    // If `height` prop changes while open, respond and change to new height immediately
     useEffect(() => {
-      Animated.timing(animatedHeight, {
-        toValue: height,
-        duration: 0,
-        useNativeDriver: false
-      }).start();
-    }, [height]);
+      if (visible) {
+        Animated.timing(animatedHeight, {
+          toValue: height,
+          duration: 0,
+          useNativeDriver: false
+        }).start();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [height]); // we only want the useEffect to run when height prop changes
 
     // Expose specific methods on hook
     useImperativeHandle(ref, () => ({