feat: allow to override sheet container style (#265)

* chore: added style to bottom sheet props * chore: updated backdrop example
gorhom · Feb 7, 2021 · a723f22 · a723f22
1 parent 59eac0d
commit a723f22
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 47 deletions.
diff --git 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,14 +26,6 @@ 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
@@ -70,9 +62,11 @@ const BackdropExample = () => {
         ref={bottomSheetRef}
         index={1}
         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,27 +77,17 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: 24,
   },
-  contentContainerStyle: {
-    paddingTop: 12,
-    paddingHorizontal: 24,
-    backgroundColor: 'white',
-  },
-  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,
+  sheetContainer: {
+    shadowColor: '#000',
     backgroundColor: 'white',
+    shadowOffset: {
+      width: 0,
+      height: 11,
+    },
+    shadowOpacity: 0.55,
+    shadowRadius: 14.78,
+
+    elevation: 22,
   },
   buttonContainer: {
     marginBottom: 6,

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -87,6 +87,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       // animations configurations
       animationDuration = DEFAULT_ANIMATION_DURATION,
       animationEasing = DEFAULT_ANIMATION_EASING,
+
       // configurations
       index: _providedIndex = 0,
       snapPoints: _providedSnapPoints,
@@ -96,12 +97,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       enableContentPanningGesture = DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
       enableHandlePanningGesture = DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
       animateOnMount = DEFAULT_ANIMATE_ON_MOUNT,
+      style: _providedStyle,
+
       // animated nodes callback
       animatedPosition: _providedAnimatedPosition,
       animatedIndex: _providedAnimatedIndex,
+
       // callbacks
       onChange: _providedOnChange,
       onAnimate: _providedOnAnimate,
+
       // components
       handleComponent,
       backdropComponent,
@@ -365,7 +370,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const handleClose = useCallback(() => {
       const currentIndexValue = currentIndexRef.current;
       if (currentIndexValue === -1 || isClosing.current) {
-       return;
+        return;
       }
       isClosing.current = true;
       manualSnapToPoint.setValue(safeContainerHeight);
@@ -436,21 +441,24 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region styles
-    const containerStyle = useMemo<Animated.AnimateStyle<ViewStyle>>(
-      () => ({
-        ...styles.container,
-        opacity: animatedIsLayoutReady,
-        transform: [
-          {
-            translateY: cond(
-              animatedIsLayoutReady,
-              position,
-              safeContainerHeight
-            ),
-          },
-        ],
-      }),
-      [safeContainerHeight, position, animatedIsLayoutReady]
+    const containerStyle = useMemo(
+      () => [
+        _providedStyle,
+        styles.container,
+        {
+          opacity: animatedIsLayoutReady,
+          transform: [
+            {
+              translateY: cond(
+                animatedIsLayoutReady,
+                position,
+                safeContainerHeight
+              ),
+            },
+          ],
+        },
+      ],
+      [safeContainerHeight, _providedStyle, position, animatedIsLayoutReady]
     );
     const contentContainerStyle = useMemo(
       () => ({

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -63,6 +63,27 @@ export type BottomSheetProps = {
    * @default false
    */
   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.