Declarative modals on Android

e2e/Modals.test.js

@@ -155,10 +155,54 @@ describe('modal', () => {
     await expect(elementByLabel('dismissModal promise resolved with: UniqueStackId')).toBeVisible();
   });
 
-  it('dismiss previous react-native modal', async () => {
-    await elementById(TestIDs.TOGGLE_REACT_NATIVE_MODAL).tap();
-    await elementById(TestIDs.SHOW_MODAL_AND_DISMISS_REACT_NATIVE_MODAL).tap();
+  it.e2e('should show declated modal', async () => {
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await expect(elementByLabel("Dismiss declared Modal")).toBeVisible();
     await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
     await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
   });
+
+  it.e2e('should show and dismiss multiple modals including declared modal', async () => {
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+    await expect(elementByLabel("Toggle declared modal")).toBeVisible();
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await expect(elementByLabel("Dismiss declared Modal")).toBeVisible();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+
+    await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+  });
+
+  it.e2e('overlay should be on top of all modals', async () => {
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await elementById(TestIDs.OVERLAY_BTN).tap();
+    await expect(elementByLabel("Dismiss declared Modal")).toBeVisible();
+    await expect(elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON)).toBeVisible();
+
+    await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+    await expect(elementByLabel("Modal Lifecycle")).toBeVisible();
+
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+
+    await elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON).tap();
+  });
+
+
+
+  it.e2e(':android: should handle back properly', async () => {
+    await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+    await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+    await expect(elementByLabel("Toggle declared modal")).toBeVisible();
+
+    Android.pressBack();
+
+    await expect(elementByLabel("Dismiss declared Modal")).toBeVisible();
+
+    Android.pressBack();
+
+    await expect(elementByLabel("Toggle declared modal")).toBeVisible();
+  });
 });

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt

@@ -0,0 +1,27 @@
+package com.reactnativenavigation.react
+
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+import com.reactnativenavigation.NavigationActivity
+import com.reactnativenavigation.options.LayoutFactory
+import com.reactnativenavigation.react.modal.ModalViewManager
+
+class NavigationPackage(private val reactNativeHost: ReactNativeHost) : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(
+            NavigationModule(
+                reactContext,
+                reactNativeHost.reactInstanceManager,
+                LayoutFactory(reactNativeHost.reactInstanceManager)
+            )
+        )
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+
+        return listOf(ModalViewManager((reactContext.currentActivity as NavigationActivity).navigator))
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java

@@ -9,67 +9,67 @@
 
 public class NavigationReactInitializer implements ReactInstanceManager.ReactInstanceEventListener {
 
-	private final ReactInstanceManager reactInstanceManager;
-	private final DevPermissionRequest devPermissionRequest;
-	private boolean waitingForAppLaunchEvent = true;
-	private boolean isActivityReadyForUi = false;
+    private final ReactInstanceManager reactInstanceManager;
+    private final DevPermissionRequest devPermissionRequest;
+    private boolean waitingForAppLaunchEvent = true;
+    private boolean isActivityReadyForUi = false;
 
-	NavigationReactInitializer(ReactInstanceManager reactInstanceManager, boolean isDebug) {
-		this.reactInstanceManager = reactInstanceManager;
-		this.devPermissionRequest = new DevPermissionRequest(isDebug);
-	}
+    NavigationReactInitializer(ReactInstanceManager reactInstanceManager, boolean isDebug) {
+        this.reactInstanceManager = reactInstanceManager;
+        this.devPermissionRequest = new DevPermissionRequest(isDebug);
+    }
 
-	void onActivityCreated() {
-		reactInstanceManager.addReactInstanceEventListener(this);
-		waitingForAppLaunchEvent = true;
-	}
+    void onActivityCreated() {
+        reactInstanceManager.addReactInstanceEventListener(this);
+        waitingForAppLaunchEvent = true;
+    }
 
-	void onActivityResumed(NavigationActivity activity) {
-		if (devPermissionRequest.shouldAskPermission(activity)) {
-			devPermissionRequest.askPermission(activity);
-		} else {
-			reactInstanceManager.onHostResume(activity, activity);
+    void onActivityResumed(NavigationActivity activity) {
+        if (devPermissionRequest.shouldAskPermission(activity)) {
+            devPermissionRequest.askPermission(activity);
+        } else {
+            reactInstanceManager.onHostResume(activity, activity);
             isActivityReadyForUi = true;
-			prepareReactApp();
-		}
-	}
+            prepareReactApp();
+        }
+    }
 
-	void onActivityPaused(NavigationActivity activity) {
+    void onActivityPaused(NavigationActivity activity) {
         isActivityReadyForUi = false;
-		if (reactInstanceManager.hasStartedCreatingInitialContext()) {
-			reactInstanceManager.onHostPause(activity);
-		}
-	}
+        if (reactInstanceManager.hasStartedCreatingInitialContext()) {
+            reactInstanceManager.onHostPause(activity);
+        }
+    }
 
-	void onActivityDestroyed(NavigationActivity activity) {
-		reactInstanceManager.removeReactInstanceEventListener(this);
-		if (reactInstanceManager.hasStartedCreatingInitialContext()) {
-			reactInstanceManager.onHostDestroy(activity);
-		}
-	}
+    void onActivityDestroyed(NavigationActivity activity) {
+        reactInstanceManager.removeReactInstanceEventListener(this);
+        if (reactInstanceManager.hasStartedCreatingInitialContext()) {
+            reactInstanceManager.onHostDestroy(activity);
+        }
+    }
 
-	private void prepareReactApp() {
-		if (shouldCreateContext()) {
-			reactInstanceManager.createReactContextInBackground();
-		} else if (waitingForAppLaunchEvent) {
+    private void prepareReactApp() {
+        if (shouldCreateContext()) {
+            reactInstanceManager.createReactContextInBackground();
+        } else if (waitingForAppLaunchEvent) {
             if (reactInstanceManager.getCurrentReactContext() != null) {
-			    emitAppLaunched(reactInstanceManager.getCurrentReactContext());
+                emitAppLaunched(reactInstanceManager.getCurrentReactContext());
             }
-		}
-	}
+        }
+    }
 
-	private void emitAppLaunched(@NonNull ReactContext context) {
-	    if (!isActivityReadyForUi) return;
-		waitingForAppLaunchEvent = false;
-		new EventEmitter(context).appLaunched();
-	}
+    private void emitAppLaunched(@NonNull ReactContext context) {
+        if (!isActivityReadyForUi) return;
+        waitingForAppLaunchEvent = false;
+        new EventEmitter(context).appLaunched();
+    }
 
-	private boolean shouldCreateContext() {
-		return !reactInstanceManager.hasStartedCreatingInitialContext();
-	}
+    private boolean shouldCreateContext() {
+        return !reactInstanceManager.hasStartedCreatingInitialContext();
+    }
 
-	@Override
-	public void onReactContextInitialized(final ReactContext context) {
+    @Override
+    public void onReactContextInitialized(final ReactContext context) {
         emitAppLaunched(context);
-	}
-}
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/react/modal/Events.kt

@@ -0,0 +1,34 @@
+package com.reactnativenavigation.react.modal
+
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+open class RequestCloseModalEvent(viewTag: Int) : Event<RequestCloseModalEvent>(viewTag) {
+
+    companion object{
+        const val EVENT_NAME = "topRequestClose"
+    }
+
+    override fun getEventName(): String {
+        return EVENT_NAME
+    }
+
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+        rctEventEmitter.receiveEvent(viewTag, eventName, null)
+    }
+}
+
+open class ShowModalEvent(viewTag: Int) : Event<ShowModalEvent>(viewTag) {
+
+    companion object{
+        const val EVENT_NAME = "topShow"
+    }
+
+    override fun getEventName(): String {
+        return EVENT_NAME
+    }
+
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+        rctEventEmitter.receiveEvent(viewTag, eventName, null)
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt

@@ -0,0 +1,81 @@
+package com.reactnativenavigation.react.modal
+
+import android.content.Context
+import android.view.MotionEvent
+import android.view.View
+import com.facebook.react.bridge.*
+import com.facebook.react.uimanager.*
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.views.view.ReactViewGroup
+
+
+class ModalContentLayout(context: Context?) : ReactViewGroup(context), RootView{
+    private var hasAdjustedSize = false
+    private var viewWidth = 0
+    private var viewHeight = 0
+    private val mJSTouchDispatcher = JSTouchDispatcher(this)
+
+    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+        super.onSizeChanged(w, h, oldw, oldh)
+        viewWidth = w
+        viewHeight = h
+        this.updateFirstChildView()
+    }
+    private fun updateFirstChildView() {
+        if (this.childCount > 0) {
+            hasAdjustedSize = false
+            val viewTag = getChildAt(0).id
+            val reactContext: ReactContext = this.getReactContext()
+            reactContext.runOnNativeModulesQueueThread(object : GuardedRunnable(reactContext) {
+                override fun runGuarded() {
+                    val uiManager = this@ModalContentLayout.getReactContext().getNativeModule<UIManagerModule>(
+                        UIManagerModule::class.java
+                    ) as UIManagerModule
+                    uiManager.updateNodeSize(
+                        viewTag,
+                        this@ModalContentLayout.viewWidth,
+                        this@ModalContentLayout.viewHeight
+                    )
+                }
+            })
+        } else {
+            hasAdjustedSize = true
+        }
+    }
+
+    override fun addView(child: View?, index: Int, params: LayoutParams?) {
+        super.addView(child, index, params)
+        if (hasAdjustedSize) {
+            updateFirstChildView()
+        }
+    }
+    override fun onChildStartedNativeGesture(androidEvent: MotionEvent?) {
+        mJSTouchDispatcher.onChildStartedNativeGesture(androidEvent, this.getEventDispatcher())
+    }
+    override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {}
+    private fun getEventDispatcher(): EventDispatcher? {
+        val reactContext: ReactContext = this.getReactContext()
+        return reactContext.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
+    }
+
+
+    override fun handleException(t: Throwable?) {
+        getReactContext().handleException(RuntimeException(t))
+    }
+
+    private fun getReactContext(): ReactContext {
+        return this.context as ReactContext
+    }
+
+    override fun onInterceptTouchEvent(event: MotionEvent?): Boolean {
+        mJSTouchDispatcher.handleTouchEvent(event, getEventDispatcher())
+        return super.onInterceptTouchEvent(event)
+    }
+
+    override fun onTouchEvent(event: MotionEvent?): Boolean {
+        mJSTouchDispatcher.handleTouchEvent(event, getEventDispatcher())
+        super.onTouchEvent(event)
+        return true
+    }
+
+}

lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalFrameLayout.kt

@@ -0,0 +1,19 @@
+package com.reactnativenavigation.react.modal
+
+import android.widget.FrameLayout
+import com.facebook.react.bridge.ReactContext
+import com.reactnativenavigation.utils.StatusBarUtils
+
+class ModalFrameLayout(context: ReactContext) : FrameLayout(context) {
+    val modalContentLayout = ModalContentLayout(context)
+
+    init {
+        addView(modalContentLayout, MarginLayoutParams(MarginLayoutParams.WRAP_CONTENT, MarginLayoutParams.WRAP_CONTENT)
+            .apply {
+                val translucent = context.currentActivity?.window?.let {
+                    StatusBarUtils.isTranslucent(context.currentActivity?.window)
+                } ?: false
+                topMargin = if (translucent) 0 else StatusBarUtils.getStatusBarHeight(context)
+            })
+    }
+}