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