React Native Portal

A simplified portal implementation for ⭕️ React Native ⭕️.

Features

• Multi portals handling.
• Multi portal hosts handling.
• Allow override functionality.
• Compatible with React Native Web.
• Compatible with Expo, check out the project Expo Snack.
• Written in TypeScript.

Installation

yarn add @gorhom/portal

Usage

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Portal, PortalProvider, PortalHost } from '@gorhom/portal';

const BasicScreen = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>
          Text won't be teleported!
          <Portal>
            <Text style={styles.text}>
              Text to be teleported to the root host
            </Text>
          </Portal>
          <Portal hostName="custom_host">
            <Text style={styles.text}>
              Text to be teleported to the custom host
            </Text>
          </Portal>
        </Text>
      </View>

      {/* Custom host */}
      <PortalHost name="custom_host" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  box: {
    padding: 24,
    backgroundColor: '#333',
  },
  text: {
    alignSelf: 'center',
    textAlign: 'center',
    margin: 24,
    backgroundColor: '#eee',
  },
});

export default () => (
  <PortalProvider>
    <BasicScreen />
    {/* Text will be teleported to here */}
  </PortalProvider>
);

Props

Portal Props

name

Portal's key or name to be used as an identifer.

required: NO | type: string | default: auto generated unique key

hostName

Host's key or name to teleport the portal content to.

required: NO | type: string | default: 'root'

handleOnMount

Override internal mounting functionality, this is useful if you want to trigger any action before mounting the portal content.

type handleOnMount = (mount?: () => void) => void;

required: NO | type: function | default: undefined

handleOnUnmount

Override internal un-mounting functionality, this is useful if you want to trigger any action before un-mounting the portal content.

type handleOnUnmount = (unmount?: () => void) => void;

required: NO | type: function | default: undefined

children

Portal's content.

required: NO | type: ReactNode | ReactNode[] | default: undefined

PortalHost Props

name

Host's key or name to be used as an identifer.

required: YES | type: string

Hooks

usePortal

To access internal functionalities of all portals.

/**
 * @param hostName host name or key.
 */
type usePortal = (hostName: string = 'root') => {
  /**
   * Register a new host.
   */
  registerHost: () => void,
  /**
   * Deregister a host.
   */
  deregisterHost: () => void,
  /**
   * Add portal to the host container.
   * @param name portal name or key
   * @param node portal content
   */
  addPortal: (name: string, node: ReactNode) => void
  /**
   * Update portal content.
   * @param name portal name or key
   * @param node portal content
   */
  updatePortal: (name: string, node: ReactNode) => void
  /**
   * Remove portal from host container.
   * @param name portal name or key
   */
  removePortal: (name: string) => void
}

Built With ❤️

• @react-native-community/bob

Author

• Mo Gorhom

License

MIT