Make the React Native inspector work in Modals (#51)

Author: hsource

global.d.ts

@@ -8,3 +8,8 @@ declare module 'react-native/Libraries/Components/ScrollView/ScrollViewContext'
   const ScrollViewContext: any;
   export default ScrollViewContext;
 }
+
+declare module 'react-native/Libraries/ReactNative/AppContainer' {
+  const AppContainer: any;
+  export default AppContainer;
+}

src/AppContainerWrapper.tsx

@@ -0,0 +1,18 @@
+import { FC, PropsWithChildren, useContext } from 'react';
+
+import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
+import { RootTagContext } from 'react-native/Libraries/ReactNative/RootTag';
+
+// Wrap the children in AppContainer so the React Native inspector works
+// within the modal. See https://github.com/facebook/react-native/blob/v0.81.4/packages/react-native/Libraries/Modal/Modal.js#L308
+// for the inspiration within the RN Modal component.
+export const AppContainerWrapper: FC<PropsWithChildren> = ({ children }) => {
+  const rootTag = useContext(RootTagContext);
+
+  // The inspector is only needed in development
+  if (!__DEV__) {
+    return children;
+  }
+
+  return <AppContainer rootTag={rootTag}>{children}</AppContainer>;
+};

src/ModalView.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 
 import { Platform, Pressable, StatusBar, StyleSheet, View } from 'react-native';
 
+import { AppContainerWrapper } from './AppContainerWrapper';
 import { ScrollContextResetter } from './ScrollContextResetter';
 import { GestureHandlerRootView } from './integrations/GestureHandlerRootView';
 import RNTModalView from './newarch/NativeRNTModalView';
@@ -37,37 +38,39 @@ export const ModalView: FC<ModalViewProps> = ({
       onPressBackAndroid={() => onRequestDismiss?.(DismissalSource.BackButton)}
       animationType={animationType}
     >
-      <View collapsable={false} style={styles.flex}>
-        {isIOS && statusBar && !disableDefaultStatusBarIOS ? (
-          <StatusBar {...statusBar} />
-        ) : null}
-        <GestureHandlerRootView style={styles.flex}>
-          <View style={[styles.backdropContainer]}>
-            <BackdropPressableComponent
-              accessibilityLabel={backdropAccessibilityLabel}
-              accessibilityHint={backdropAccessibilityHint}
-              style={styles.flex}
-              onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
-            >
-              {renderBackdrop ? (
-                renderBackdrop()
-              ) : (
-                <View
-                  style={[styles.flex, { backgroundColor: backdropColor }]}
-                />
-              )}
-            </BackdropPressableComponent>
-          </View>
-          <ScrollContextResetter>
-            <View
-              pointerEvents='box-none'
-              style={[styles.content, contentContainerStyle]}
-            >
-              {children}
+      <AppContainerWrapper>
+        <View collapsable={false} style={styles.flex}>
+          {isIOS && statusBar && !disableDefaultStatusBarIOS ? (
+            <StatusBar {...statusBar} />
+          ) : null}
+          <GestureHandlerRootView style={styles.flex}>
+            <View style={[styles.backdropContainer]}>
+              <BackdropPressableComponent
+                accessibilityLabel={backdropAccessibilityLabel}
+                accessibilityHint={backdropAccessibilityHint}
+                style={styles.flex}
+                onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
+              >
+                {renderBackdrop ? (
+                  renderBackdrop()
+                ) : (
+                  <View
+                    style={[styles.flex, { backgroundColor: backdropColor }]}
+                  />
+                )}
+              </BackdropPressableComponent>
             </View>
-          </ScrollContextResetter>
-        </GestureHandlerRootView>
-      </View>
+            <ScrollContextResetter>
+              <View
+                pointerEvents='box-none'
+                style={[styles.content, contentContainerStyle]}
+              >
+                {children}
+              </View>
+            </ScrollContextResetter>
+          </GestureHandlerRootView>
+        </View>
+      </AppContainerWrapper>
     </RNTModalView>
   );
 };