# react-native-community/react-native-modal

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/react-native-community-react-native-modal).**

5,656 stars · 653 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/react-native-community/react-native-modal
- awesome-repositories: https://awesome-repositories.com/repository/react-native-community-react-native-modal.md

## Description

This project is a cross-platform UI component for React Native applications that provides a customizable overlay window for presenting content on top of existing application views. It serves as a library for managing animated modal components, backdrops, and mobile transitions.

The component distinguishes itself through support for custom enter and exit animations and highly configurable backdrops, allowing for the adjustment of opacity, color, and the integration of custom elements. It also implements gesture-based dismissal, enabling users to close overlays via background taps or swipes in specified directions.

The library handles mobile-specific interface challenges, including adaptive keyboard positioning to keep content visible when the software keyboard opens and the coordination of swipe gestures with internal scrollable content. It further provides lifecycle callbacks that trigger during animation sequences and system events.

## Tags

### User Interface & Experience

- [Mobile Overlay Interfaces](https://awesome-repositories.com/f/user-interface-experience/mobile-overlay-interfaces.md) — Provides a cross-platform UI component for building animated popups and dialogs on mobile devices.
- [Component Composition Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives.md) — Wraps native modal primitives with a flexible layer of props for customizable backdrop and content styling.
- [Cross-Platform UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/component-transitions/react-libraries/cross-platform-ui-libraries/cross-platform-ui-component-libraries.md) — Offers a reusable interface element for consistent modal behavior across different mobile operating systems.
- [Gesture-Based Dismissal](https://awesome-repositories.com/f/user-interface-experience/drawers/gesture-based-dismissal.md) — Enables the closure of modal panels through swipe gestures and background tap interactions. ([source](https://github.com/react-native-community/react-native-modal#readme))
- [Keyboard-Relative Positioning](https://awesome-repositories.com/f/user-interface-experience/keyboard-relative-positioning.md) — Dynamically offsets the vertical position of the overlay based on the virtual keyboard's current frame.
- [Modal Transition Styles](https://awesome-repositories.com/f/user-interface-experience/modals/modal-transition-styles.md) — Supports custom animation configurations for the presentation and dismissal of modal overlays.
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays.md) — Provides a comprehensive library for managing modal windows, backdrops, and overlay interaction logic.
- [Touch Gesture Detection](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-detection.md) — Detects and responds to touch interactions including swipes and background taps to trigger modal dismissal.
- [Popup Backdrops](https://awesome-repositories.com/f/user-interface-experience/styled-properties/popup-styling/popup-backdrops.md) — Allows customization of the background overlay, including color, opacity, and custom elements for visual isolation. ([source](https://github.com/react-native-community/react-native-modal#readme))

### Mobile Development

- [Keyboard Occlusion Management](https://awesome-repositories.com/f/mobile-development/keyboard-occlusion-management.md) — Ensures overlay content remains visible and accessible when the software keyboard opens on mobile devices.
- [Mobile Gesture Interactions](https://awesome-repositories.com/f/mobile-development/mobile-gesture-interactions.md) — Implements touch-based gestures such as swipe-to-dismiss for temporary mobile screens.
- [React Native Components](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components.md) — Provides a specialized UI component for creating custom overlay windows within the React Native ecosystem.

### Part of an Awesome List

- [UI Transition Animations](https://awesome-repositories.com/f/awesome-lists/media/animation-transitions/ui-transition-animations.md) — Provides visual effects that interpolate styles and opacity during the modal entry and exit transitions.
- [UI Components](https://awesome-repositories.com/f/awesome-lists/devtools/ui-components.md) — Enhanced and animated modal component.

### Software Engineering & Architecture

- [Lifecycle Callbacks](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-callbacks/lifecycle-callbacks.md) — Implements function hooks that trigger specifically at the start and end of modal animation sequences.
- [Modal Lifecycle Hooks](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-callbacks/lifecycle-callbacks/modal-lifecycle-hooks.md) — Triggers specific callbacks when modal animations start or finish, and upon system back button presses. ([source](https://github.com/react-native-community/react-native-modal#readme))