Registry / web-framework / react-native-z-view

react-native-z-view

library0.2.4jsnpmunverified

react-native-z-view is a specialized React Native library designed to display views that render on top of all other UI elements, including native modals, functioning as an advanced overlay component. Currently at version 0.2.4, its release cadence is tied to development needs and contributions. Its primary differentiation lies in addressing limitations of React Native's built-in `Modal` component. Unlike `Modal`, `ZView` allows for non-blocking overlays such as custom toasts, tooltips, and popovers where touch events need to pass through to underlying views. It also resolves issues with multiple nested modals on iOS and ensures its content consistently appears above all other UI, including native platform modals on both Android and iOS, effectively providing a cross-platform portal-like solution without direct `Portal` API usage. The library integrates with `react-native-screens` for its underlying implementation on iOS.

web-framework communication

npm install react-native-z-view

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-Z-VIE

react-native-z-view

web-frameworkjavascriptv0.2.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

ZView

✓ import { ZView } from 'react-native-z-view'

Main component for creating Z-level overlays. This library ships with TypeScript types, making named imports the standard.

Demonstrates displaying multiple ZViews at different positions and as a partial full-screen overlay, showcasing basic usage and configurable positioning. Includes `touchable` prop usage.

import React from 'react'; import { View, Text, Dimensions, StyleSheet } from 'react-native'; import { ZView } from 'react-native-z-view'; const { width, height } = Dimensions.get('window'); const MyOverlayComponent = () => { return ( <View style={styles.container}> <Text style={styles.baseText}>Behind ZView content</Text> <ZView top={50} left={20} bottom={50} right={20} touchable={false}> <View style={styles.overlayContent}> <Text style={styles.overlayText}>This is a ZView overlay!</Text> <Text style={styles.overlaySubText}>It sits on top of everything.</Text> </View> </ZView> <ZView> <View style={styles.fullScreenOverlay}> <Text style={styles.overlayText}>Full size overlay example</Text> </View> </ZView> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', }, baseText: { fontSize: 20, marginBottom: 20, }, overlayContent: { backgroundColor: 'rgba(255, 0, 0, 0.7)', padding: 20, borderRadius: 10, alignItems: 'center', justifyContent: 'center', minWidth: 200, minHeight: 100 }, overlayText: { color: 'white', fontSize: 18, fontWeight: 'bold', }, overlaySubText: { color: 'white', fontSize: 14, marginTop: 5 }, fullScreenOverlay: { width: width * 0.8, height: height * 0.3, backgroundColor: 'rgba(0, 0, 255, 0.5)', justifyContent: 'center', alignItems: 'center', borderRadius: 15 } }); export default MyOverlayComponent;

Debug

Known issues

gotchaThe `react-native-screens` package is a mandatory dependency for `react-native-z-view`, particularly for its correct functioning and stability on iOS. Ensure it is installed and linked correctly in your project.

fix

Install `react-native-screens` via `npm install react-native-screens` or `yarn add react-native-screens` and follow its platform-specific linking instructions if necessary.

affects: >=0.1.0

gotcha`react-native-z-view` is designed for specific overlay use cases (toasts, tooltips, popovers, appearing above native modals) and is not a direct replacement for React Native's built-in `Modal` component. For blocking user interaction and traditional modal dialogs, `Modal` remains the appropriate choice.

fix

Evaluate your UI requirements carefully: use `ZView` for non-blocking, always-on-top overlays, and `Modal` for standard, blocking dialogs.

affects: >=0.1.0

gotchaAs of version 0.2.4, the library is in an early stage of development. While functional, the API might undergo minor adjustments or introduce breaking changes in future minor or patch versions as it matures.

fix

Pin to exact versions in `package.json` to prevent unexpected updates, and review release notes carefully when upgrading to new versions.

affects: >=0.1.0

Upgrade

Version history

0.2.4latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React Native components.

react-nativerequiredPeer dependency for React Native components.

react-native-screensrequiredRequired for proper functionality, especially on iOS.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/intergalacticspacehighway/react-native-z-view ↗

packagehttps://www.npmjs.com/package/react-native-z-view ↗