From 46fb88398ec7625c258cd62cb8560d72f3537fcb Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Tue, 25 May 2021 22:57:11 +0100
Subject: [PATCH] feat: added footer component (#457)

* chore: added BottomSheetFooter

* fix: added bottom inset to slide behavior

* chore: added footer example
---
 example/src/Dev.tsx                           |  23 +++-
 .../src/screens/advanced/FooterExample.tsx    | 106 ++++++++++++++
 example/src/screens/screens.ts                |   5 +
 src/components/bottomSheet/BottomSheet.tsx    |  15 ++
 src/components/bottomSheet/types.d.ts         |   5 +-
 .../bottomSheetFooter/BottomSheetFooter.tsx   | 130 ++++++++++++++++++
 src/components/bottomSheetFooter/constants.ts |   8 ++
 src/components/bottomSheetFooter/index.ts     |   1 +
 src/components/bottomSheetFooter/types.d.ts   |  36 +++++
 .../createBottomSheetScrollableComponent.tsx  |  17 ++-
 .../bottomSheetScrollable/styles.ts           |   1 +
 src/contexts/internal.ts                      |   8 ++
 src/index.ts                                  |   1 +
 13 files changed, 352 insertions(+), 4 deletions(-)
 create mode 100644 example/src/screens/advanced/FooterExample.tsx
 create mode 100644 src/components/bottomSheetFooter/BottomSheetFooter.tsx
 create mode 100644 src/components/bottomSheetFooter/constants.ts
 create mode 100644 src/components/bottomSheetFooter/index.ts
 create mode 100644 src/components/bottomSheetFooter/types.d.ts

diff --git a/example/src/Dev.tsx b/example/src/Dev.tsx
index cc6bcebe..4209756b 100644
--- a/example/src/Dev.tsx
+++ b/example/src/Dev.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { DarkTheme, NavigationContainer } from '@react-navigation/native';
 import {
   createBottomTabNavigator,
@@ -7,6 +7,7 @@ import {
 } from '@react-navigation/bottom-tabs';
 import {
   BottomSheetFlatList,
+  BottomSheetFooter,
   BottomSheetModal,
   BottomSheetModalProvider,
 } from '@gorhom/bottom-sheet';
@@ -14,6 +15,7 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
+import { RectButton } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { createContactListMockData } from './utilities';
 import ContactItem from './components/contactItem';
@@ -97,6 +99,11 @@ const App = () => {
           style={styles.flatlist}
           contentContainerStyle={styles.flatlistContainer}
         />
+        <BottomSheetFooter appearanceBehavior={['fade', 'scale']}>
+          <RectButton style={styles.footer}>
+            <Text style={styles.footerText}>this is a footer!</Text>
+          </RectButton>
+        </BottomSheetFooter>
       </BottomSheetModal>
 
       {SNAP_POINTS.map(snapPoint => (
@@ -149,6 +156,20 @@ const styles = StyleSheet.create({
   flatlistContainer: {
     paddingHorizontal: 24,
   },
+  footer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 12,
+    padding: 12,
+    marginBottom: 12,
+    borderRadius: 24,
+    backgroundColor: '#80f',
+  },
+  footerText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+  },
 });
 
 const Tab = createBottomTabNavigator();
diff --git a/example/src/screens/advanced/FooterExample.tsx b/example/src/screens/advanced/FooterExample.tsx
new file mode 100644
index 00000000..9e65dea9
--- /dev/null
+++ b/example/src/screens/advanced/FooterExample.tsx
@@ -0,0 +1,106 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import BottomSheet, { BottomSheetFooter } from '@gorhom/bottom-sheet';
+import SearchHandle from '../../components/searchHandle';
+import Button from '../../components/button';
+import ContactList from '../../components/contactList';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const FooterExample = () => {
+  // state
+  const [fadeBehavior, setFadeBehavior] = useState<'none' | 'fade'>('none');
+  const [slideBehavior, setSlideBehavior] = useState<'none' | 'slide'>('none');
+  const [scaleBehavior, setScaleBehavior] = useState<'none' | 'scale'>('none');
+
+  // hooks
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const { bottom: bottomSafeArea } = useSafeAreaInsets();
+
+  // variables
+  const snapPoints = useMemo(() => [80, 250], []);
+  const appearanceBehavior = useMemo(
+    () => [fadeBehavior, slideBehavior, scaleBehavior],
+    [fadeBehavior, slideBehavior, scaleBehavior]
+  );
+
+  // callbacks
+  const handleFadeBehavior = useCallback(() => {
+    setFadeBehavior(state => (state === 'none' ? 'fade' : 'none'));
+  }, []);
+  const handleScaleBehavior = useCallback(() => {
+    setScaleBehavior(state => (state === 'none' ? 'scale' : 'none'));
+  }, []);
+  const handleSlideBehavior = useCallback(() => {
+    setSlideBehavior(state => (state === 'none' ? 'slide' : 'none'));
+  }, []);
+  const handleExpandPress = useCallback(() => {
+    bottomSheetRef.current?.expand();
+  }, []);
+  const handleCollapsePress = useCallback(() => {
+    bottomSheetRef.current?.collapse();
+  }, []);
+  const handleClosePress = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, []);
+
+  // renders
+  return (
+    <View style={styles.container}>
+      <Button
+        label={`Toggle Fade Behavior: ${fadeBehavior}`}
+        onPress={handleFadeBehavior}
+      />
+      <Button
+        label={`Toggle Scale Behavior: ${scaleBehavior}`}
+        onPress={handleScaleBehavior}
+      />
+      <Button
+        label={`Toggle Slide Behavior: ${slideBehavior}`}
+        onPress={handleSlideBehavior}
+      />
+      <Button label="Expand" onPress={handleExpandPress} />
+      <Button label="Collapse" onPress={handleCollapsePress} />
+      <Button label="Close" onPress={handleClosePress} />
+      <BottomSheet
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        keyboardBehavior="interactive"
+        keyboardBlurBehavior="restore"
+        handleComponent={SearchHandle}
+      >
+        <ContactList count={10} type="FlatList" />
+        <BottomSheetFooter
+          bottomInset={bottomSafeArea}
+          appearanceBehavior={appearanceBehavior}
+        >
+          <View style={styles.footer}>
+            <Text style={styles.footerText}>this is a footer!</Text>
+          </View>
+        </BottomSheetFooter>
+      </BottomSheet>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  footer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 12,
+    padding: 12,
+    marginBottom: 12,
+    borderRadius: 24,
+    backgroundColor: '#80f',
+  },
+  footerText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+  },
+});
+
+export default FooterExample;
diff --git a/example/src/screens/screens.ts b/example/src/screens/screens.ts
index c3c7397e..fa891c1c 100644
--- a/example/src/screens/screens.ts
+++ b/example/src/screens/screens.ts
@@ -86,6 +86,11 @@ export const screens = [
         slug: 'Advanced/ShadowExample',
         getScreen: () => require('./advanced/ShadowExample').default,
       },
+      {
+        name: 'Footer',
+        slug: 'Advanced/FooterExample',
+        getScreen: () => require('./advanced/FooterExample').default,
+      },
     ] as ShowcaseScreenType[],
   },
   {
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 78bba268..9973ffd5 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -165,6 +165,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const animatedHandleHeight = useReactiveSharedValue(
       _providedHandleHeight ?? INITIAL_HANDLE_HEIGHT
     );
+    const animatedFooterHeight = useSharedValue(0);
     const animatedSnapPoints = useNormalizedSnapPoints(
       _providedSnapPoints,
       animatedContainerHeight,
@@ -777,8 +778,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedAnimationState,
         animatedSheetState,
         animatedScrollableState,
+        animatedKeyboardState: keyboardState,
+        animatedKeyboardHeight: keyboardHeight,
         animatedIndex,
         animatedPosition,
+        animatedContentHeight,
+        animatedHandleHeight,
+        animatedFooterHeight,
+        animatedContainerHeight,
         scrollableContentOffsetY,
         isInTemporaryPosition,
         shouldHandleKeyboardEvents,
@@ -789,13 +796,21 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         failOffsetX: _providedFailOffsetX,
         failOffsetY: _providedFailOffsetY,
         contentPanGestureHandler,
+        getKeyboardHeightInContainer,
         setScrollableRef: handleSettingScrollableRef,
         removeScrollableRef,
       }),
       [
         animatedIndex,
         animatedPosition,
+        animatedContentHeight,
+        getKeyboardHeightInContainer,
+        animatedFooterHeight,
+        animatedContainerHeight,
+        animatedHandleHeight,
         animatedAnimationState,
+        keyboardState,
+        keyboardHeight,
         animatedSheetState,
         contentPanGestureHandler,
         handleSettingScrollableRef,
diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index eb7ae01d..15d9b7ce 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -33,11 +33,11 @@ export interface BottomSheetProps
   /**
    * Points for the bottom sheet to snap to. It accepts array of number, string or mix.
    * String values should be a percentage.
-   * @type Array<string | number>
    * @example
    * snapPoints={[200, 500]}
    * snapPoints={[200, '%50']}
    * snapPoints={[-1, '%100']}
+   * @type Array<string | number>
    */
   snapPoints: Array<string | number>;
   /**
@@ -124,11 +124,12 @@ export interface BottomSheetProps
   //#region keyboard
   /**
    * Defines the keyboard appearance behavior.
+   * @enum
    * - `none`: do nothing.
    * - `extend`: extend the sheet to its maximum snap point.
    * - `fillParent`: extend the sheet to fill parent.
    * - `interactive`: offset the sheet by the size of the keyboard.
-   * @type `none` | `extend` | `interactive`
+   * @type `none` | `extend` | `fillParent` | `interactive`
    * @default none
    */
   keyboardBehavior?: keyof typeof KEYBOARD_BEHAVIOR;
diff --git a/src/components/bottomSheetFooter/BottomSheetFooter.tsx b/src/components/bottomSheetFooter/BottomSheetFooter.tsx
new file mode 100644
index 00000000..abf82961
--- /dev/null
+++ b/src/components/bottomSheetFooter/BottomSheetFooter.tsx
@@ -0,0 +1,130 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { LayoutChangeEvent, StyleSheet } from 'react-native';
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { KEYBOARD_STATE } from '../../constants';
+import { useBottomSheetInternal } from '../../hooks';
+import { APPEARANCE_BEHAVIOR } from './constants';
+import type { BottomSheetFooterProps } from './types';
+
+function BottomSheetFooterComponent({
+  children,
+  appearanceBehavior = APPEARANCE_BEHAVIOR.fade,
+  bottomInset = 0,
+}: BottomSheetFooterProps) {
+  //#region hooks
+  const {
+    animatedContainerHeight,
+    animatedHandleHeight,
+    animatedFooterHeight,
+    animatedPosition,
+    animatedKeyboardState,
+    getKeyboardHeightInContainer,
+  } = useBottomSheetInternal();
+  //#endregion
+
+  //#region styles
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    const keyboardHeight = getKeyboardHeightInContainer();
+    let footerTranslateY = Math.max(
+      0,
+      animatedContainerHeight.value - animatedPosition.value
+    );
+
+    if (animatedKeyboardState.value === KEYBOARD_STATE.SHOWN) {
+      footerTranslateY = footerTranslateY - keyboardHeight;
+    } else {
+      footerTranslateY = footerTranslateY - bottomInset;
+    }
+
+    footerTranslateY =
+      footerTranslateY -
+      animatedFooterHeight.value -
+      animatedHandleHeight.value;
+
+    const style: any = {
+      transform: [
+        {
+          translateY: footerTranslateY,
+        },
+      ],
+    };
+
+    // merge appearance behavior styles
+    (typeof appearanceBehavior === 'string'
+      ? [appearanceBehavior]
+      : appearanceBehavior
+    ).map(behavior => {
+      if (behavior === APPEARANCE_BEHAVIOR.fade) {
+        style.opacity = interpolate(
+          footerTranslateY,
+          [5, 0],
+          [1, 0],
+          Extrapolate.CLAMP
+        );
+      } else if (behavior === APPEARANCE_BEHAVIOR.scale) {
+        style.transform.push({
+          scale: interpolate(
+            footerTranslateY,
+            [5, 0],
+            [1, 0],
+            Extrapolate.CLAMP
+          ),
+        });
+      } else if (behavior === APPEARANCE_BEHAVIOR.slide) {
+        style.transform.push({
+          translateY: interpolate(
+            footerTranslateY,
+            [5, 0],
+            [0, animatedFooterHeight.value + bottomInset],
+            Extrapolate.CLAMP
+          ),
+        });
+      }
+    });
+
+    return style;
+  }, [appearanceBehavior, bottomInset]);
+  const containerStyle = useMemo(
+    () => [styles.container, containerAnimatedStyle],
+    [containerAnimatedStyle]
+  );
+  //#endregion
+
+  //#region callbacks
+  const handleContainerLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }: LayoutChangeEvent) => {
+      animatedFooterHeight.value = height;
+    },
+    [animatedFooterHeight]
+  );
+  //#endregion
+
+  return children !== null ? (
+    <Animated.View onLayout={handleContainerLayout} style={containerStyle}>
+      {typeof children === 'function' ? children() : children}
+    </Animated.View>
+  ) : null;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 9999,
+  },
+});
+
+const BottomSheetFooter = memo(BottomSheetFooterComponent);
+BottomSheetFooter.displayName = 'BottomSheetFooter';
+
+export default BottomSheetFooter;
diff --git a/src/components/bottomSheetFooter/constants.ts b/src/components/bottomSheetFooter/constants.ts
new file mode 100644
index 00000000..174f8475
--- /dev/null
+++ b/src/components/bottomSheetFooter/constants.ts
@@ -0,0 +1,8 @@
+enum APPEARANCE_BEHAVIOR {
+  none = 'none',
+  fade = 'fade',
+  scale = 'scale',
+  slide = 'slide',
+}
+
+export { APPEARANCE_BEHAVIOR };
diff --git a/src/components/bottomSheetFooter/index.ts b/src/components/bottomSheetFooter/index.ts
new file mode 100644
index 00000000..7b12c71f
--- /dev/null
+++ b/src/components/bottomSheetFooter/index.ts
@@ -0,0 +1 @@
+export { default } from './BottomSheetFooter';
diff --git a/src/components/bottomSheetFooter/types.d.ts b/src/components/bottomSheetFooter/types.d.ts
new file mode 100644
index 00000000..071e4310
--- /dev/null
+++ b/src/components/bottomSheetFooter/types.d.ts
@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { APPEARANCE_BEHAVIOR } from './constants';
+
+export interface BottomSheetFooterProps {
+  /**
+   * Appearance behavior when sheet is below starts to cut off footer,
+   * you can combine many behaviors together.
+   * @example
+   * appearanceBehavior = {['fade' | 'slide']}
+   * appearanceBehavior = {'fade'}
+   * @enum
+   * - `none`: do nothing.
+   * - `fade`: fade in and out.
+   * - `scale`: scale up and down.
+   * - `slide`: slide up and down.
+   * @type `none` | `fade` | `scale` | `slide` | Array<`none` | `fade` | `scale` | `slide`>
+   * @default none
+   */
+  appearanceBehavior?:
+    | keyof typeof APPEARANCE_BEHAVIOR
+    | Array<keyof typeof APPEARANCE_BEHAVIOR>;
+
+  /**
+   * Bottom inset to be added below the footer, usually comes
+   * from `react-native-safe-area-context` hook `useSafeArea`.
+   * @type number
+   * @default 0
+   */
+  bottomInset?: number;
+
+  /**
+   * Component to be placed in the footer.
+   * @type {ReactNode | ReactNode[]}
+   */
+  children?: ReactNode | ReactNode[];
+}
diff --git a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
index ee7381c9..5cc57223 100644
--- a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
+++ b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
@@ -2,8 +2,10 @@ import React, {
   forwardRef,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
 } from 'react';
+import { useAnimatedStyle } from 'react-native-reanimated';
 import { NativeViewGestureHandler } from 'react-native-gesture-handler';
 import BottomSheetDraggableView from '../bottomSheetDraggableView';
 import { useScrollableInternal, useBottomSheetInternal } from '../../hooks';
@@ -17,6 +19,7 @@ export function createBottomSheetScrollableComponent<T, P>(
     const {
       focusHook: useFocusHook = useEffect,
       overScrollMode = 'never',
+      style,
       ...rest
     }: any = props;
 
@@ -31,7 +34,18 @@ export function createBottomSheetScrollableComponent<T, P>(
       handleScrollEvent,
       handleSettingScrollable,
     } = useScrollableInternal();
-    const { enableContentPanningGesture } = useBottomSheetInternal();
+    const { enableContentPanningGesture, animatedFooterHeight } =
+      useBottomSheetInternal();
+    //#endregion
+
+    //#region styles
+    const containerAnimatedStyle = useAnimatedStyle(() => ({
+      marginBottom: animatedFooterHeight.value,
+    }));
+    const containerStyle = useMemo(
+      () => [style, containerAnimatedStyle],
+      [style, containerAnimatedStyle]
+    );
     //#endregion
 
     //#region effects
@@ -59,6 +73,7 @@ export function createBottomSheetScrollableComponent<T, P>(
             scrollEventThrottle={16}
             onScrollBeginDrag={handleScrollEvent}
             animatedProps={scrollableAnimatedProps}
+            style={containerStyle}
           />
         </NativeViewGestureHandler>
       </BottomSheetDraggableView>
diff --git a/src/components/bottomSheetScrollable/styles.ts b/src/components/bottomSheetScrollable/styles.ts
index 31e937d8..ba0ed48e 100644
--- a/src/components/bottomSheetScrollable/styles.ts
+++ b/src/components/bottomSheetScrollable/styles.ts
@@ -3,5 +3,6 @@ import { StyleSheet } from 'react-native';
 export const styles = StyleSheet.create({
   container: {
     flex: 1,
+    overflow: 'visible',
   },
 });
diff --git a/src/contexts/internal.ts b/src/contexts/internal.ts
index 28261ca2..3c589a01 100644
--- a/src/contexts/internal.ts
+++ b/src/contexts/internal.ts
@@ -6,6 +6,7 @@ import type {
 import type Animated from 'react-native-reanimated';
 import type {
   ANIMATION_STATE,
+  KEYBOARD_STATE,
   SCROLLABLE_STATE,
   SHEET_STATE,
 } from '../constants';
@@ -28,14 +29,21 @@ export interface BottomSheetInternalContextType
   animatedAnimationState: Animated.SharedValue<ANIMATION_STATE>;
   animatedSheetState: Animated.SharedValue<SHEET_STATE>;
   animatedScrollableState: Animated.SharedValue<SCROLLABLE_STATE>;
+  animatedKeyboardState: Animated.SharedValue<KEYBOARD_STATE>;
 
   // animated values
   animatedPosition: Animated.SharedValue<number>;
   animatedIndex: Animated.SharedValue<number>;
+  animatedContainerHeight: Animated.SharedValue<number>;
+  animatedContentHeight: Animated.SharedValue<number>;
+  animatedFooterHeight: Animated.SharedValue<number>;
+  animatedHandleHeight: Animated.SharedValue<number>;
+  animatedKeyboardHeight: Animated.SharedValue<number>;
   scrollableContentOffsetY: Animated.SharedValue<number>;
   shouldHandleKeyboardEvents: Animated.SharedValue<boolean>;
 
   // methods
+  getKeyboardHeightInContainer: () => number;
   contentPanGestureHandler: (event: PanGestureHandlerGestureEvent) => void;
   setScrollableRef: (ref: ScrollableRef) => void;
   removeScrollableRef: (ref: RefObject<Scrollable>) => void;
diff --git a/src/index.ts b/src/index.ts
index 67023c41..4d5896f5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,6 +22,7 @@ export { default as BottomSheetDraggableView } from './components/bottomSheetDra
 export { default as BottomSheetView } from './components/view';
 export { default as BottomSheetTextInput } from './components/bottomSheetTextInput';
 export { default as BottomSheetBackdrop } from './components/bottomSheetBackdrop';
+export { default as BottomSheetFooter } from './components/bottomSheetFooter';
 
 import BottomSheetTouchable from './components/touchables';
 export const {