{"library":"modal-react-native-web","title":"React Native Web Modal","description":"modal-react-native-web is a JavaScript library that provides a web-compatible implementation of the core `Modal` component from React Native. It aims to replicate the API, behavior, and design of the native React Native Modal for projects utilizing `react-native-web`. The current stable version is `0.2.0`, last updated in 2018. Due to its age and reliance on outdated peer dependencies (React 16.x.x, React Native Web 0.9.x), its release cadence has ceased, and it is largely considered unmaintained for modern React/React Native Web environments. While it offers a solution for older `react-native-web` setups, `react-native-web` itself now includes a native `Modal` component, rendering this package largely obsolete for new projects.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install modal-react-native-web"],"cli":null},"imports":["import Modal from 'modal-react-native-web';","const Modal = require('modal-react-native-web');","import Example from './Example';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from 'react';\nimport { Text, TouchableHighlight, View } from 'react-native';\n\nimport Modal from 'modal-react-native-web';\n\nexport default class Example extends Component {\n  state = {\n    modalVisible: false,\n  };\n\n  setModalVisible(visible) {\n    this.setState({modalVisible: visible});\n  }\n\n  render() {\n    return (\n      <View style={{marginTop: 22}}>\n        <Modal\n          animationType=\"slide\"\n          transparent={false}\n          visible={this.state.modalVisible}\n          onDismiss={() => {\n            // In a real app, you might navigate away or perform other cleanup\n            console.log('Modal has been closed.');\n          }}>\n          <View style={{marginTop: 22}}>\n            <View>\n              <Text>Hello World!</Text>\n\n              <TouchableHighlight\n                onPress={() => {\n                  this.setModalVisible(!this.state.modalVisible);\n                }}>\n                <Text>Hide Modal</Text>\n              </TouchableHighlight>\n            </View>\n          </View>\n        </Modal>\n\n        <TouchableHighlight\n          onPress={() => {\n            this.setModalVisible(true);\n          }}>\n          <Text>Show Modal</Text>\n        </TouchableHighlight>\n      </View>\n    );\n  }\n}","lang":"javascript","description":"This example demonstrates how to import and use the `Modal` component, controlling its visibility with local state and handling dismissal. It shows a basic modal with text and a button to hide it, triggered by another button on the main screen.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}