feat: added native modal support

example/src/components/SimpleNativeModal.tsx

@@ -0,0 +1,46 @@
+import { useRoute } from '@react-navigation/native';
+import React from 'react';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+interface SimpleNativeModalProps {
+  onPress: (event: GestureResponderEvent) => void;
+}
+
+const SimpleNativeModal = ({ onPress }: SimpleNativeModalProps) => {
+  const { name } = useRoute();
+  return (
+    <TouchableWithoutFeedback onPress={onPress} style={styles.buttonContainer}>
+      <View style={styles.backdropContainer}>
+        <View style={styles.modalContainer}>
+          <Text>Current Screen: {name}</Text>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdropContainer: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    padding: 24,
+    backgroundColor: 'white',
+  },
+});
+
+export default SimpleNativeModal;

example/src/screens/NativeModalScreen.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Portal } from '@gorhom/portal';
+import SimpleNativeModal from '../components/SimpleNativeModal';
+
+const NativeModalScreen = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const handleOnModalPress = useCallback(() => {
+    setShowModal(state => !state);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.button} onPress={handleOnModalPress}>
+        <Text style={styles.text}>
+          {showModal ? 'Hide' : 'Show'} Native Modal
+        </Text>
+      </TouchableOpacity>
+      {showModal && (
+        <Portal name="modal" contained={false}>
+          <SimpleNativeModal onPress={handleOnModalPress} />
+        </Portal>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignContent: 'center',
+  },
+  button: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 24,
+    backgroundColor: '#333',
+  },
+  text: {
+    color: 'white',
+  },
+});
+
+export default NativeModalScreen;

example/src/screens/index.ts

@@ -12,6 +12,11 @@ export const screens = [
         slug: 'modal',
         getScreen: () => require('./ModalScreen').default,
       },
+      {
+        name: 'Native Modal',
+        slug: 'native-modal',
+        getScreen: () => require('./NativeModalScreen').default,
+      },
       {
         name: 'Popover',
         slug: 'popover',

src/components/portal/Portal.tsx

@@ -1,14 +1,22 @@
-import { memo, useEffect, useMemo } from 'react';
+import React, { memo, useEffect, useMemo } from 'react';
 import { nanoid } from 'nanoid/non-secure';
 import { usePortal } from '../../hooks';
 import type { PortalProps } from './types';
+import { Modal } from 'react-native';
 
 const PortalComponent = ({
   name: _providedName,
   hostName,
+  contained = true,
+  children,
   handleOnMount,
   handleOnUnmount,
-  children,
+
+  // modal props
+  animationType = 'none',
+  transparent = true,
+  hardwareAccelerated,
+  statusBarTranslucent,
 }: PortalProps) => {
   //#region hooks
   const { addPortal, removePortal, updatePortal } = usePortal(hostName);
@@ -20,15 +28,35 @@ const PortalComponent = ({
 
   //#region effects
   useEffect(() => {
+    /**
+     * if portal is not contained, then
+     * we skip adding portal to the host.
+     */
+    if (!contained) {
+      if (handleOnMount) {
+        handleOnMount();
+      }
+      return;
+    }
+
     if (handleOnMount) {
       handleOnMount(() => addPortal(name, children));
     } else {
       addPortal(name, children);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
+
     return () => {
+      /**
+       * if portal is not contained, then
+       * we skip removing portal to the host.
+       */
+      if (!contained) {
+        if (handleOnUnmount) {
+          handleOnUnmount();
+        }
+        return;
+      }
+
       if (handleOnUnmount) {
         handleOnUnmount(() => removePortal(name));
       } else {
@@ -38,12 +66,31 @@ const PortalComponent = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
+    if (!contained) {
+      return;
+    }
+
     updatePortal(name, children);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children]);
   //#endregion
 
-  return null;
+  //#region render
+  if (contained) {
+    return null;
+  }
+
+  return (
+    <Modal
+      animationType={animationType}
+      transparent={transparent}
+      hardwareAccelerated={hardwareAccelerated}
+      statusBarTranslucent={statusBarTranslucent}
+    >
+      {children}
+    </Modal>
+  );
+  //#endregion
 };
 
 const Portal = memo(PortalComponent);

src/components/portal/types.d.ts

@@ -1,6 +1,14 @@
 import type { ReactNode } from 'react';
+import type { ModalProps } from 'react-native';
 
-export interface PortalProps {
+export interface PortalProps
+  extends Pick<
+    ModalProps,
+    | 'animationType'
+    | 'transparent'
+    | 'hardwareAccelerated'
+    | 'statusBarTranslucent'
+  > {
   /**
    * Portal's key or name to be used as an identifer.
    * @type string
@@ -13,6 +21,13 @@ export interface PortalProps {
    * @default 'root'
    */
   hostName?: string;
+  /**
+   * Determines whether the portal will be rendered under the
+   * react native root view or native root view.
+   * @type boolean
+   * @default true
+   */
+  contained?: boolean;
   /**
    * Override internal mounting functionality, this is useful
    * if you want to trigger any action before mounting the portal content.

src/components/portalContainer/PortalContainer.tsx

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { Modal } from 'react-native';
+import type { PortalContainerProps } from './types';
+
+const PortalContainerComponent = ({
+  contained = true,
+  children,
+}: PortalContainerProps) => {
+  return contained ? (
+    children
+  ) : (
+    <Modal transparent={true} animationType="none">
+      {children}
+    </Modal>
+  );
+};
+
+const PortalContainer = memo(PortalContainerComponent);
+
+export default PortalContainer;

src/components/portalContainer/index.ts

@@ -0,0 +1 @@
+export { default } from './PortalContainer';

src/components/portalContainer/types.d.ts

@@ -0,0 +1,10 @@
+export interface PortalContainerProps {
+  /**
+   * Determines whether the portal host will be rendered under the
+   * react native root view or native root view.
+   * @type boolean
+   * @default true
+   */
+  contained?: boolean;
+  children: any;
+}

src/components/portalHost/PortalHost.tsx

@@ -1,8 +1,9 @@
 import React, { memo, useEffect } from 'react';
 import { usePortal, usePortalState } from '../../hooks';
+import PortalContainer from '../portalContainer';
 import type { PortalHostProps } from './types';
 
-const PortalHostComponent = ({ name }: PortalHostProps) => {
+const PortalHostComponent = ({ name, contained = true }: PortalHostProps) => {
   //#region hooks
   const state = usePortalState(name);
   const { registerHost, deregisterHost } = usePortal(name);
@@ -19,7 +20,11 @@ const PortalHostComponent = ({ name }: PortalHostProps) => {
   //#endregion
 
   //#region render
-  return <>{state.map(item => item.node)}</>;
+  return (
+    <PortalContainer contained={contained}>
+      {state.map(item => item.node)}
+    </PortalContainer>
+  );
   //#endregion
 };
 

src/components/portalHost/types.d.ts

@@ -4,4 +4,11 @@ export interface PortalHostProps {
    * @type string
    */
   name: string;
+  /**
+   * Determines whether the container will be rendered under the
+   * react native root view or native root view.
+   * @type boolean
+   * @default true
+   */
+  contained?: boolean;
 }

src/hooks/usePortal.ts

@@ -17,45 +17,49 @@ export const usePortal = (hostName: string = 'root') => {
       type: ACTIONS.REGISTER_HOST,
       hostName: hostName,
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [dispatch, hostName]);
 
   const deregisterHost = useCallback(() => {
     dispatch({
       type: ACTIONS.DEREGISTER_HOST,
-      hostName: hostName,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const addPortal = useCallback((name: string, node: ReactNode) => {
-    dispatch({
-      type: ACTIONS.ADD_PORTAL,
       hostName,
-      portalName: name,
-      node,
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [dispatch, hostName]);
 
-  const updatePortal = useCallback((name: string, node: ReactNode) => {
-    dispatch({
-      type: ACTIONS.UPDATE_PORTAL,
-      hostName,
-      portalName: name,
-      node,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const addPortal = useCallback(
+    (name: string, node: ReactNode) => {
+      dispatch({
+        type: ACTIONS.ADD_PORTAL,
+        hostName,
+        portalName: name,
+        node,
+      });
+    },
+    [dispatch, hostName]
+  );
 
-  const removePortal = useCallback((name: string) => {
-    dispatch({
-      type: ACTIONS.REMOVE_PORTAL,
-      hostName,
-      portalName: name,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const updatePortal = useCallback(
+    (name: string, node: ReactNode) => {
+      dispatch({
+        type: ACTIONS.UPDATE_PORTAL,
+        hostName,
+        portalName: name,
+        node,
+      });
+    },
+    [dispatch, hostName]
+  );
+
+  const removePortal = useCallback(
+    (name: string) => {
+      dispatch({
+        type: ACTIONS.REMOVE_PORTAL,
+        hostName,
+        portalName: name,
+      });
+    },
+    [dispatch, hostName]
+  );
   //#endregion
 
   return {