refactor: allow passing style to the container

gorhom · May 21, 2022 · 5e1ed9d · 5e1ed9d
1 parent ce5115a
commit 5e1ed9d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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,20 +18,22 @@ 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,
         bottom: bottomInset,
         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
@@ -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;
 }