React Native Web Modal

Common errors

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

  cause 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

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

Warnings

• breaking 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.
  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`.
• deprecated 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.
  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).
• gotcha Not 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.
• gotcha 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.
  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.

Install

• npm install modal-react-native-web npm
• yarn add modal-react-native-web yarn
• pnpm add modal-react-native-web pnpm

Imports

• Modal
  wrong:

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

  correct:

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

  The primary Modal component is a default export.
• Modal
  wrong:

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

  correct:

  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
  wrong:

  import { Example } from './Example';

  correct:

  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.

Quickstart

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>
    );
  }
}