Added tapBackgroundToDismiss to LightBox screens (#1416)

* Added tapBackgroundToDismiss to LightBox screens

* Updated LightBox readme

* Formatting updates

* Fixed ios selector

* Updated animationEnd hide method

android/app/src/main/java/com/reactnativenavigation/params/LightBoxParams.java

@@ -4,4 +4,5 @@ public class LightBoxParams {
     public String screenId;
     public NavigationParams navigationParams;
     public StyleParams.Color backgroundColor;
+    public boolean tapBackgroundToDismiss;
 }

android/app/src/main/java/com/reactnativenavigation/params/parsers/LightBoxParamsParser.java

@@ -1,7 +1,6 @@
 package com.reactnativenavigation.params.parsers;
 
 import android.os.Bundle;
-
 import com.reactnativenavigation.params.LightBoxParams;
 import com.reactnativenavigation.params.NavigationParams;
 
@@ -20,6 +19,7 @@ public class LightBoxParamsParser extends Parser {
         result.screenId = params.getString("screenId");
         result.navigationParams = new NavigationParams(params.getBundle("navigationParams"));
         result.backgroundColor = getColor(params, "backgroundColor");
+        result.tapBackgroundToDismiss = params.getBoolean("tapBackgroundToDismiss");
         return result;
     }
 }

android/app/src/main/java/com/reactnativenavigation/views/LightBox.java

@@ -54,6 +54,15 @@ public class LightBox extends Dialog implements DialogInterface.OnDismissListene
         lightBox.setBackgroundColor(params.backgroundColor.getColor());
         lightBox.addView(content, lp);
 
+        if (params.tapBackgroundToDismiss) {
+            lightBox.setOnClickListener(new View.OnClickListener() {
+                @Override
+                public void onClick(View v) {
+                    hide();
+                }
+            });
+        }
+
         content.setOnDisplayListener(new Screen.OnDisplayListener() {
             @Override
             public void onDisplay() {
@@ -123,7 +132,7 @@ public class LightBox extends Dialog implements DialogInterface.OnDismissListene
         allAnimators.addListener(new AnimatorListenerAdapter() {
             @Override
             public void onAnimationEnd(Animator animation) {
-                dismiss();
+                destroy();
             }
         });
         allAnimators.start();

docs/top-level-api.md

@@ -145,7 +145,8 @@ Navigation.showLightBox({
   passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
   style: {
     backgroundBlur: "dark", // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
-    backgroundColor: "#ff000080" // tint color for the background, you can specify alpha here (optional)
+    backgroundColor: "#ff000080", // tint color for the background, you can specify alpha here (optional)
+    tapBackgroundToDismiss: true // dismisses LightBox on background taps (optional)
   }
 });
 ```

ios/RCCLightBox.m

@@ -41,7 +41,7 @@ const NSInteger kLightBoxTag = 0x101010;
                 self.visualEffectView.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
                 [self addSubview:self.visualEffectView];
             }
-            
+
             if (style[@"backgroundColor"] != nil)
             {
                 UIColor *backgroundColor = [RCTConvert UIColor:style[@"backgroundColor"]];
@@ -51,6 +51,12 @@ const NSInteger kLightBoxTag = 0x101010;
                     self.overlayColorView.backgroundColor = backgroundColor;
                     self.overlayColorView.alpha = 0;
                     [self addSubview:self.overlayColorView];
+
+                    if (style[@"tapBackgroundToDismiss"] != nil && [RCTConvert BOOL:style[@"tapBackgroundToDismiss"]])
+                    {
+                        UITapGestureRecognizer *singleTap=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissAnimated)];
+                        [self.overlayColorView addGestureRecognizer:singleTap];
+                    }
                 }
             }
         }

src/deprecated/platformSpecificDeprecated.android.js

@@ -444,6 +444,7 @@ function showLightBox(params) {
       params.backgroundColor = processColor('transparent');
     }
   }
+  params.tapBackgroundToDismiss = _.get(params, 'style.tapBackgroundToDismiss') || false;
   newPlatformSpecific.showLightBox(params);
 }