Need help with react-native-portalize?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jeremybarbet
148 Stars 10 Forks MIT License 29 Commits 6 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 33,843
React N...
gatsby
TypeScr...
Firebas...
25 commits
# 192,361
HTML
CSS
React
stripe-...
1 commit
# 159,178
scrollv...
Shell
React N...
React
1 commit

Portalize

npm version

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

This component is extracted from

react-native-paper
and has been simplified for the purpose of
react-native-modalize
.

Installation

yarn add react-native-portalize

Usage

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...

  <portal>
    <text>A portal on top of the rest</text>
  </portal>
</view>
);

Example with

react-native-modalize
and
react-navigation

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

  <portal>
    <modalize ref="{modalRef}">...your content</modalize>
  </portal>
&gt;

); };

const SettingsScreen = () => ( Settings screen );

export const App = () => ( <tab.navigator> <tab.screen name="Examples" component="{ExamplesScreen}"></tab.screen> <tab.screen name="Settings" component="{SettingsScreen}"></tab.screen> </tab.navigator> );

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 |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.