@sdcx/overlay 0.4.0 → 1.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 http://www.sdcx.tech
+Copyright (c) 2025 listenzz@163.com
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,6 +2,15 @@
 
 `Overlay` 是一个 React Native 原生 UI 基础设施，它漂浮在你的 React Native 应用之上，可用于实现 Modal, Alert, Toast, Popover, Notification, Hoverball 等顶层 UI。
 
+> 这个库属于实验性质，请谨慎使用
+
+## 版本兼容
+
+| 版本 | RN 版本 | RN 架构 |
+| ---- | ------- | ------- |
+| 0.x  | < 0.82  | 旧架构  |
+| 1.x  | >= 0.82 | 新架构  |
+
 ## Installation
 
 ```bash
@@ -24,7 +33,7 @@ module.exports = {
       },
     },
   },
-}
+};
 ```
 
 ## Usage

package/RNOverlay.podspec

@@ -6,13 +6,13 @@ Pod::Spec.new do |s|
   s.name         = "RNOverlay"
   s.version      = package["version"]
   s.summary      = package["description"]
- 
+
   s.homepage     = package["homepage"]
   s.license      = package["license"]
   s.authors      = package["author"]
-  s.platforms    = { :ios => "10.0" }
+  s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/github-account/overlay.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/Overlay/**/*.{h,m,mm}"
-  s.dependency "React-Core"
-end
+  install_modules_dependencies(s)
+end

package/android/build.gradle

@@ -1,35 +1,57 @@
-// android/build.gradle
+buildscript {
+	repositories {
+		mavenCentral()
+		google()
+	}
 
-def safeExtGet(prop, fallback) {
-    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+	dependencies {
+		classpath "com.android.tools.build:gradle:8.7.2"
+	}
 }
 
 apply plugin: 'com.android.library'
+apply plugin: 'com.facebook.react'
+
+def safeExtGet(prop, fallback) {
+	rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
 
 android {
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
-
-    compileSdkVersion safeExtGet('compileSdkVersion', 30)
-    buildToolsVersion safeExtGet('buildToolsVersion', '30.0.2')
-
-    defaultConfig {
-        minSdkVersion safeExtGet('minSdkVersion', 21)
-        targetSdkVersion safeExtGet('targetSdkVersion', 30)
-        versionCode 1
-        versionName "1.0.0"
-    }
-
-    buildTypes {
-        release {
-            consumerProguardFiles 'proguard-rules.pro'
-        }
-    }
+
+	def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+	// Check AGP version for backward compatibility w/react-native versions still on gradle plugin 6
+	def major = agpVersion[0].toInteger()
+	def minor = agpVersion[1].toInteger()
+	if ((major == 7 && minor >= 3) || major >= 8) {
+		namespace "com.reactnative.overlay"
+		buildFeatures {
+			buildConfig true
+		}
+	}
+
+	compileSdkVersion safeExtGet('compileSdkVersion', 35)
+	buildToolsVersion safeExtGet('buildToolsVersion', '35.0.0')
+
+	defaultConfig {
+		minSdkVersion safeExtGet('minSdkVersion', 24)
+		targetSdkVersion safeExtGet('targetSdkVersion', 35)
+	}
+
+	sourceSets {
+		main {
+			java.srcDirs += [
+				"generated/java",
+				"generated/jni"
+			]
+		}
+	}
+}
+
+repositories {
+	google()
+	mavenCentral()
 }
 
 dependencies {
-    implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation 'com.facebook.react:react-native:+'
+	api 'com.facebook.react:react-native:+'
 }

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

@@ -3,98 +3,84 @@ package com.reactnative.overlay;
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 
 import android.app.Activity;
-import android.os.Bundle;
-import android.view.Gravity;
 import android.view.ViewGroup;
 import android.view.Window;
-import android.widget.FrameLayout;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.UiThread;
 
-import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactHost;
 import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.interfaces.fabric.ReactSurface;
 
 @UiThread
 public class Overlay {
 
-    final Activity activity;
-    final String moduleName;
-
-    final ReactInstanceManager reactInstanceManager;
-
-    OverlayRootView rootView;
-    ViewGroup decorView;
-
-    public Overlay(@NonNull Activity activity, String moduleName, ReactInstanceManager reactInstanceManager) {
-        this.activity = activity;
-        this.moduleName = moduleName;
-        this.reactInstanceManager = reactInstanceManager;
-    }
-
-    public void show(ReadableMap props, ReadableMap options) {
-        OverlayRootView reactRootView = createReactRootView();
-
-        if (options.hasKey("passThroughTouches")) {
-            reactRootView.setShouldConsumeTouchEvent(!options.getBoolean("passThroughTouches"));
-        }
-
-        this.rootView = reactRootView;
-        startReactApplication(reactRootView, Arguments.toBundle(props));
-        decorView = getDecorView();
-        if (decorView != null) {
-            decorView.addView(reactRootView);
-        }
-    }
-
-    public void hide() {
-        if (decorView != null) {
-            decorView.removeView(rootView);
-            decorView = null;
-        }
-
-        unmountReactView();
-    }
-
-    public void update() {
-        ViewGroup decorView = getDecorView();
-        if (decorView != null && decorView != this.decorView) {
-            this.decorView.removeView(rootView);
-            this.decorView = decorView;
-            decorView.addView(rootView);
-        }
-    }
-
-    private void unmountReactView() {
-        ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
-        if (reactContext == null || !reactContext.hasActiveCatalystInstance()) {
-            return;
-        }
-
-        if (rootView != null) {
-            rootView.unmountReactApplication();
-            rootView = null;
-        }
-    }
-
-    private void startReactApplication(OverlayRootView reactRootView, Bundle props) {
-        reactRootView.startReactApplication(reactInstanceManager, moduleName, props);
-    }
-
-    private OverlayRootView createReactRootView() {
-        OverlayRootView reactRootView = new OverlayRootView(activity);
-        reactRootView.setLayoutParams(new FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT, Gravity.CENTER));
-        return reactRootView;
-    }
-
-    private ViewGroup getDecorView() {
-        Window window = activity.getWindow();
-        if (window == null) {
-            return null;
+	final Activity activity;
+	final String moduleName;
+	final ReactHost reactHost;
+
+	ViewGroup rootView;
+	ViewGroup decorView;
+	ReactSurface reactSurface;
+
+	public Overlay(@NonNull Activity activity, String moduleName, ReactHost reactHost) {
+		this.activity = activity;
+		this.moduleName = moduleName;
+		this.reactHost = reactHost;
+	}
+
+	public void show(ReadableMap props, ReadableMap options) {
+
+		decorView = getDecorView();
+		if (decorView == null) {
+			return;
+		}
+
+		ReactSurface reactSurface = reactHost.createSurface(activity, moduleName, Arguments.toBundle(props));
+		this.reactSurface = reactSurface;
+		ViewGroup view = reactSurface.getView();
+		ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT);
+		OverlayRootView root = new OverlayRootView(activity);
+		root.addView(view, layoutParams);
+		this.rootView = root;
+		decorView.addView(root, layoutParams);
+		if (options.hasKey("passThroughTouches")) {
+			root.setPassThroughTouches(options.getBoolean("passThroughTouches"));
         }
-        return (ViewGroup) window.getDecorView();
-    }
+		reactSurface.start();
+	}
+
+	public void hide() {
+		if (decorView != null) {
+			decorView.removeView(rootView);
+			decorView = null;
+		}
+		unmountReactView();
+	}
+
+	public void update() {
+		ViewGroup decorView = getDecorView();
+		if (decorView != null && decorView != this.decorView) {
+			this.decorView.removeView(rootView);
+			this.decorView = decorView;
+			decorView.addView(rootView);
+		}
+	}
+
+	private void unmountReactView() {
+		if (reactSurface != null) {
+			reactSurface.stop();
+		}
+	}
+
+	private ViewGroup getDecorView() {
+		Window window = activity.getWindow();
+		if (window == null) {
+			return null;
+		}
+		return (ViewGroup) window.getDecorView();
+	}
 
 }

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

@@ -3,109 +3,130 @@ 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.ReactHost;
 import com.facebook.react.ReactNativeHost;
-import com.facebook.react.bridge.Arguments;
+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.defaults.DefaultReactHost;
+import com.facebook.react.uimanager.PixelUtil;
 
 import java.util.HashMap;
-public class OverlayModule extends ReactContextBaseJavaModule implements LifecycleEventListener {
-
-    private final HashMap<String, Overlay> overlays = new HashMap<>();
-    private final ReactApplicationContext reactContext;
-
-    private final ReactNativeHost reactNativeHost;
-
-    public OverlayModule(ReactApplicationContext reactContext, ReactNativeHost reactNativeHost) {
-        super(reactContext);
-        this.reactContext = reactContext;
-        this.reactNativeHost = reactNativeHost;
-        reactContext.addLifecycleEventListener(this);
-    }
-
-    @Override
-    public void invalidate() {
-        reactContext.removeLifecycleEventListener(this);
-        final Activity activity = getCurrentActivity();
-        if (activity == null || activity.isFinishing()) {
-            return;
-        }
-        UiThreadUtil.runOnUiThread(this::handleDestroy);
-    }
-
-    private void handleDestroy() {
-        for (String key : overlays.keySet()) {
-            Overlay overlay = overlays.get(key);
-            overlay.hide();
-        }
-        overlays.clear();
-    }
-
-    @NonNull
-    @Override
-    public String getName() {
-        return "OverlayHost";
-    }
-
-    @ReactMethod
-    public void show(final String moduleName, final ReadableMap options) {
-        UiThreadUtil.runOnUiThread(() -> {
-            final Activity activity = getCurrentActivity();
-            if (activity == null || activity.isFinishing()) {
-                return;
-            }
-
-            Overlay overlay = overlays.get(moduleName);
-            if (overlay != null) {
-                overlay.update();
-                return;
-            }
-            
-            int id = options.getInt("id");
-            WritableMap props = Arguments.createMap();
-            props.putInt("id", id);
-            overlay = new Overlay(activity, moduleName, reactNativeHost.getReactInstanceManager());
-            overlay.show(props, options);
-            overlays.put(genOverlayKey(moduleName, id), overlay);
-        });
-    }
-
-    @ReactMethod
-    public void hide(String moduleName, int id) {
-        UiThreadUtil.runOnUiThread(() -> {
-            Overlay overlay = overlays.get(genOverlayKey(moduleName, id));
-            if (overlay == null) {
-                return;
-            }
-            overlays.remove(genOverlayKey(moduleName, id));
-            overlay.hide();
-        });
-    }
-
-    @Override
-    public void onHostResume() {
-        //
-    }
-
-    @Override
-    public void onHostPause() {
-        //
-    }
-
-    @Override
-    public void onHostDestroy() {
-        FLog.i("OverlayModule", "onHostDestroy");
-        handleDestroy();
-    }
-    
-    private String genOverlayKey(String moduleName, int id) {
-        return moduleName + "-" + id;
-    }
+
+public class OverlayModule extends NativeOverlaySpec implements LifecycleEventListener {
+
+	private final HashMap<String, Overlay> overlays = new HashMap<>();
+	private final ReactApplicationContext reactContext;
+	private final ReactHost reactHost;
+
+	public OverlayModule(ReactApplicationContext reactContext, ReactNativeHost reactNativeHost) {
+		super(reactContext);
+		this.reactContext = reactContext;
+		this.reactHost = DefaultReactHost.getDefaultReactHost(reactContext, reactNativeHost, null);
+		reactContext.addLifecycleEventListener(this);
+	}
+
+	@NonNull
+	@Override
+	public String getName() {
+		return "OverlayHost";
+	}
+
+	@Override
+	public void invalidate() {
+		reactContext.removeLifecycleEventListener(this);
+		final Activity activity = getCurrentActivity();
+		if (activity == null || activity.isFinishing()) {
+			return;
+		}
+		UiThreadUtil.runOnUiThread(this::handleDestroy);
+	}
+
+	private void handleDestroy() {
+		for (String key : overlays.keySet()) {
+			Overlay overlay = overlays.get(key);
+			overlay.hide();
+		}
+		overlays.clear();
+	}
+
+	public void show(final String moduleName, final ReadableMap options) {
+		UiThreadUtil.runOnUiThread(() -> {
+			final Activity activity = getCurrentActivity();
+			if (activity == null || activity.isFinishing()) {
+				return;
+			}
+
+			Overlay overlay = overlays.get(moduleName);
+			if (overlay != null) {
+				overlay.update();
+				return;
+			}
+
+			int id = (int) options.getDouble("overlayId");
+			WritableMap props = JavaOnlyMap.deepClone(options);
+			props.putMap("insets", getInsets(activity));
+			overlay = new Overlay(activity, moduleName, reactHost);
+			overlay.show(props, options);
+			overlays.put(genOverlayKey(moduleName, id), overlay);
+		});
+	}
+
+	@Override
+	public void hide(String moduleName, double overlayId) {
+		hide(moduleName, (int) overlayId);
+	}
+
+	public void hide(String moduleName, int id) {
+		UiThreadUtil.runOnUiThread(() -> {
+			Overlay overlay = overlays.get(genOverlayKey(moduleName, id));
+			if (overlay == null) {
+				return;
+			}
+			overlays.remove(genOverlayKey(moduleName, id));
+			overlay.hide();
+		});
+	}
+
+	@Override
+	public void onHostResume() {
+		//
+	}
+
+	@Override
+	public void onHostPause() {
+		//
+	}
+
+	@Override
+	public void onHostDestroy() {
+		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", Math.floor(PixelUtil.toDIPFromPixel(Math.max(navigationBarInsets.left, displayCutoutInsets.left) + 0.5f)));
+		insets.putDouble("top", Math.floor(PixelUtil.toDIPFromPixel(statusBarInsets.top + 0.5f)));
+		insets.putDouble("right", Math.floor(PixelUtil.toDIPFromPixel(Math.max(navigationBarInsets.right, displayCutoutInsets.right) + 0.5f)));
+		insets.putDouble("bottom", Math.floor(PixelUtil.toDIPFromPixel(navigationBarInsets.bottom) + 0.5f));
+		return insets;
+	}
 }

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

@@ -2,7 +2,6 @@ package com.reactnative.overlay;
 
 import androidx.annotation.NonNull;
 
-import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.NativeModule;
@@ -14,21 +13,21 @@ import java.util.List;
 
 public class OverlayPackage implements ReactPackage {
 
-    private final ReactNativeHost reactNativeHost;
+	private final ReactNativeHost reactNativeHost;
 
-    public OverlayPackage(ReactNativeHost reactNativeHost) {
-        this.reactNativeHost = reactNativeHost;
-    }
+	public OverlayPackage(ReactNativeHost reactNativeHost) {
+		this.reactNativeHost = reactNativeHost;
+	}
 
-    @NonNull
-    @Override
-    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
-        return Collections.singletonList(new OverlayModule(reactContext, reactNativeHost));
-    }
+	@NonNull
+	@Override
+	public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+		return Collections.singletonList(new OverlayModule(reactContext, reactNativeHost));
+	}
 
-    @NonNull
-    @Override
-    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
-        return Collections.emptyList();
-    }
+	@NonNull
+	@Override
+	public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+		return Collections.emptyList();
+	}
 }