@gorhom/portal

What is @gorhom/portal?

@gorhom/portal is a React Native package that allows you to create and manage portals. Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is particularly useful for rendering modals, tooltips, and other UI elements that need to appear above other content.

What are @gorhom/portal's main functionalities?

Creating a Portal

This code demonstrates how to create a simple portal using @gorhom/portal. The portal renders a modal-like view that appears above the main content when a button is pressed.

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

const App = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <PortalProvider>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="Show Portal" onPress={() => setVisible(true)} />
        {visible && (
          <Portal>
            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
              <Text style={{ color: 'white' }}>This is a portal!</Text>
              <Button title="Close" onPress={() => setVisible(false)} />
            </View>
          </Portal>
        )}
      </View>
    </PortalProvider>
  );
};

export default App;

Nested Portals

This code demonstrates how to create nested portals using @gorhom/portal. The nested portal appears above the first portal when a button is pressed.

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

const App = () => {
  const [visible, setVisible] = React.useState(false);
  const [nestedVisible, setNestedVisible] = React.useState(false);

  return (
    <PortalProvider>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="Show Portal" onPress={() => setVisible(true)} />
        {visible && (
          <Portal>
            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
              <Text style={{ color: 'white' }}>This is a portal!</Text>
              <Button title="Show Nested Portal" onPress={() => setNestedVisible(true)} />
              {nestedVisible && (
                <Portal>
                  <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.7)', justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={{ color: 'white' }}>This is a nested portal!</Text>
                    <Button title="Close Nested" onPress={() => setNestedVisible(false)} />
                  </View>
                </Portal>
              )}
              <Button title="Close" onPress={() => setVisible(false)} />
            </View>
          </Portal>
        )}
      </View>
    </PortalProvider>
  );
};

export default App;

Other packages similar to @gorhom/portal

react-native-modal

react-native-modal is a widely-used package for creating modals in React Native. It provides a lot of customization options and animations. Unlike @gorhom/portal, it is specifically designed for modals and does not support other types of portals.

react-native-paper

react-native-paper is a UI library that includes a Portal component among many other UI components. It is a more comprehensive solution for building React Native applications with Material Design. The Portal component in react-native-paper is similar to @gorhom/portal but is part of a larger UI toolkit.

react-native-root-siblings

react-native-root-siblings is another package that allows you to render elements outside the main React Native view hierarchy. It is similar to @gorhom/portal in that it can be used to create modals, toasts, and other overlay components. However, it is less focused on portals specifically and more on general overlay management.

README

React Native Portal

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

Installation

yarn add @gorhom/portal

Soon ;)

Changelog

v0.1.1 - 2020-12-08

Commits

• chore: init project d7980b6
• chore: added initial implementaion 044c266
• docs: updated readme file 488a977