Registry / web-framework / modal-react-native-web

modal-react-native-web

library0.2.0jsnpmunverified

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.

web-framework

npm install modal-react-native-web

github ↗package ↗

INSTALL

IMPORT

SIG · MODAL-REACT-NATIVE

modal-react-native-web

web-frameworkjavascriptv0.2.0

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.

Modal

✓ import Modal from 'modal-react-native-web';

✗ import { Modal } from 'modal-react-native-web';

The primary Modal component is a default export.

Modal

✓ const Modal = require('modal-react-native-web');

✗ const { Modal } = require('modal-react-native-web');

CommonJS import for Node.js environments; supported since v0.1.2. The component is a default export.

Example

✓ import Example from './Example';

✗ import { Example } from './Example';

The quickstart example demonstrates a default export for the root component. This is a common pattern in older React class components.

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.

import React, { Component } from 'react'; import { Text, TouchableHighlight, View } from 'react-native'; import Modal from 'modal-react-native-web'; export default class Example extends Component { state = { modalVisible: false, }; setModalVisible(visible) { this.setState({modalVisible: visible}); } render() { return ( <View style={{marginTop: 22}}> <Modal animationType="slide" transparent={false} visible={this.state.modalVisible} onDismiss={() => { // In a real app, you might navigate away or perform other cleanup console.log('Modal has been closed.'); }}> <View style={{marginTop: 22}}> <View> <Text>Hello World!</Text> <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); }}> <Text>Hide Modal</Text> </TouchableHighlight> </View> </View> </Modal> <TouchableHighlight onPress={() => { this.setModalVisible(true); }}> <Text>Show Modal</Text> </TouchableHighlight> </View> ); } }

Debug

Known issues

breakingThis 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.

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`.

affects: >=0.2.0

deprecatedThe 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.

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).

affects: >=0.2.0

gotchaNot all props available in the original React Native Modal are supported by this `modal-react-native-web` implementation.

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.

affects: <=0.2.0

gotchaIn 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.

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.

affects: <0.2.0

Errors

Common errors & fixes

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.

The installed `react` version is incompatible with the peer dependency specified by `modal-react-native-web`.

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.

TypeError: (0, _reactNativeWeb.Modal) is not a function or is not defined

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.

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';`.

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

reactrequiredCore React library; explicitly requires v16.x.x as a peer dependency.

react-artrequiredUsed by react-native-web; explicitly requires v16.x.x as a peer dependency.

react-domrequiredNeeded for rendering React components to the DOM, specifically for portals; explicitly requires v16.x.x as a peer dependency.

react-native-webrequiredThe foundation for rendering React Native components on the web; explicitly requires v0.9.x as a peer dependency.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Dekoruma/react-native-web-modal ↗

packagehttps://www.npmjs.com/package/modal-react-native-web ↗