Note
Simplify your modal management in React Native with the React Native Magic Modal library. Effortlessly control modals, streamline complex flows, and create a seamless user experience.
- 📲 Easy Integration: Seamlessly integrate with your React Native app.
- 🔄 Complex Flow Management: Manage intricate modal sequences effortlessly.
- 🔧 Customizable: Tailor modals to fit your app's unique requirements.
React Native Magic Modal offers a superior experience compared to traditional modal implementations:
- 🎨 Stylish and Responsive: Designed to look great on both iOS and Android.
- 🚀 Developer Friendly: Simple to use, with a focus on developer experience.
- 🧩 Versatile: Adaptable to a wide range of modal scenarios.
yarn add react-native-magic-modalInsert a MagicModalPortal at the top of your application structure:
import { MagicModalPortal } from 'react-native-magic-modal';
export default function App() {
return (
<>
<MagicModalPortal /> {/** At the top of your app component hierarchy */}
<YourAppContent />
</>
);
}Showcasing modal management on iOS and Android platforms:
| iOS | Android |
|---|---|
 |
 |
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { MagicModalPortal, magicModal } from 'react-native-magic-modal';
const ConfirmationModal = () => (
<View>
<TouchableOpacity onPress={() => magicModal.hide({ success: true })}>
<Text>Click here to confirm</Text>
</TouchableOpacity>
</View>
);
const ResponseModal = ({ text }) => (
<View>
<Text>{text}</Text>
<TouchableOpacity onPress={() => magicModal.hide()}>
<Text>Close</Text>
</TouchableOpacity>
</View>
);
const handleConfirmationFlow = async () => {
// You can call `show` with or without props, depending on the requirements of the modal.
const result = await magicModal.show(ConfirmationModal);
if (result.success) {
return magicModal.show(() => <ResponseModal text="Success!" />);
}
return magicModal.show(() => <ResponseModal text="Failure :(" />);
};
export const MainScreen = () => {
return (
<View>
<TouchableOpacity onPress={handleConfirmationFlow}>
<Text>Start the modal flow!</Text>
</TouchableOpacity>
<MagicModalPortal />
</View>
);
};Refer to the example for detailed usage scenarios.
Access the complete documentation here.
Q: Can I have two modals showing up at the same time?
A: No, this library is based on react-native-modal, which does not support this functionality.
Special thanks to everyone who contributed to making React Native Magic Modal a robust and user-friendly library. See the full list.
See the contributing guide to learn how to contribute to the repository.
React Native Magic Modal is licensed under the MIT License.