https://github.com/jeremybarbet/react-native-portalize

The simplest way to render anything on top of the rest.
https://github.com/jeremybarbet/react-native-portalize

android ios portal react-native

Last synced: 5 days ago
JSON representation

The simplest way to render anything on top of the rest.

• Host: GitHub
• URL: https://github.com/jeremybarbet/react-native-portalize
• Owner: jeremybarbet
• License: mit
• Created: 2020-04-12T11:12:14.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-05-24T09:33:44.000Z (over 1 year ago)
• Last Synced: 2024-05-02T03:59:17.818Z (8 months ago)
• Topics: android, ios, portal, react-native
• Language: TypeScript
• Homepage:
• Size: 34.2 KB
• Stars: 331
• Watchers: 4
• Forks: 22
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Portalize

[![npm version](https://badge.fury.io/js/react-native-portalize.svg)](https://badge.fury.io/js/react-native-portalize)

The simplest way to render anything on top of the rest.

This component is extracted from [`react-native-paper`](https://github.com/callstack/react-native-paper/tree/master/src/components/Portal) and has been simplified for the purpose of [`react-native-modalize`](https://github.com/jeremybarbet/react-native-modalize).

## Installation

```bash

yarn add react-native-portalize

```

## Usage

```tsx

import React from 'react';

import { View, Text } from 'react-native';

import { Host, Portal } from 'react-native-portalize';

export const MyApp = () => (

  

    

      Some copy here and there...

      

        A portal on top of the rest

      

    

  

);

```

**Example with `react-native-modalize` and `react-navigation`**

```tsx

import React from 'react';

import { View, TouchableOpacity, Text } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { Modalize } from 'react-native-modalize';

import { Host, Portal } from 'react-native-portalize';

const Tab = createBottomTabNavigator();

const ExamplesScreen = () => {

  const modalRef = useRef(null);

  const onOpen = () => {

    modalRef.current?.open();

  };

  return (

    <>

      

        Open the modal

      

      

        ...your content

      

    >

  );

};

const SettingsScreen = () => (

  

    Settings screen

  

);

export const App = () => (

  

    

      

        

        

      

    

  

);

```

## Props

### Host

- `children`

A React node that will be most likely wrapping your whole app.

| Type | Required |

| ---- | -------- |

| node | Yes      |

- `style`

Optional props to define the style of the Host component.

| Type  | Required |

| ----- | -------- |

| style | No       |

### Portal

- `children`

The React node you want to display on top of the rest.

| Type | Required |

| ---- | -------- |

| node | Yes      |