{"id":13892,"library":"react-native-z-view","title":"React Native Z-View","description":"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.","status":"active","version":"0.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/intergalacticspacehighway/react-native-z-view","tags":["javascript","react-native","ios","android","typescript"],"install":[{"cmd":"npm install react-native-z-view","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-z-view","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-z-view","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Native components.","package":"react","optional":false},{"reason":"Peer dependency for React Native components.","package":"react-native","optional":false},{"reason":"Required for proper functionality, especially on iOS.","package":"react-native-screens","optional":false}],"imports":[{"note":"Main component for creating Z-level overlays. This library ships with TypeScript types, making named imports the standard.","symbol":"ZView","correct":"import { ZView } from 'react-native-z-view'"}],"quickstart":{"code":"import React from 'react';\nimport { View, Text, Dimensions, StyleSheet } from 'react-native';\nimport { ZView } from 'react-native-z-view';\n\nconst { width, height } = Dimensions.get('window');\n\nconst MyOverlayComponent = () => {\n  return (\n    <View style={styles.container}>\n      <Text style={styles.baseText}>Behind ZView content</Text>\n      <ZView top={50} left={20} bottom={50} right={20} touchable={false}>\n        <View style={styles.overlayContent}>\n          <Text style={styles.overlayText}>This is a ZView overlay!</Text>\n          <Text style={styles.overlaySubText}>It sits on top of everything.</Text>\n        </View>\n      </ZView>\n      <ZView>\n        <View style={styles.fullScreenOverlay}>\n          <Text style={styles.overlayText}>Full size overlay example</Text>\n        </View>\n      </ZView>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#f0f0f0',\n  },\n  baseText: {\n    fontSize: 20,\n    marginBottom: 20,\n  },\n  overlayContent: {\n    backgroundColor: 'rgba(255, 0, 0, 0.7)',\n    padding: 20,\n    borderRadius: 10,\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: 200,\n    minHeight: 100\n  },\n  overlayText: {\n    color: 'white',\n    fontSize: 18,\n    fontWeight: 'bold',\n  },\n  overlaySubText: {\n    color: 'white',\n    fontSize: 14,\n    marginTop: 5\n  },\n  fullScreenOverlay: {\n    width: width * 0.8,\n    height: height * 0.3,\n    backgroundColor: 'rgba(0, 0, 255, 0.5)',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: 15\n  }\n});\n\nexport default MyOverlayComponent;\n","lang":"typescript","description":"Demonstrates displaying multiple ZViews at different positions and as a partial full-screen overlay, showcasing basic usage and configurable positioning. Includes `touchable` prop usage."},"warnings":[{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Evaluate your UI requirements carefully: use `ZView` for non-blocking, always-on-top overlays, and `Modal` for standard, blocking dialogs.","message":"`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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Pin to exact versions in `package.json` to prevent unexpected updates, and review release notes carefully when upgrading to new versions.","message":"As 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.2.4':42 'address':58 'advanc':36 'allow':72 'also':96 'android':121,158 'api':137 'appear':110 'block':76 'built':65 'built-in':64 'cadenc':45 'compon':38,68 'consist':109 'content':108 'contribut':52 'cross':128 'cross-platform':127 'current':39 'custom':80 'design':17 'develop':49 'differenti':55 'direct':135 'display':19 'effect':124 'element':29 'ensur':106 'event':87 'function':33 'implement':150 'includ':30,115 'integr':141 'io':104,123,152,157 'issu':98 'javascript':153 'librari':16,140 'lie':56 'like':132 'limit':59 'modal':32,67,70,102,118 'multipl':100 'nativ':2,8,15,31,62,116,145,156 'need':50,88 'nest':101 'non':75 'non-block':74 'overlay':37,77 'pass':90 'platform':117,129 'popov':84 'portal':131,136 'portal-lik':130 'primari':54 'provid':125 'react':1,7,14,61,144,155 'react-nat':154 'react-native-screen':143 'react-native-z-view':6 'releas':44 'render':22 'resolv':97 'screen':146 'solut':133 'special':13 'tie':47 'toast':81 'tooltip':82 'top':24 'touch':86 'typescript':159 'ui':28,114 'under':93,149 'unlik':69 'usag':138 'version':41 'view':5,10,20,94 'without':134 'z':4,9 'z-view':3 'zview':71","created_at":"2026-04-20T01:56:51.271782+00:00","updated_at":"2026-04-20T01:56:51.271782+00:00","problems":[],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/intergalacticspacehighway/react-native-z-view","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-native-z-view","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","communication"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}