feat(bottomsheet): backgroundOpacity option

Author: farfromrefuge

src/bottomsheet/bottomsheet-common.ts

@@ -37,6 +37,7 @@ export interface BottomSheetOptions {
     closeCallback?: Function; //  A function that will be called when the view is closed. Any arguments provided when calling shownInBottomSheet.closeCallback will be available here.
     trackingScrollView?: string; // optional id of the scroll view to track
     transparent?: boolean; // optional parameter to make the bottomsheet transparent
+    backgroundOpacity?: number; // optional parameter to make the bottomsheet background semi transparent
     ignoreTopSafeArea?: boolean; // optional ios parameter to top safe area. Default is true
     ignoreBottomSafeArea?: boolean; // optional ios parameter to bottom safe area. Default is false
     disableDimBackground?: boolean; // optional parameter to remove the dim background

src/bottomsheet/bottomsheet.android.ts

@@ -75,7 +75,6 @@ export class ViewWithBottomSheet extends ViewWithBottomSheetBase {
         this._bottomSheetFragment = null;
     }
 
-
     protected _showNativeBottomSheet(parent: View, options: BottomSheetOptions) {
         this._commonShowNativeBottomSheet(parent, options);
         const owner = this;
@@ -153,7 +152,6 @@ export class ViewWithBottomSheet extends ViewWithBottomSheetBase {
             },
 
             onStart(fragment: com.nativescript.material.bottomsheet.BottomSheetDialogFragment): void {
-                const color = owner.backgroundColor;
                 const contentViewId = getId('design_bottom_sheet');
                 const view = fragment.getDialog().findViewById(contentViewId);
                 const transparent = bottomSheetOptions.options?.transparent === true;
@@ -162,6 +160,13 @@ export class ViewWithBottomSheet extends ViewWithBottomSheetBase {
                     setTimeout(() => {
                         view.setBackground(null);
                     }, 0);
+                } else if (bottomSheetOptions.options?.backgroundOpacity) {
+                    // we need delay it just a bit or it wont work
+                    setTimeout(() => {
+                        const backgroundDrawable = view.getBackground();
+                        backgroundDrawable.setAlpha(bottomSheetOptions.options?.backgroundOpacity * 255);
+                        view.setBackground(backgroundDrawable);
+                    }, 0);
                 }
 
                 const behavior = com.google.android.material.bottomsheet.BottomSheetBehavior.from(view);

src/bottomsheet/bottomsheet.ios.ts

@@ -421,8 +421,13 @@ export class ViewWithBottomSheet extends ViewWithBottomSheetBase {
             controller.view.backgroundColor = UIColor.clearColor;
             // for it to be prettier let s disable elevation
             controller.view['elevation'] = 0;
-        } else if (!(this instanceof Page)) {
-            controller.view.backgroundColor = majorVersion <= 12 && !UIColor.systemBackgroundColor ? UIColor.whiteColor : UIColor.systemBackgroundColor;
+        } else {
+            if (!(this instanceof Page)) {
+                controller.view.backgroundColor = majorVersion <= 12 && !UIColor.systemBackgroundColor ? UIColor.whiteColor : UIColor.systemBackgroundColor;
+            }
+            if (options.backgroundOpacity) {
+                controller.view.backgroundColor = controller.view.backgroundColor.colorWithAlphaComponent(options.backgroundOpacity);
+            }
         }
         const transitionCoordinator = bottomSheet.transitionCoordinator;
         if (transitionCoordinator) {