{"id":14712,"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.","status":"abandoned","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/Dekoruma/react-native-web-modal/tree/master/packages/modal-react-native-web","tags":["javascript","react","react-native","react-native-web","modal","animation","react-native-animatable"],"install":[{"cmd":"npm install modal-react-native-web","lang":"bash","label":"npm"},{"cmd":"yarn add modal-react-native-web","lang":"bash","label":"yarn"},{"cmd":"pnpm add modal-react-native-web","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library; explicitly requires v16.x.x as a peer dependency.","package":"react","optional":false},{"reason":"Used by react-native-web; explicitly requires v16.x.x as a peer dependency.","package":"react-art","optional":false},{"reason":"Needed for rendering React components to the DOM, specifically for portals; explicitly requires v16.x.x as a peer dependency.","package":"react-dom","optional":false},{"reason":"The foundation for rendering React Native components on the web; explicitly requires v0.9.x as a peer dependency.","package":"react-native-web","optional":false}],"imports":[{"note":"The primary Modal component is a default export.","wrong":"import { Modal } from 'modal-react-native-web';","symbol":"Modal","correct":"import Modal from 'modal-react-native-web';"},{"note":"CommonJS import for Node.js environments; supported since v0.1.2. The component is a default export.","wrong":"const { Modal } = require('modal-react-native-web');","symbol":"Modal","correct":"const Modal = require('modal-react-native-web');"},{"note":"The quickstart example demonstrates a default export for the root component. This is a common pattern in older React class components.","wrong":"import { Example } from './Example';","symbol":"Example","correct":"import Example from './Example';"}],"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."},"warnings":[{"fix":"It is strongly recommended to use the native `Modal` component now available directly in `react-native-web` (since v0.13+). For projects requiring older `react-native-web` versions, ensure all peer dependencies are precisely matched. Consider migrating to a modern `react-native-web` version to utilize its built-in `Modal`.","message":"This package has strict peer dependencies on `react@16.x.x`, `react-dom@16.x.x`, `react-art@16.x.x`, and `react-native-web@0.9.x`. Using it with newer versions of React (v17+) or React Native Web (v0.10+ up to current v0.21+) will likely lead to dependency conflicts or runtime errors.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Remove `modal-react-native-web` and use the `Modal` component directly from `react-native` (which `react-native-web` will resolve) or import `Modal` from `'react-native-web'` if explicitly needed for web-specific imports. Ensure your `react-native-web` version is sufficiently new (>=0.13.0).","message":"The functionality provided by `modal-react-native-web` is now natively supported by `react-native-web` itself. Using this package is no longer necessary or recommended for modern `react-native-web` applications.","severity":"deprecated","affected_versions":">=0.2.0"},{"fix":"Always consult the `react-native-web` documentation for its native `Modal` component for a complete and up-to-date list of supported props and behaviors. For this package, trial and error or source code review is necessary for unsupported props.","message":"Not all props available in the original React Native Modal are supported by this `modal-react-native-web` implementation.","severity":"gotcha","affected_versions":"<=0.2.0"},{"fix":"Upgrade to `modal-react-native-web@0.2.0` or later to mitigate these specific issues. However, given the package's overall status, a full migration to native `react-native-web` Modal is preferred.","message":"In versions prior to 0.2.0, the backdrop might not show if the `isVisible` prop was set to `true` when the component mounted, and there were potential issues with unsafe unmounting. These were addressed in v0.2.0.","severity":"gotcha","affected_versions":"<0.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"This package is largely unmaintained and expects older React versions. The most robust fix is to remove `modal-react-native-web` and use the `Modal` component directly from a recent `react-native-web` version. If you must use this package, downgrade your `react`, `react-dom`, `react-art`, and `react-native-web` packages to their respective `16.x.x` and `0.9.x` versions.","cause":"The installed `react` version is incompatible with the peer dependency specified by `modal-react-native-web`.","error":"npm WARN modal-react-native-web@0.2.0 requires a peer of react@16.x.x but none is installed. You must install peer dependencies yourself."},{"fix":"For modern `react-native-web` (v0.13.0+), simply import `Modal` from `'react-native'`. If using an older `react-native-web` and still needing this package, ensure `modal-react-native-web` is installed and imported as a default export: `import Modal from 'modal-react-native-web';`.","cause":"This error often occurs when `react-native-web` is installed, but `modal-react-native-web` is not, or the import path is incorrect, or the version of `react-native-web` does not yet expose a native `Modal` component.","error":"TypeError: (0, _reactNativeWeb.Modal) is not a function or is not defined"}],"ecosystem":"npm"}