Adds height prop change responder

Author: harveyappleton

README.md

@@ -15,7 +15,8 @@ A cross platform, lightweight, pure JS implementation (no dependencies) of botto
 - :last_quarter_moon: **Light and Dark mode** supported by default, and responds to changes automatically.
 - :arrow_up_down: **Draggable**: You can drag to close once you cross the close threshold, and a drag marker will show to indicate this.
 - :round_pushpin: **Closeable using background**: By tapping on the background behind the sheet, the sheet will be closed.
-- :arrow_backward: **Closeable using Android back button**: will automatically close the modal.
+- :arrow_backward: **Closeable using Android back button**: will automatically close the bottmo sheet.
+- :monocle_face: **Responds to height changes**: if the `height` prop changes, the bottom sheet will change height while open.
 - :art: **Customisable and easy to style** with lots of prop options.
 - :speech_balloon: **Callbacks galore**: Lots of easy to use callbacks, such as `onOpenStart` and `onOpenFinish`.
 - :blue_book: **TypeScript** support - fully written in TypeScript.

example/src/App.tsx

@@ -1,19 +1,25 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { StyleSheet, View, TouchableOpacity, Text, useColorScheme } from 'react-native';
 import { BottomSheet, BottomSheetRef } from 'react-native-sheet';
 
 export default function App() {
   const colorScheme = useColorScheme() || 'light';
   const isDarkMode = colorScheme === 'dark';
   const bottomSheet = useRef<BottomSheetRef>(null);
+  const [height, setHeight] = useState(400);
 
   return (
     <View style={[styles.container, { backgroundColor: isDarkMode ? '#0f0f0f' : '#ffffff' }]}>
-      <BottomSheet height={400} ref={bottomSheet} contentContainerStyle={styles.bottomSheetContainer}>
+      <BottomSheet height={height} ref={bottomSheet} contentContainerStyle={styles.bottomSheetContainer}>
         <Text style={{ color: isDarkMode ? '#ffffff' : '#222222' }}>Your content here</Text>
-        <TouchableOpacity style={styles.button} onPress={() => bottomSheet.current?.hide()}>
-          <Text style={styles.buttonText}>Close</Text>
-        </TouchableOpacity>
+        <View>
+          <TouchableOpacity style={styles.button} onPress={() => setHeight(currentHeight => (currentHeight === 400 ? 700 : 400))}>
+            <Text style={styles.buttonText}>Change height</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.button} onPress={() => bottomSheet.current?.hide()}>
+            <Text style={styles.buttonText}>Close</Text>
+          </TouchableOpacity>
+        </View>
       </BottomSheet>
       <TouchableOpacity onPress={() => bottomSheet.current?.show()}>
         <Text style={{ color: isDarkMode ? '#ffffff' : '#222222' }}>Open Bottom Sheet</Text>

src/__tests__/BottomSheet.test.tsx

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

src/features/BottomSheet/BottomSheet.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useState, useRef, useImperativeHandle, useCallback, forwardRef, ReactNode } from 'react';
+import React, { memo, useMemo, useState, useRef, useImperativeHandle, useCallback, forwardRef, ReactNode, useEffect } from 'react';
 import { Platform, View, Modal, TouchableOpacity, Animated, PanResponder, ViewStyle, useColorScheme } from 'react-native';
 import { styles } from './styles';
 
@@ -99,6 +99,7 @@ export const BottomSheet = memo(
       [animatedHeight, closeTime, height, onCloseFinish, onCloseStart, onOpenFinish, onOpenStart, openTime, pan]
     );
 
+    // Respond to pan changes
     const panResponder = useRef(
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
@@ -124,11 +125,22 @@ export const BottomSheet = memo(
       })
     ).current;
 
+    // If `height` prop changes, respond and change to new height immediately
+    useEffect(() => {
+      Animated.timing(animatedHeight, {
+        toValue: height,
+        duration: 0,
+        useNativeDriver: false
+      }).start();
+    }, [height]);
+
+    // Expose specific methods on hook
     useImperativeHandle(ref, () => ({
       show: () => setModalVisibility(true),
       hide: () => setModalVisibility(false)
     }));
 
+    // Return nothing if not visible
     if (!visible) return null;
 
     return (
@@ -158,6 +170,7 @@ export const BottomSheet = memo(
               },
               sheetStyle
             ]}
+            testID='animated-view'
           >
             {isDraggable && showDragIcon && (
               <View style={styles.draggableContainer}>