react-native-elements · onmotion · Oct 15, 2023 · Oct 15, 2023 · Jan 29, 2024
diff --git a/example/src/views/bottomsheet.tsx b/example/src/views/bottomsheet.tsx
@@ -30,6 +30,8 @@ const BottomSheetComponent: React.FunctionComponent<
       />
       <BottomSheet
         modalProps={{}}
+        animationType="slide"
+        animationDuration={300}
         onBackdropPress={() => setIsVisible(false)}
         isVisible={isVisible}
       >

diff --git a/packages/base/src/BottomSheet/BottomSheet.tsx b/packages/base/src/BottomSheet/BottomSheet.tsx
@@ -1,17 +1,19 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Modal,
-  View,
   StyleSheet,
   Pressable,
   ScrollView,
   StyleProp,
   ViewStyle,
   ModalProps,
   ScrollViewProps,
+  Animated,
+  Easing,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { RneFunctionComponent } from '../helpers';
+import useBottomSheetAnimationConfig from './useBottomSheetAnimationConfig';
 
 export interface BottomSheetProps {
   /** Style of the bottom sheet's container. Use this to change the color of the underlay. */
@@ -31,8 +33,18 @@
 
   /** Used to add props to Scroll view. */
   scrollViewProps?: ScrollViewProps;
+
+  /** Duration of backdrop fade and sheet translate.  */
+  animationDuration?: number;
+
+  /** Animation type.  */
+  animationType?: ModalProps['animationType'];
+
+  /** Easing config.  */
+  easing?: Animated.TimingAnimationConfig['easing'];
 }
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 /**
  * Overlay Modal that displays content from the bottom of the screen.
  * This opens from the bottom of the screen.
@@ -45,33 +57,74 @@
   modalProps = {},
   children,
   scrollViewProps = {},
+  animationDuration = 300,
+  animationType = 'slide',
+  easing = Easing.elastic(0.7),
   ...rest
 }) => {
+  const {
+    isVisibleWithAnimationDelay,
+    translateYValue,
+    fadeValue,
+    onContentContainerLayout,
+    contentContainerHeight,
+  } = useBottomSheetAnimationConfig({
+    animationDuration,
+    isVisible,
+    animationType: modalProps.animationType || animationType,
+    easing,
+  });
+
+  const contentContainerStyle = useMemo(() => {
+    if (animationType === 'slide') {
+      return {
+        transform: [
+          {
+            translateY: translateYValue,
+          },
+        ],
+      };
+    } else if (animationType === 'fade') {
+      return { opacity: fadeValue };
+    } else {
+      return null;
+    }
+  }, [animationType, fadeValue, translateYValue]);
+
   return (
     <Modal
-      animationType="slide"
       onRequestClose={onBackdropPress}
       transparent={true}
-      visible={isVisible}
+      visible={isVisibleWithAnimationDelay}
       {...modalProps}
+      animationType="none"
     >
-      <Pressable
+      <AnimatedPressable
         onPress={onBackdropPress}
-        style={[StyleSheet.absoluteFill, backdropStyle]}
+        style={[
+          StyleSheet.absoluteFill,
+          styles.backdrop,
+          backdropStyle,
+          { opacity: fadeValue },
+        ]}
         testID="RNE__Overlay__backdrop"
       />
 
       <SafeAreaView
         style={StyleSheet.flatten([
           styles.safeAreaView,
           containerStyle && containerStyle,
+          { opacity: contentContainerHeight ? 1 : 0 },
         ])}
         pointerEvents="box-none"
         {...rest}
       >
-        <View>
+        <Animated.View
+          onLayout={onContentContainerLayout}
+          style={contentContainerStyle}
+        >
           <ScrollView {...scrollViewProps}>{children}</ScrollView>
-        </View>
+        </Animated.View>
       </SafeAreaView>
     </Modal>
   );
@@ -80,9 +133,11 @@
 const styles = StyleSheet.create({
   safeAreaView: {
     flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.2)',
     flexDirection: 'column-reverse',
   },
+  backdrop: {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+  },
 });
 
 BottomSheet.displayName = 'BottomSheet';
diff --git a/packages/base/src/BottomSheet/__tests__/__snapshots__/BottomSheet.test.tsx.snap b/packages/base/src/BottomSheet/__tests__/__snapshots__/BottomSheet.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`BottomSheet Component renders correctly 1`] = `
   testID="wrapper"
 >
   <Modal
-    animationType="slide"
+    animationType="none"
     hardwareAccelerated={false}
     onRequestClose={[Function]}
     transparent={true}
@@ -25,16 +25,15 @@ exports[`BottomSheet Component renders correctly 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          undefined,
-        ]
+        {
+          "backgroundColor": "rgba(0,0,0,0.2)",
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
       testID="RNE__Overlay__backdrop"
     />
@@ -50,13 +49,25 @@ exports[`BottomSheet Component renders correctly 1`] = `
       pointerEvents="box-none"
       style={
         {
-          "backgroundColor": "rgba(0,0,0,0.2)",
           "flex": 1,
           "flexDirection": "column-reverse",
+          "opacity": 0,
         }
       }
     >
-      <View>
+      <View
+        collapsable={false}
+        onLayout={[Function]}
+        style={
+          {
+            "transform": [
+              {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
         <RCTScrollView>
           <View>
             <View>

diff --git a/packages/base/src/BottomSheet/useBottomSheetAnimationConfig.ts b/packages/base/src/BottomSheet/useBottomSheetAnimationConfig.ts
@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, ViewProps, ModalProps } from 'react-native';
+
+export interface BottomSheetAnimationConfigProps {
+  animationDuration: number;
+  isVisible: boolean;
+  animationType: ModalProps['animationType'];
+  easing?: Animated.TimingAnimationConfig['easing'];
+}
+
+const useBottomSheetAnimationConfig = ({
+  animationDuration,
+  isVisible,
+  animationType,
+  easing: _easing,
+}: BottomSheetAnimationConfigProps) => {
+  const [isVisibleWithAnimationDelay, setIsVisibleWithAnimationDelay] =
+    useState(isVisible);
+  const fadeValue = useRef(new Animated.Value(0)).current;
+  const translateYValue = useRef(new Animated.Value(0)).current;
+  const [contentContainerHeight, setContentContainerHeight] = useState(0);
+  const easing = useRef(_easing).current;
+
+  const animate = useCallback(
+    (visible) => {
+      if (visible) {
+        setIsVisibleWithAnimationDelay(true);
+      }
+      if (!contentContainerHeight) {
+        return null;
+      }
+      const fadeAnimation = Animated.timing(fadeValue, {
+        toValue: visible ? 1 : 0,
+        duration: animationDuration,
+        easing,
+        useNativeDriver: true,
+      });
+      fadeAnimation.start(
+        !visible ? () => setIsVisibleWithAnimationDelay(false) : undefined
+      );
+
+      const translateAnimation = Animated.timing(translateYValue, {
+        toValue: visible ? 0 : contentContainerHeight,
+        duration: animationDuration,
+        easing,
+        useNativeDriver: true,
+      });
+      if (animationType === 'slide') {
+        translateAnimation.start();
+      }
+
+      return () => {
+        fadeAnimation.stop();
+        translateAnimation.stop();
+      };
+    },
+    [
+      animationDuration,
+      animationType,
+      contentContainerHeight,
+      easing,
+      fadeValue,
+      translateYValue,
+    ]
+  );
+
+  useEffect(() => {
+    if (animationType === 'none') {
+      setIsVisibleWithAnimationDelay(isVisible);
+      fadeValue.setValue(1);
+      translateYValue.setValue(0);
+      return;
+    }
+
+    animate(isVisible);
+  }, [animate, animationType, fadeValue, isVisible, translateYValue]);
+
+  const onContentContainerLayout: ViewProps['onLayout'] = useCallback(
+    (e) => {
+      setContentContainerHeight((prev) => {
+        if (!prev && animationType !== 'none') {
+          translateYValue.setValue(e.nativeEvent.layout.height);
+        }
+        return e.nativeEvent.layout.height;
+      });
+    },
+    [animationType, translateYValue]
+  );
+
+  return {
+    onContentContainerLayout,
+    isVisibleWithAnimationDelay,
+    fadeValue,
+    translateYValue,
+    contentContainerHeight,
+  };
+};
+
+export default useBottomSheetAnimationConfig;
diff --git a/website/docs/components/BottomSheet.mdx b/website/docs/components/BottomSheet.mdx
@@ -44,14 +44,17 @@ This opens from the bottom of the screen.
 
 <div class='table-responsive'>
 
-| Name              | Type            | Default    | Description                                                                          |
-| ----------------- | --------------- | ---------- | ------------------------------------------------------------------------------------ |
-| `backdropStyle`   | View Style      |            | Style of the backdrop container.                                                     |
-| `containerStyle`  | View Style      |            | Style of the bottom sheet's container. Use this to change the color of the underlay. |
-| `isVisible`       | boolean         | `false`    | Is the modal component shown.                                                        |
-| `modalProps`      | ModalProps      | `{}`       | Additional props handed to the `Modal`.                                              |
-| `onBackdropPress` | Function        | `Function` | Handler for backdrop press.                                                          |
-| `scrollViewProps` | ScrollViewProps | `{}`       | Used to add props to Scroll view.                                                    |
+| Name                | Type                        | Default               | Description                                                                          |
+| ------------------- | --------------------------- | --------------------- | ------------------------------------------------------------------------------------ |
+| `animationDuration` | number                      | `300`                 | Duration of backdrop fade and sheet translate.                                       |
+| `animationType`     | `none` \| `slide` \| `fade` | `slide`               | Animation type.                                                                      |
+| `backdropStyle`     | View Style                  |                       | Style of the backdrop container.                                                     |
+| `containerStyle`    | View Style                  |                       | Style of the bottom sheet's container. Use this to change the color of the underlay. |
+| `easing`            | (value: number) => number   | `Easing.elastic(0.7)` | Easing config.                                                                       |
+| `isVisible`         | boolean                     | `false`               | Is the modal component shown.                                                        |
+| `modalProps`        | ModalProps                  | `{}`                  | Additional props handed to the `Modal`.                                              |
+| `onBackdropPress`   | Function                    | `Function`            | Handler for backdrop press.                                                          |
+| `scrollViewProps`   | ScrollViewProps             | `{}`                  | Used to add props to Scroll view.                                                    |
 
 </div>