react-native-multiple-modals
v3.2.3TypeScript
Native implementation with the ability to display multiple Modals
988/weekUpdated 3 months agoMITUnpacked: 305.0 KB
Published by Pavel Pakseev
npm install react-native-multiple-modalsReact Native Multiple Modals
!Static Badge
!Static Badge
Native Modal implementation which allows to display multiple Modals simultaneously.
✨ Features
- 🚀 Shows multiple instances at the same time
- 💯 Displays on top of default modal
- 🆗 Supports gesture handler out of the box
- 🛠️ Displays above bottom tabs navigation
- 📱 Adjusts content when rotated
- 💥 Enhanced status bar configuration
- ✅ Accessibility Support
Installation
``bash`
npm i react-native-multiple-modals
`bash`
yarn add react-native-multiple-modals
#### iOS
`bash`
pod install --project-directory=ios
Usage
`tsx
import { ModalView } from 'react-native-multiple-modals';
const YourComponent = () => {
const [isVisible, setVisibility] = useState(false);
return (
);
};
`
More Examples: https://github.com/paufau/react-native-multiple-modals-examples
---
Properties
$3
The animationType prop controls how the modal animates.
Possible values:
- "slide" slides in from the bottom
- "fade" fades into view
- "none" appears without an animation
---
$3
Styles of the content wrapper. Use it for aligning your content view.
---
$3
Controls the status bar.
Android - supports only translucent, barStyle
iOS - all props are supported.
---
$3
Allows to disable inner StatusBar component in case you are using 'expo-status-bar'.
Note that it is only applicable for iOS because there status bar is shared between all modal windows. On the other hand on android status bar is tightly coupled to the individual modal window and couldn't be controller through the StatusBar component.
---
$3
The method is called when backdrop or back button is pressed
> _TIP_: If you want the modal to block the interface and not close when user taps the backdrop or back button. Then just don't pass this function. The modal will be rendered until you remove it from the React tree.
---
$3
Use it to render custom backdrop. For example
---
$3
Default: rgba(0, 0, 0, 0.3)
---
$3
The component which wraps renderBackdrop`.
Use it to overwrite default props or make backdrop untouchable.
---
$3
Determines whether your modal should go under the system statusbar.
---
Contribution
#### FOUND A BUG? HELP THE PROJECT AND REPORT IT!
If you notice any bugs or anything working differently compared to React Native, feel free to open an issue. It’ll really help improve the project 🙏.
#### Still missing something?
I would love if you would let me know what you are missing in the library. _Together we can make it a community standard!_
Developing & Testing
Follow instructions: https://github.com/paufau/react-native-multiple-modals-examples
Roadmap
Common:
- Create separate documentation page
Troubleshooting
- Reanimated modal has wrong size for the first only render:
https://github.com/software-mansion/react-native-reanimated/issues/6659
Versions
| library version | react-native | old arch | new arch | docs |
| --------------- | ------------ | -------- | -------- | ----------------------------------------------------------------------------------- |
| 3.0.0+ | 73+ | ✅ | ✅ | Documentation |
| 2.0.0 - 2.5.0 | 71+ | ✅ | ✅ | Documentation |
| 1.0.0 - 1.2.6 | 70+ | ✅ | ❌ | Documentation |
Author
Sponsor & Support
If you found the library useful, you can support me here:
