React Native Modals Library for IOS & Android.
npm install @haroldtran/react-native-modals> Cross-platform React Native modal components and utilities for building flexible dialogs, bottom sheets, and animated modals on iOS and Android.
Maintained and enhanced by Harold - @phattran1201 👨💻
- Declarative Modal component with customizable title, content, footer and animations
- Bottom sheet-style BottomModal
- Imperative ModalPortal API for showing/updating/dismissing modals from anywhere in your app
- Built-in animations: FadeAnimation, ScaleAnimation, SlideAnimation and the base Animation class for custom animations
- Backdrop control and swipe-to-dismiss support
- TypeScript types included
---
Install the published package (scoped):
``bash`
npm install --save @haroldtran/react-native-modalsor
yarn add @haroldtran/react-native-modals
Peer dependencies: react, react-native
---
The library exposes an imperative portal that must be mounted near the root of your app. Add ModalPortal to your app root so the portal can render modals:
`jsx
import React from 'react';
import { ModalPortal } from '@haroldtran/react-native-modals';
export default function Root({ children }) {
return (
<>
{children}
>
);
}
`
If you use Redux or other providers, mount ModalPortal alongside them.
---
`jsx
import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { Modal, ModalContent } from '@haroldtran/react-native-modals';
export default function Example() {
const [visible, setVisible] = useState(false);
return (
onTouchOutside={() => setVisible(false)}
>
);
}
`
---
Use the ModalPortal to show modals programmatically from anywhere in your app. The portal returns an id which you can use to update or dismiss that modal.
`jsx
import { ModalPortal } from '@haroldtran/react-native-modals';
// Show a modal and keep the returned id
const id = ModalPortal.show(
);
// Update the modal content later
ModalPortal.update(id, {
children: (
),
});
// Dismiss a specific modal
ModalPortal.dismiss(id);
// Dismiss all open modals
ModalPortal.dismissAll();
`
---
The library includes a base Animation class and several concrete implementations:
- FadeAnimation — fade in/outScaleAnimation
- — scale from/to a valueSlideAnimation
- — slide from top, bottom, left or right
Example: passing a SlideAnimation to a Modal
`jsx
import { Modal, SlideAnimation } from '@haroldtran/react-native-modals';
modalAnimation={new SlideAnimation({ slideFrom: 'bottom' })}
>
`
Create a custom animation by extending Animation and overriding in, out and getAnimations().
---
The package exports the following components and TypeScript types:
- Modal (default export)
- BottomModal
- ModalPortal
- Backdrop
- ModalButton
- ModalContent
- ModalTitle
- ModalFooter
- Animation, FadeAnimation, ScaleAnimation, SlideAnimation
Types:
- DragEvent, SwipeDirection, ModalProps, ModalFooterProps, ModalButtonProps, ModalTitleProps, ModalContentProps, BackdropProps
For more details see the src folder and the types in src/type.ts.
---
- The ModalPortal must be mounted for the imperative APIs to work.Modal` supports swipe-to-dismiss and provides callbacks for swipe move, release and completed swipe events.
-
- The modal backdrop, overlay color and opacity are configurable via props.
---
Harold Tran |