From 9ffd4e8b1883476ea4b75d95648d96a2eda005db Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Tue, 12 Jan 2021 21:42:08 +0100
Subject: [PATCH] feat: added style prop (#189)

* chore: added style prop to be applied to sheet container

* chore: updated examples
---
 example/src/components/contactList/index.ts   |  2 +-
 .../src/screens/advanced/BackdropExample.tsx  | 60 +++++++------------
 src/components/bottomSheet/BottomSheet.tsx    |  5 +-
 src/components/bottomSheet/types.d.ts         | 21 +++++++
 4 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/example/src/components/contactList/index.ts b/example/src/components/contactList/index.ts
index f25e568..de8e274 100644
--- a/example/src/components/contactList/index.ts
+++ b/example/src/components/contactList/index.ts
@@ -1 +1 @@
-export { default } from './ContactList';
+export { default, ContactListProps } from './ContactList';
diff --git a/example/src/screens/advanced/BackdropExample.tsx b/example/src/screens/advanced/BackdropExample.tsx
index c1e578e..b7f494b 100644
--- a/example/src/screens/advanced/BackdropExample.tsx
+++ b/example/src/screens/advanced/BackdropExample.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import Button from '../../components/button';
-import ContactList from '../../components/contactList';
+import ContactListContainer from '../../components/contactListContainer';
 
 const BackdropExample = () => {
   // hooks
@@ -26,53 +26,47 @@ const BackdropExample = () => {
   }, []);
 
   // renders
-  const renderHeader = useCallback(() => {
-    return (
-      <View style={styles.headerContainer}>
-        <Text style={styles.title}>Backdrop Example</Text>
-      </View>
-    );
-  }, []);
-
   return (
     <View style={styles.container}>
       <Button
         label="Snap To 90%"
-        style={styles.buttonContainer}
+        style={styles.button}
         onPress={() => handleSnapPress(2)}
       />
       <Button
         label="Snap To 50%"
-        style={styles.buttonContainer}
+        style={styles.button}
         onPress={() => handleSnapPress(1)}
       />
       <Button
         label="Snap To 25%"
-        style={styles.buttonContainer}
+        style={styles.button}
         onPress={() => handleSnapPress(0)}
       />
       <Button
         label="Expand"
-        style={styles.buttonContainer}
+        style={styles.button}
         onPress={() => handleExpandPress()}
       />
       <Button
         label="Collapse"
-        style={styles.buttonContainer}
+        style={styles.button}
         onPress={() => handleCollapsePress()}
       />
       <Button
         label="Close"
-        style={styles.buttonContainer}
+        style={styles.button}
         onPress={() => handleClosePress()}
       />
       <BottomSheet
         ref={bottomSheetRef}
         index={0}
         snapPoints={snapPoints}
+        style={styles.sheetContainer}
         backdropComponent={BottomSheetBackdrop}
+        backgroundComponent={null}
       >
-        <ContactList type="View" count={3} header={renderHeader} />
+        <ContactListContainer type="View" count={4} title="Backdrop Example" />
       </BottomSheet>
     </View>
   );
@@ -83,29 +77,19 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: 24,
   },
-  contentContainerStyle: {
-    paddingTop: 12,
-    paddingHorizontal: 24,
+  sheetContainer: {
+    shadowColor: '#000',
     backgroundColor: 'white',
+    shadowOffset: {
+      width: 0,
+      height: 11,
+    },
+    shadowOpacity: 0.55,
+    shadowRadius: 14.78,
+
+    elevation: 22,
   },
-  shadowBackdrop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-  },
-  title: {
-    fontSize: 46,
-    lineHeight: 46,
-    fontWeight: '800',
-  },
-  headerContainer: {
-    paddingVertical: 24,
-    backgroundColor: 'white',
-  },
-  buttonContainer: {
+  button: {
     marginBottom: 6,
   },
 });
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 96de0dd..e3ff8fe 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -85,6 +85,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       enableHandlePanningGesture = DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
       enableOverDrag = DEFAULT_ENABLE_OVER_DRAG,
       enableFlashScrollableIndicatorOnExpand = DEFAULT_ENABLE_FLASH_SCROLLABLE_INDICATOR_ON_EXPAND,
+      style: _providedStyle,
 
       // layout
       handleHeight: _providedHandleHeight,
@@ -447,8 +448,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       };
     }, [safeContainerHeight, isLayoutCalculated]);
     const containerStyle = useMemo(
-      () => [styles.container, containerAnimatedStyle],
-      [containerAnimatedStyle]
+      () => [_providedStyle, styles.container, containerAnimatedStyle],
+      [_providedStyle, containerAnimatedStyle]
     );
     const contentContainerStyle = useMemo<ViewStyle>(
       () => ({
diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index 3b1d58c..cff749c 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { ViewStyle } from 'react-native';
 import type Animated from 'react-native-reanimated';
 import type {
   GestureHandlerProperties,
@@ -91,6 +92,26 @@ export interface BottomSheetProps
    */
   animateOnMount?: boolean;
 
+  /**
+   * View style to be applied at the sheet container,
+   * it also could be an Animated Style.
+   * @type Animated.AnimateStyle<ViewStyle>
+   * @default undefined
+   */
+  style?: Animated.AnimateStyle<
+    Omit<
+      ViewStyle,
+      | 'flexDirection'
+      | 'position'
+      | 'top'
+      | 'left'
+      | 'bottom'
+      | 'right'
+      | 'opacity'
+      | 'transform'
+    >
+  >;
+
   // animated nodes
   /**
    * Animated value to be used as a callback of the position node internally.