Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@gorhom/portal

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gorhom/portal

A simplified portal implementation for ⭕️ React Native ⭕️

  • 1.0.14
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created

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

Keywords

FAQs

Package last updated on 23 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc