feat: add custom-background example

Author: ammarahm-ed

app/examples.tsx

@@ -27,6 +27,12 @@ const MainScreen = () => {
       onOpen: () => {
         actionSheetRef.current?.show();
       },
+    },
+     {
+      title: 'Custom Background',
+      onOpen: () => {
+          SheetManager.show('custom-background');
+      },
     },
     {
       title: 'Hello',

app/examples/custom-background.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {Text, View} from 'react-native';
+import ActionSheet, {SheetManager} from 'react-native-actions-sheet';
+import LinearGradient from 'react-native-linear-gradient';
+
+export function CustomBackground() {
+  return (
+    <ActionSheet
+      CustomHeaderComponent={<></>}
+      gestureEnabled
+      containerStyle={{
+        height: '40%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'transparent',
+      }}>
+      <LinearGradient
+        colors={['#4c669f', '#3b5998', '#192f6a']}
+        style={{
+          width: '100%',
+          height: 400,
+          borderTopLeftRadius: 10,
+          borderTopRightRadius: 10,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <View
+          style={{
+            width: 100,
+            height: 6,
+            backgroundColor: '#f0f0f0',
+            borderRadius: 10,
+            opacity: 0.3,
+            position: 'absolute',
+            top: 10,
+          }}
+        />
+
+        <Text
+          onPress={() => {
+            SheetManager.show('hello_two');
+          }}
+          style={{
+            color: 'white',
+            fontSize: 30,
+          }}>
+          Hello!
+        </Text>
+      </LinearGradient>
+    </ActionSheet>
+  );
+}

app/sheets.tsx

@@ -22,6 +22,7 @@ import RouterSheet from './examples/router';
 import ScrollViewSheet from './examples/scrollview';
 import ResizeSheet from './examples/scrollview-resize';
 import SnapMe from './examples/snap-me';
+import { CustomBackground } from './examples/custom-background';
 
 /**
  * We extend some of the types here to give us great intellisense
@@ -64,6 +65,7 @@ declare module 'react-native-actions-sheet' {
     }>;
     'legend-list': SheetDefinition;
     'custom-scroll-handlers': SheetDefinition;
+    "custom-background": SheetDefinition
   }
 }
 
@@ -86,7 +88,8 @@ const sheets: SheetRegisterProps['sheets'] = {
   'floating-sheet': FloatingSheet,
   'legend-list': LegendListExample,
   'custom-scroll-handlers': CustomScrollHandlers,
-  "hello_two": Hello_Two
+  "hello_two": Hello_Two,
+  "custom-background": CustomBackground
 };
 
 export const AppSheets = () => {

docs/pages/guides/safearea.mdx

@@ -8,8 +8,8 @@ The first one is `useBottomSafeAreaPadding`. This prop uses the top padding as a
 <ActionSheet useBottomSafeAreaPadding />
 ```
 
-The second one is `drawUnderStatusBar`. This is useful for action sheets that cover full screen. In that case, the sheet will grow under the StatusBar by default. However you can set this to `false` if you don't want that default behavior.
+The second one is `drawUnderStatusBar`. This is useful for action sheets that cover full screen. In that case, the sheet will grow under the StatusBar.
 
 ```tsx
-<ActionSheet drawUnderStatusBar={false} />
+<ActionSheet drawUnderStatusBar={true} />
 ```

docs/pages/reference/actionsheet.mdx

@@ -288,7 +288,7 @@ Draw action sheet container under the status bar.
 | ------- | -------- |
 | boolean | no       |
 
-Default: `true`
+Default: `false`
 
 ## `overdrawEnabled`