Registry / testing / react-native-portalize

react-native-portalize

library1.0.7jsnpmunverified

A lightweight React Native library that allows rendering components above all other content using a portal pattern. Version 1.0.7 is the latest stable release. It provides a `Host` wrapper and `Portal` component, extracted from react-native-paper and optimized for use with react-native-modalize and react-navigation. Unlike full-featured portal libraries, it focuses on simplicity and minimal overhead, supporting React 15+ and React Native 0.50+. It ships TypeScript definitions and uses ESM.

testing mobile

npm install react-native-portalize

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-PORTA

react-native-portalize

testingjavascriptv1.0.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Host

✓ import { Host } from 'react-native-portalize'

✗ import Host from 'react-native-portalize'

Host is a named export, not default. Common mistake with default import.

Portal

✓ import { Portal } from 'react-native-portalize'

✗ const Portal = require('react-native-portalize').Portal

While require works, the library is ESM-first. Default import does not work.

Host and Portal combined

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

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

Both are named exports. No wrong pattern typically seen.

Shows basic usage wrapping the app in Host and using Portal to render content on top.

import React from 'react'; import { View, Text } from 'react-native'; import { Host, Portal } from 'react-native-portalize'; export const App = () => ( <Host> <View> <Text>Some content</Text> <Portal> <Text>This renders above everything</Text> </Portal> </View> </Host> );

Debug

Known issues

gotchaPortal must be used inside a Host component; otherwise it throws an error about missing portal manager.

fix

Wrap the entire app tree with <Host> at the root.

affects: >=1.0.0

gotchaMultiple Host instances are not supported; only one Host should wrap the entire application.

fix

Ensure only one Host component exists, typically at the App root.

affects: >=1.0.0

deprecatedstyle prop on Host is deprecated; use container style instead or wrap with a View.

fix

Remove style prop from Host and apply via a parent View.

affects: >=1.0.0

gotchaPortal children are rendered outside the normal React tree; they do not inherit context from parent components unless the context is provided at the Host level.

fix

Move context providers (e.g., ThemeProvider) to wrap the Host component.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Could not find portal manager. Did you wrap your app inside a <Host />?

Portal component used without a parent Host component.

fix

Wrap the root component in <Host>...</Host>.

Invariant Violation: Tried to render Portal outside of a Host context.

Same as above, possibly with multiple Hosts or misplacement.

fix

Ensure the entire app is wrapped in a single Host.

TypeError: undefined is not an object (evaluating 'this.props.host.portalManager')

Old React Native version or misconfiguration where host context is not passed.

fix

Upgrade react-native to >=0.50.0 and ensure proper setup.

Upgrade

Version history

1.0.7latest on npm

Audit

Dependencies

reactoptionalPeer dependency for component rendering

react-nativeoptionalPeer dependency for native platform support

Agent activity

47 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/jeremybarbet/react-native-portalize ↗

packagereact-native-portalize ↗

homepagehttps://github.com/jeremybarbet/react-native-portalize#readme ↗