💫 Update: ModalView Content

Summary: Update `ModalView` content to become a dummy view.
dominicstop · Apr 19, 2023 · 66edab2 · 66edab2
1 parent 12b09f2
commit 66edab2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git a/ios/src_library/React Native/RNIModalView/RNIModalViewController.swift b/ios/src_library/React Native/RNIModalView/RNIModalViewController.swift
@@ -16,7 +16,6 @@ public class RNIModalViewController: UIViewController {
   private(set) public var prevBounds: CGRect?;
 
   weak var lifecycleDelegate: RNIViewControllerLifeCycleNotifiable?;
-
   weak var modalViewRef: RNIModalView?;
 
   var isBGTransparent: Bool = true {
@@ -85,8 +84,11 @@ public class RNIModalViewController: UIViewController {
     }();
 
     if let modalContentWrapper = self.modalContentWrapper {
-      self.view.addSubview(modalContentWrapper);
-      modalContentWrapper.notifyForBoundsChange(size: self.view.bounds.size);
+      let parentView = self.view!;
+      let wrapperView = modalContentWrapper.reactViews.last!;
+
+      parentView.addSubview(wrapperView);
+      wrapperView.center = parentView.center;
     };
 
     self.updateBackgroundTransparency();
@@ -108,23 +110,24 @@ public class RNIModalViewController: UIViewController {
     else { return };
 
     let nextBounds = self.view.bounds;
-
+
+    let prevBounds = self.prevBounds;
+    self.prevBounds = nextBounds;
+
+    let wrapperView = modalContentWrapper.reactViews.last!;
+
     #if DEBUG
     print(
         "Log - RNIModalViewController.viewDidLayoutSubviews"
       + " - modalNativeID: '\(self.modalViewRef?.modalNativeID ?? "N/A")'"
-      + " - self.prevBounds: \(String(describing: self.prevBounds))"
+      + " - self.prevBounds: \(String(describing: prevBounds))"
       + " - nextBounds: \(nextBounds)"
     );
     #endif
-
-    let wrapperView = modalContentWrapper.reactViews.last!;
 
     modalContentWrapper.notifyForBoundsChange(size: nextBounds.size);
     wrapperView.center = self.view.center;
 
-    self.prevBounds = nextBounds;
-
     self.lifecycleDelegate?.viewDidLayoutSubviews(sender: self);
   };
 

diff --git a/src/components/ModalView/ModalView.tsx b/src/components/ModalView/ModalView.tsx
@@ -7,6 +7,7 @@ import {
   Platform,
   ViewProps,
   NativeSyntheticEvent,
+  View,
 } from 'react-native';
 
 import { RNIWrapperView } from '../../temp';
@@ -639,23 +640,28 @@ export class ModalView extends
       >
         {shouldMountModalContent && (
           <RNIWrapperView
-            style={[styles.modalContentWrapper, props.containerStyle]}
+            style={[styles.modalContentWrapper]}
             nativeID={NATIVE_ID_KEYS.modalViewContent}
-            isDummyView={false}
+            isDummyView={true}
             collapsable={false}
-            shouldAutoDetachSubviews={false}
+            shouldAutoDetachSubviews={true}
             shouldCreateTouchHandlerForSubviews={true}
             shouldNotifyComponentWillUnmount={props.shouldEnableAggressiveCleanup}
             shouldAutoCleanupOnJSUnmount={props.shouldEnableAggressiveCleanup}
             onLayout={this._handleOnLayoutModalContentContainer}
           >
-            {React.cloneElement(props.children as any, {
-              getModalRef: this._handleGetModalRef,
-              // pass down props received from setVisibility
-              ...(Helpers.isObject(state.childProps) && state.childProps),
-              // pass down modalID
-              modalID: props.modalID,
-            })}
+            <View
+              style={[styles.modalContentContainer, props.containerStyle]}
+              nativeID={'modalViewContentContainer'}
+            >
+                {React.cloneElement(props.children as any, {
+                getModalRef: this._handleGetModalRef,
+                // pass down props received from setVisibility
+                ...(Helpers.isObject(state.childProps) && state.childProps),
+                // pass down modalID
+                modalID: props.modalID,
+              })}
+            </View>
           </RNIWrapperView>
         )}
       </RNIModalView>
@@ -717,6 +723,12 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
   },
+  modalContentContainer: {
+    position: 'absolute',
+    overflow: 'visible',
+    width: '100%',
+    height: '100%',
+  },
 });
 
 class ModalViewHelpers {

diff --git a/src/components/ModalView/ModalViewConstants.ts b/src/components/ModalView/ModalViewConstants.ts
@@ -3,6 +3,7 @@ import { ScrollView } from 'react-native';
 
 export const NATIVE_ID_KEYS = {
   modalViewContent: 'modalViewContent',
+  modalViewContentContainer: 'modalViewContentContainer',
 };
 
 export const VirtualizedListContext = React.createContext(null);