Merge pull request #438 from nguyenthanhan/master

fix: add enableElevation prop to ActionSheet for shadow support

Author: ammarahm-ed

docs/pages/reference/actionsheet.mdx

@@ -196,6 +196,16 @@ Choose how far off the user needs to drag the action sheet to make it snap to ne
 
 Default: `50`
 
+## `enableElevation`
+
+Enable elevation on the action sheet container.
+
+| Type      | Required |
+| --------- | -------- |
+| `boolean` | no       |
+
+Default: `true`
+
 ## `elevation`
 
 Set elevation to the ActionSheet container.

src/index.tsx

@@ -77,6 +77,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
       closeOnPressBack = true,
       springOffset = 50,
       elevation = 5,
+      enableElevation = true,
       defaultOverlayOpacity = 0.3,
       overlayColor = 'black',
       closable = true,
@@ -1533,12 +1534,16 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
                         borderBottomLeftRadius:
                           containerStyle?.borderBottomLeftRadius || undefined,
                         borderBottomRightRadius:
-                          containerStyle?.borderBottomRightRadius || undefined,
-                        borderRadius: containerStyle?.borderRadius || undefined,
-                        width: containerStyle?.width || '100%',
-                        ...getElevation(
-                          typeof elevation === 'number' ? elevation : 5,
-                        ),
+                          props.containerStyle?.borderBottomRightRadius ||
+                          undefined,
+                        borderRadius:
+                          props.containerStyle?.borderRadius || undefined,
+                        width: props.containerStyle?.width || '100%',
+                        ...(enableElevation
+                          ? getElevation(
+                              typeof elevation === 'number' ? elevation : 5,
+                            )
+                          : {}),
                         flex: undefined,
                         height: dimensions.height,
                         maxHeight: dimensions.height,

src/types.ts

@@ -156,6 +156,13 @@ export type ActionSheetProps<SheetId extends keyof Sheets = never> = {
    */
   keyboardHandlerEnabled?: boolean;
 
+  /**
+   * Enable elevation. This will add a shadow to the ActionSheet.
+   *
+   * Default: `true`
+   */
+  enableElevation?: boolean;
+
   /**
    * Add elevation to the ActionSheet container.
    *