Fix drawing over bottom tabs (#17)

Author: paufau

android/src/main/java/com/multiplemodals/RNTModalView.kt

@@ -9,13 +9,11 @@ import android.view.ViewStructure
 import android.view.accessibility.AccessibilityEvent
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.UiThreadUtil
-import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.multiplemodals.events.PressBackEvent
 import com.multiplemodals.library.ModalDialog
-import com.multiplemodals.library.ModalHostHelper
 import com.multiplemodals.library.ModalView
 import com.multiplemodals.library.OnSizeComputedListener
 
@@ -30,25 +28,9 @@ class RNTModalView(context: Context): ViewGroup(context), LifecycleEventListener
             modalView.onSizeComputedListener = value
         }
 
-    internal fun requestViewSizeComputation() {
-        val modalSize = ModalHostHelper.getModalHostSize(context)
-
-        onSizeComputedListener?.onSizeComputed(
-            id,
-            PixelUtil.toDIPFromPixel(modalSize.x.toFloat()),
-            PixelUtil.toDIPFromPixel(modalSize.y.toFloat()),
-        )
-    }
-
     private val surfaceId: Int get() = UIManagerHelper.getSurfaceId(this)
 
-    override fun setId(id: Int) {
-        super.setId(id)
-        // Id is passed to control shadow node size
-        modalView.id = id
-    }
-
-    private val reactContext: ThemedReactContext get() = context as ThemedReactContext
+    internal val reactContext: ThemedReactContext get() = context as ThemedReactContext
     private val eventDispatcher: EventDispatcher
     private val modalDialog: ModalDialog
     private val modalView: ModalView

android/src/main/java/com/multiplemodals/library/ModalView.kt

@@ -6,14 +6,13 @@ import android.view.View
 import com.facebook.react.config.ReactFeatureFlags
 import com.facebook.react.uimanager.JSPointerDispatcher
 import com.facebook.react.uimanager.JSTouchDispatcher
-import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.RootView
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.view.ReactViewGroup
 
 fun interface OnSizeComputedListener {
-    fun onSizeComputed(id: Int, widthDip: Float, heightDip: Float)
+    fun onSizeComputed(widthPx: Int, heightPx: Int)
 }
 
 @SuppressLint("ViewConstructor")
@@ -26,11 +25,7 @@ class ModalView(reactContext: ThemedReactContext,
 
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
         super.onSizeChanged(w, h, oldw, oldh)
-        onSizeComputedListener?.onSizeComputed(
-            id,
-            PixelUtil.toDIPFromPixel(w.toFloat()),
-            PixelUtil.toDIPFromPixel(h.toFloat())
-        )
+        onSizeComputedListener?.onSizeComputed(w, h)
     }
 
     init {

android/src/newarch/RNTModalViewManagerSpec.kt

@@ -3,12 +3,14 @@ package com.multiplemodals
 import android.view.ViewGroup
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.ReactStylesDiffMap
 import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.viewmanagers.RNTModalViewManagerDelegate
 import com.facebook.react.viewmanagers.RNTModalViewManagerInterface
+import com.multiplemodals.library.ModalHostHelper
 import com.multiplemodals.library.OnSizeComputedListener
 import kotlin.math.roundToInt
 
@@ -19,6 +21,15 @@ abstract class RNTModalViewManagerSpec<T : ViewGroup> : ViewGroupManager<T>(), R
     return mDelegate
   }
 
+  private fun computeViewSize(view: RNTModalView) {
+    val modalSize = ModalHostHelper.getModalHostSize(view.context)
+
+    view.onSizeComputedListener?.onSizeComputed(
+      modalSize.x,
+      modalSize.y,
+    )
+  }
+
   override fun updateState(
     view: T,
     props: ReactStylesDiffMap,
@@ -34,20 +45,20 @@ abstract class RNTModalViewManagerSpec<T : ViewGroup> : ViewGroupManager<T>(), R
         }
       }
 
-      view.onSizeComputedListener = OnSizeComputedListener { _, widthDip, heightDip ->
-        val nextWidthDip = widthDip.roundToInt()
-        val nextHeightDip = heightDip.roundToInt()
+      view.onSizeComputedListener = OnSizeComputedListener { widthPx, heightPx ->
+        val nextWidthDip = PixelUtil.toDIPFromPixel(widthPx.toFloat()).roundToInt()
+        val nextHeightDip = PixelUtil.toDIPFromPixel(heightPx.toFloat()).roundToInt()
 
         // Comparing props prevents infinite update cycle
         if (currentWidthDip != nextWidthDip || currentHeightDip != nextHeightDip) {
           val newStateData: WritableMap = WritableNativeMap()
-          newStateData.putDouble("screenWidth", widthDip.toDouble())
-          newStateData.putDouble("screenHeight", heightDip.toDouble())
+          newStateData.putDouble("screenWidth", nextWidthDip.toDouble())
+          newStateData.putDouble("screenHeight", nextHeightDip.toDouble())
           stateWrapper.updateState(newStateData)
         }
       }
 
-      view.requestViewSizeComputation()
+      computeViewSize(view)
       view.show()
     }
 

android/src/oldarch/RNTModalViewManagerSpec.kt

@@ -2,29 +2,27 @@ package com.multiplemodals
 
 import android.view.ViewGroup
 import com.facebook.react.bridge.GuardedRunnable
-import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.ViewGroupManager
 import com.multiplemodals.library.OnSizeComputedListener
-import kotlin.math.roundToInt
 
 abstract class RNTModalViewManagerSpec<T : ViewGroup> : ViewGroupManager<T>() {
     override fun onAfterUpdateTransaction(view: T) {
-        if (view is RNTModalView) {
-            super.onAfterUpdateTransaction(view)
+        super.onAfterUpdateTransaction(view)
 
+        if (view is RNTModalView) {
             // set by RNTModalShadowView for paper arch
             view.isShadowViewSizeSet = true
 
-            view.onSizeComputedListener = OnSizeComputedListener { id, widthDip, heightDip ->
-                val reactContext = view.context as ThemedReactContext
+            view.onSizeComputedListener = OnSizeComputedListener { widthPx, heightPx ->
+                val reactContext = view.reactContext
 
                 reactContext.runOnNativeModulesQueueThread(
                     object : GuardedRunnable(reactContext) {
                         override fun runGuarded() {
                             reactContext.reactApplicationContext
                                 .getNativeModule(UIManagerModule::class.java)
-                                ?.updateNodeSize(id, widthDip.roundToInt(), heightDip.roundToInt())
+                                ?.updateNodeSize(view.id, widthPx, heightPx)
                         }
                     })
             }

ios/Fabric/RNTModalViewComponentView.h

@@ -12,8 +12,8 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface RNTModalViewComponentView : RCTViewComponentView
 
-@property(nonatomic, strong) RCTSurfaceTouchHandler *touchHandler;
-@property(nonatomic, strong) RNTModalViewController *modalViewController;
+@property(nullable, strong) RCTSurfaceTouchHandler *touchHandler;
+@property(nullable, strong) RNTModalViewController *modalViewController;
 @property(nonatomic, assign) BOOL isMounted;
 
 - (void)setupIfNeeded;

ios/Fabric/RNTModalViewComponentView.mm

@@ -25,6 +25,11 @@ @implementation RNTModalViewComponentView {
     RNTModalViewShadowNode::ConcreteState::Shared _state;
 }
 
++ (BOOL)shouldBeRecycled
+{
+    return NO;
+}
+
 - (instancetype)initWithFrame:(CGRect)frame
 {
     self = [super initWithFrame:CGRectZero];
@@ -43,13 +48,15 @@ - (instancetype)initWithFrame:(CGRect)frame
 
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
-    [self insertReactSubview:childComponentView atIndex:index];
+    [self.touchHandler attachToView:childComponentView];
+    [self.modalViewController addReactSubview:childComponentView];
     [self setupIfNeeded];
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
-    [self removeReactSubview:childComponentView];
+    [self.touchHandler detachFromView:childComponentView];
+    [childComponentView removeFromSuperview];
     [self unmount];
 }
 
@@ -63,30 +70,14 @@ - (void)didMoveToSuperview {
 
 - (void)layoutSubviews {
     [super layoutSubviews];
+    
     [self setupIfNeeded];
 }
 
 - (void)addSubview:(UIView *)view {
     [super addSubview:view];
 }
 
-- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex {
-    [super insertReactSubview:subview atIndex:atIndex];
-    dispatch_async(dispatch_get_main_queue(), ^{
-        [self.touchHandler attachToView:subview];
-        [self.modalViewController addReactSubview:subview];
-    });
-}
-
-- (void)removeReactSubview:(UIView *)subview
-{
-    [super removeReactSubview:subview];
-    dispatch_async(dispatch_get_main_queue(), ^{
-        [self.touchHandler detachFromView:subview];
-        [subview removeFromSuperview];
-    });
-}
-
 - (void)setupIfNeeded {
     if (self.isMounted) {
         [self update];
@@ -95,8 +86,20 @@ - (void)setupIfNeeded {
     }
 }
 
+- (UIViewController *)getRootController {
+    UIWindow *keyWindow = [UIApplication sharedApplication].windows.firstObject;
+    for (UIWindow *window in [UIApplication sharedApplication].windows) {
+        if (window.isKeyWindow) {
+            keyWindow = window;
+            break;
+        }
+    }
+    UIViewController *topController = keyWindow.rootViewController;
+    return topController;
+}
+
 - (void)mount {
-    UIViewController *rvc = [self reactViewController];
+    UIViewController *rvc = [self getRootController];
     if (!rvc) {
         NSLog(@"reactViewController not found");
         return;
@@ -111,7 +114,9 @@ - (void)mount {
 
 - (void)unmount {
     [self.modalViewController dismiss];
-    self.isMounted = NO;
+    _isMounted = NO;
+    _modalViewController = NULL;
+    _touchHandler = NULL;
 }
 
 - (void)update {

ios/RNTModalView.m

@@ -53,8 +53,20 @@ - (void)setupIfNeeded {
     }
 }
 
+- (UIViewController *)getRootViewController {
+    UIWindow *keyWindow = [UIApplication sharedApplication].windows.firstObject;
+    for (UIWindow *window in [UIApplication sharedApplication].windows) {
+        if (window.isKeyWindow) {
+            keyWindow = window;
+            break;
+        }
+    }
+    UIViewController *topController = keyWindow.rootViewController;
+    return topController;
+}
+
 - (void)mount {
-    UIViewController *rvc = [self reactViewController];
+    UIViewController *rvc = [self getRootViewController];
     if (!rvc) {
         NSLog(@"reactViewController not found");
         return;