@sdcx/overlay 0.3.0 → 0.5.0

package/RNOverlay.podspec

@@ -10,7 +10,7 @@ Pod::Spec.new do |s|
   s.homepage     = package["homepage"]
   s.license      = package["license"]
   s.authors      = package["author"]
-  s.platforms    = { :ios => "10.0" }
+  s.platforms    = { :ios => "11.0" }
   s.source       = { :git => "https://github.com/github-account/overlay.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/Overlay/**/*.{h,m,mm}"

package/android/build.gradle

@@ -32,4 +32,5 @@ android {
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
     implementation 'com.facebook.react:react-native:+'
+    implementation "androidx.appcompat:appcompat:1.3.1"
 }

package/android/src/main/java/com/reactnative/overlay/OverlayModule.java

@@ -3,15 +3,21 @@ package com.reactnative.overlay;
 import android.app.Activity;
 
 import androidx.annotation.NonNull;
+import androidx.core.graphics.Insets;
+import androidx.core.view.ViewCompat;
+import androidx.core.view.WindowInsetsCompat;
 
 import com.facebook.common.logging.FLog;
 import com.facebook.react.ReactNativeHost;
+import com.facebook.react.bridge.JavaOnlyMap;
 import com.facebook.react.bridge.LifecycleEventListener;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.UiThreadUtil;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.PixelUtil;
 
 import java.util.HashMap;
 public class OverlayModule extends ReactContextBaseJavaModule implements LifecycleEventListener {
@@ -53,7 +59,7 @@ public class OverlayModule extends ReactContextBaseJavaModule implements Lifecyc
     }
 
     @ReactMethod
-    public void show(final String moduleName, final ReadableMap props, final ReadableMap options) {
+    public void show(final String moduleName, final ReadableMap options) {
         UiThreadUtil.runOnUiThread(() -> {
             final Activity activity = getCurrentActivity();
             if (activity == null || activity.isFinishing()) {
@@ -65,21 +71,24 @@ public class OverlayModule extends ReactContextBaseJavaModule implements Lifecyc
                 overlay.update();
                 return;
             }
-
+            
+            int id = options.getInt("id");
+            WritableMap props = JavaOnlyMap.deepClone(options);
+            props.putMap("insets", getInsets(activity));
             overlay = new Overlay(activity, moduleName, reactNativeHost.getReactInstanceManager());
             overlay.show(props, options);
-            overlays.put(moduleName, overlay);
+            overlays.put(genOverlayKey(moduleName, id), overlay);
         });
     }
-
+    
     @ReactMethod
-    public void hide(String moduleName) {
+    public void hide(String moduleName, int id) {
         UiThreadUtil.runOnUiThread(() -> {
-            Overlay overlay = overlays.get(moduleName);
+            Overlay overlay = overlays.get(genOverlayKey(moduleName, id));
             if (overlay == null) {
                 return;
             }
-            overlays.remove(moduleName);
+            overlays.remove(genOverlayKey(moduleName, id));
             overlay.hide();
         });
     }
@@ -99,4 +108,22 @@ public class OverlayModule extends ReactContextBaseJavaModule implements Lifecyc
         FLog.i("OverlayModule", "onHostDestroy");
         handleDestroy();
     }
+    
+    private String genOverlayKey(String moduleName, int id) {
+        return moduleName + "-" + id;
+    }
+    
+    private ReadableMap getInsets(Activity activity) {
+        WindowInsetsCompat windowInsets = ViewCompat.getRootWindowInsets(activity.getWindow().getDecorView());
+        assert windowInsets != null;
+        Insets navigationBarInsets = windowInsets.getInsetsIgnoringVisibility(WindowInsetsCompat.Type.navigationBars());
+        Insets statusBarInsets = windowInsets.getInsetsIgnoringVisibility(WindowInsetsCompat.Type.statusBars());
+        Insets displayCutoutInsets = windowInsets.getInsetsIgnoringVisibility(WindowInsetsCompat.Type.displayCutout());
+        WritableMap insets = new JavaOnlyMap();
+        insets.putDouble("left", PixelUtil.toDIPFromPixel(Math.max(navigationBarInsets.left, displayCutoutInsets.left)));
+        insets.putDouble("top", PixelUtil.toDIPFromPixel(statusBarInsets.top));
+        insets.putDouble("right", PixelUtil.toDIPFromPixel(Math.max(navigationBarInsets.right, displayCutoutInsets.right)));
+        insets.putDouble("bottom", PixelUtil.toDIPFromPixel(navigationBarInsets.bottom));
+        return insets;
+    }
 }

package/ios/Overlay/RNOverlayModule.m

@@ -5,6 +5,11 @@
 #import <React/RCTBridge.h>
 
 
+NSString* genKey(NSString* moduleName, NSNumber* id) {
+    return [NSString stringWithFormat:@"%@-%@", moduleName, id];
+}
+
+
 @interface RNOverlayModule ()
 
 @property(nonatomic, strong) NSMutableDictionary *overlays;
@@ -45,25 +50,38 @@
 RCT_EXPORT_MODULE(OverlayHost)
 
 
-RCT_EXPORT_METHOD(show:(NSString *)moduleName props:(NSDictionary *)props options:(NSDictionary *)options) {
-    RNOverlay *overlay = self.overlays[moduleName];
+RCT_EXPORT_METHOD(show:(NSString *)moduleName options:(NSDictionary *)options) {
+    NSString* key = genKey(moduleName, options[@"id"]);
+    RNOverlay *overlay = self.overlays[key];
     if (overlay != nil) {
         [overlay update];
         return;
     }
     
     overlay = [[RNOverlay alloc] initWithModuleName:moduleName bridge:self.bridge];
-    self.overlays[moduleName] = overlay;
+    self.overlays[key] = overlay;
+    
+    UIWindow *window = RCTKeyWindow();
+    UIEdgeInsets safeAreaInsets = window.safeAreaInsets;
+    NSDictionary* insets = @{
+      @"top" : @(safeAreaInsets.top),
+      @"right" : @(safeAreaInsets.right),
+      @"bottom" : @(safeAreaInsets.bottom),
+      @"left" : @(safeAreaInsets.left),
+    };
     
+    NSMutableDictionary *props = [options mutableCopy];
+    [props setObject:insets forKey:@"insets"];
     [overlay show:props options:options];
 }
 
-RCT_EXPORT_METHOD(hide:(NSString *)moduleName) {
-    RNOverlay *overlay = self.overlays[moduleName];
+RCT_EXPORT_METHOD(hide:(NSString *)moduleName id:(nonnull NSNumber *)id) {
+    NSString* key = genKey(moduleName, id);
+    RNOverlay *overlay = self.overlays[key];
     if (!overlay) {
         return;
     }
-    [self.overlays removeObjectForKey:moduleName];
+    [self.overlays removeObjectForKey:key];
     [overlay hide];
 }
 

package/lib/index.d.ts

@@ -1,11 +1,13 @@
-interface OverlayOptions {
+import { Insets } from 'react-native';
+export interface OverlayOptions {
+    id: number;
     passThroughTouches?: boolean;
 }
-interface PropsType {
-    [index: string]: any;
+export interface OverlayProps extends OverlayOptions {
+    insets: Insets;
 }
-declare function show<P extends PropsType = {}>(moduleName: string, props?: P, options?: OverlayOptions): void;
-declare function hide(moduleName: string): void;
+declare function show(moduleName: string, options: OverlayOptions): void;
+declare function hide(moduleName: string, id: number): void;
 declare const Overlay: {
     show: typeof show;
     hide: typeof hide;

package/lib/index.js

@@ -1,10 +1,10 @@
 import { NativeModules } from 'react-native';
 const OverlayHost = NativeModules.OverlayHost;
-function show(moduleName, props, options = {}) {
-    OverlayHost.show(moduleName, props, options);
+function show(moduleName, options) {
+    OverlayHost.show(moduleName, options);
 }
-function hide(moduleName) {
-    OverlayHost.hide(moduleName);
+function hide(moduleName, id) {
+    OverlayHost.hide(moduleName, id);
 }
 const Overlay = { show, hide };
 export { Overlay };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sdcx/overlay",
   "description": "A react-native Overlay component.",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
   "react-native": "src/index",

package/src/index.ts

@@ -1,25 +1,27 @@
-import { NativeModule, NativeModules } from 'react-native'
+import { Insets, NativeModule, NativeModules } from 'react-native'
 
-interface OverlayOptions {
+export interface OverlayOptions {
+  id: number
   passThroughTouches?: boolean
 }
 
-interface PropsType {
-  [index: string]: any
+export interface OverlayProps extends OverlayOptions {
+  insets: Insets
 }
+
 interface OverlayInterface extends NativeModule {
-  show<P extends PropsType = {}>(moduleName: string, props?: P, options?: OverlayOptions): void
-  hide(moduleName: string): void
+  show(moduleName: string, options: OverlayOptions): void
+  hide(moduleName: string, id: number): void
 }
 
 const OverlayHost: OverlayInterface = NativeModules.OverlayHost
 
-function show<P extends PropsType = {}>(moduleName: string, props?: P, options: OverlayOptions = {}) {
-  OverlayHost.show(moduleName, props, options)
+function show(moduleName: string, options: OverlayOptions) {
+  OverlayHost.show(moduleName, options)
 }
 
-function hide(moduleName: string) {
-  OverlayHost.hide(moduleName)
+function hide(moduleName: string, id: number) {
+  OverlayHost.hide(moduleName, id)
 }
 
 const Overlay = { show, hide }