feat: added style prop (#189)

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

* chore: updated examples

example/src/components/contactList/index.ts

@@ -1 +1 @@
-export { default } from './ContactList';
+export { default, ContactListProps } from './ContactList';

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,
   },
 });

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>(
       () => ({

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.