From 5e1ed9da98913d47b27912f49cf7e12b2393176e Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom.dev@gmail.com>
Date: Sat, 21 May 2022 15:38:39 +0100
Subject: [PATCH] refactor: allow passing style to the container

---
 src/components/bottomSheet/BottomSheet.tsx         |  2 ++
 src/components/bottomSheet/types.d.ts              | 12 +++++++++---
 .../bottomSheetContainer/BottomSheetContainer.tsx  | 14 +++++++++++---
 src/components/bottomSheetContainer/types.d.ts     |  3 ++-
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 1256ba3dd..e3bfa0c39 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -107,6 +107,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
       // styles
       style: _providedStyle,
+      containerStyle: _providedContainerStyle,
       backgroundStyle: _providedBackgroundStyle,
       handleStyle: _providedHandleStyle,
       handleIndicatorStyle: _providedHandleIndicatorStyle,
@@ -1604,6 +1605,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               topInset={topInset}
               bottomInset={bottomInset}
               detached={detached}
+              style={_providedContainerStyle}
             >
               <Animated.View style={containerStyle}>
                 <BottomSheetBackgroundContainer
diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index 40ed817ce..c489981e1 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -162,6 +162,13 @@ export interface BottomSheetProps
 
   //#endregion
 
+  //#region styles
+  /**
+   * View style to be applied to the container.
+   * @type ViewStyle
+   * @default undefined
+   */
+  containerStyle?: StyleProp<ViewStyle>;
   /**
    * View style to be applied to the sheet container component,
    * it also could be an Animated Style.
@@ -185,7 +192,6 @@ export interface BottomSheetProps
   >;
   /**
    * View style to be applied to the background component.
-   *
    * @type ViewStyle
    * @default undefined
    */
@@ -194,18 +200,18 @@ export interface BottomSheetProps
   >;
   /**
    * View style to be applied to the handle component.
-   *
    * @type ViewStyle
    * @default undefined
    */
   handleStyle?: StyleProp<ViewStyle>;
   /**
    * View style to be applied to the handle indicator component.
-   *
    * @type ViewStyle
    * @default undefined
    */
   handleIndicatorStyle?: StyleProp<ViewStyle>;
+  //#endregion
+
   /**
    * Custom hook to provide pan gesture events handler, which will allow advance and
    * customize handling for pan gesture.
diff --git a/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
index b1760dd27..9d42ef185 100644
--- a/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+++ b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
@@ -1,5 +1,11 @@
 import React, { memo, useCallback, useMemo, useRef } from 'react';
-import { LayoutChangeEvent, StatusBar, View, ViewStyle } from 'react-native';
+import {
+  LayoutChangeEvent,
+  StatusBar,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
 import { WINDOW_HEIGHT } from '../../constants';
 import { print } from '../../utilities';
 import { styles } from './styles';
@@ -12,12 +18,14 @@ function BottomSheetContainerComponent({
   bottomInset = 0,
   shouldCalculateHeight = true,
   detached,
+  style,
   children,
 }: BottomSheetContainerProps) {
   const containerRef = useRef<View>(null);
   //#region styles
-  const containerStyle = useMemo<ViewStyle[]>(
+  const containerStyle = useMemo<StyleProp<ViewStyle>>(
     () => [
+      style,
       styles.container,
       {
         top: topInset,
@@ -25,7 +33,7 @@ function BottomSheetContainerComponent({
         overflow: detached ? 'visible' : 'hidden',
       },
     ],
-    [detached, topInset, bottomInset]
+    [style, detached, topInset, bottomInset]
   );
   //#endregion
 
diff --git a/src/components/bottomSheetContainer/types.d.ts b/src/components/bottomSheetContainer/types.d.ts
index 721a91826..a2193eddb 100644
--- a/src/components/bottomSheetContainer/types.d.ts
+++ b/src/components/bottomSheetContainer/types.d.ts
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { Insets } from 'react-native';
+import type { Insets, StyleProp, ViewStyle } from 'react-native';
 import type Animated from 'react-native-reanimated';
 import type { BottomSheetProps } from '../bottomSheet/types';
 
@@ -10,5 +10,6 @@ export interface BottomSheetContainerProps
   containerHeight: Animated.SharedValue<number>;
   containerOffset: Animated.SharedValue<Insets>;
   shouldCalculateHeight?: boolean;
+  style?: StyleProp<ViewStyle>;
   children: ReactNode;
 }