{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-z-view"],"cli":null},"imports":["import { ZView } from 'react-native-z-view'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}