Registry / web-framework / react-native-modal

react-native-modal

library14.0.0-rc.1jsnpmunverified

react-native-modal is an enhanced and highly customizable modal component for React Native, extending the capabilities of the built-in `<Modal>` component. It offers smooth enter/exit animations, flexible APIs, and features such as a customizable backdrop (opacity, color, timing), listeners for animation completion, automatic resizing on device rotation, and swipe-to-close functionality. The current development focus is on version 14.x, with `14.0.0-rc.1` being the latest release candidate, introducing support for React Native 0.78 and above. Historically, releases have been somewhat irregular, often aligning with major React Native version updates. This library differentiates itself by providing a richer user experience with built-in animations and gestures, which the native `<Modal>` component lacks by default.

web-framework

npm install react-native-modal

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-MODAL

react-native-modal

web-frameworkjavascriptv14.0.0-rc.1

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 'react-native-modal';

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

The primary Modal component is a default export.

ModalProps

✓ import type { ModalProps } from 'react-native-modal';

Import type definitions for TypeScript usage.

Modal (CJS)

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

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

When using CommonJS, access the default export via `.default`.

This example demonstrates a basic animated modal. It uses `useState` to control the modal's visibility via the `isVisible` prop and includes buttons to toggle its state.

import React, {useState} from 'react'; import {Button, Text, View, StyleSheet} from 'react-native'; import Modal from 'react-native-modal'; function ModalTester() { const [isModalVisible, setModalVisible] = useState(false); const toggleModal = () => { setModalVisible(!isModalVisible); }; return ( <View style={styles.container}> <Button title="Show modal" onPress={toggleModal} /> <Modal isVisible={isModalVisible}> <View style={styles.modalContent}> <Text style={styles.modalText}>Hello from the modal!</Text> <Button title="Hide modal" onPress={toggleModal} /> </View> </Modal> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, modalContent: { backgroundColor: 'white', padding: 22, justifyContent: 'center', alignItems: 'center', borderRadius: 4, borderColor: 'rgba(0, 0, 0, 0.1)', }, modalText: { marginBottom: 15, fontSize: 18, }, }); export default ModalTester;

Debug

Known issues

breakingVersion 14.x (currently in Release Candidate) bumps the minimum required React Native version to `0.78.0` and above. Projects on older React Native versions will need to upgrade or stick to v13.x.

fix

Upgrade your React Native project to version 0.78.0 or newer, or use `react-native-modal` version `13.x` for React Native versions `>=0.70.0`.

affects: >=14.0.0-rc.0

breakingVersion 13.0.0 introduced a breaking change by removing the usage of the deprecated `removeListener` function, requiring `react-native>=0.65`.

fix

Ensure your project is using `react-native` version `0.65` or higher. Update `react-native-modal` and potentially `react-native`.

affects: >=13.0.0

breakingVersion 12.0.0 included a types update where `defaultProps` are now optional, which could affect TypeScript consumers.

fix

Review TypeScript definitions for components consuming `react-native-modal` to account for optional `defaultProps`.

affects: >=12.0.0

gotchaVersion 14.0.0-rc.1 is a release candidate and is explicitly noted as 'untested on Expo'. It may have instabilities or unexpected behavior in Expo managed workflows.

fix

Exercise caution when using v14.x in production or Expo environments. Consider using the latest stable `13.x` release for greater stability on Expo.

affects: >=14.0.0-rc.0

gotchaThe project is actively seeking new maintainers and contributors. This could imply a slower development pace or potential changes in project direction if new maintainers take over.

fix

Monitor the GitHub discussions and issues for updates on project maintenance and development. Consider contributing if you rely heavily on the library.

affects: all

Errors

Common errors & fixes

The modal does not display correctly on Android. It either appears partially off-screen, becomes non-interactive, or fails to render entirely.

Often seen when `react-native-modal` is used alongside other libraries that manage views or gestures, like `ReorderableList` or `react-native-reanimated-carousel` on Android. This can stem from conflicts in view hierarchy or animation handling.

fix

As a workaround, try conditionally hiding conflicting components (e.g., `Carousel`) when the modal is open. Ensure your root component is wrapped in `GestureHandlerRootView` if using `react-native-gesture-handler`.

KeyboardAvoidingView not working properly inside the modal on Android or iOS, leading to inputs being obscured by the keyboard.

React Native's `KeyboardAvoidingView` can be inconsistent, especially within modals and across platforms, often due to issues with calculating offsets or conflicting layout behaviors.

fix

Adjust `keyboardVerticalOffset` prop for `KeyboardAvoidingView` based on platform (`Platform.OS === 'ios' ? 0 : 0`). For iOS modals with native headers, manual calculation involving `useSafeAreaInsets` might be needed. Alternatively, consider third-party keyboard-aware solutions.

Modal is not showing up or toggling correctly, or requires a 'hot reload' (saving code) to appear after `isVisible` state changes.

`isVisible` prop not being properly controlled by component state, or sometimes race conditions in React Native's reconciliation, especially when conditionally mounting modals.

fix

Ensure `isVisible` is always controlled by a state variable (`useState`) and update it reliably. Avoid `&&` for conditional rendering; instead, always render the `<Modal>` component and control its visibility solely via `isVisible`.

Swipe-to-close animation is not visible or swipe gestures are not working smoothly, especially when `useNativeDriver` is enabled for animations.

`useNativeDriver` might not support certain animation properties (e.g., `top` and `left` instead of `translateX`/`translateY`) used by the underlying animation library, or conflicts with other gesture handlers.

fix

Ensure `react-native-gesture-handler` is correctly linked and the root component is wrapped in `GestureHandlerRootView`. If using `useNativeDriver`, verify that the animation properties are compatible (prefer `transform` properties). Disable `useNativeDriver` if visual animations are crucial and it causes issues.

Attempt to dismiss and immediately present another modal causes the app to freeze (iOS) or misbehaves when multiple modals are used consecutively.

React Native's native modal implementation can struggle with rapid, successive modal presentations/dismissals, as the native cleanup might be asynchronous, leading to conflicts if a new modal is triggered before the previous one fully unmounts.

fix

Implement a delay or use animation end listeners (`onModalHide`, `onModalWillHide`) to ensure one modal is fully dismissed before attempting to open another. Avoid imperative modal patterns that do not respect the component lifecycle.

Upgrade

Version history

14.0.0-rc.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React Native applications.

react-nativerequiredPeer dependency. Version >=0.70.0 for v13.x; >=0.78.0 for v14.x.

Agent activity

4 hits · last 30 days

node

Resources

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

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