React Native Magic Modal 🦄

Docs | GitHub | FAQ | Article

[!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.

Features

• 📲 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.

Highlights

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.

Table of Contents

• Installation
• Quickstart
• Examples
• Documentation
• FAQ
• Contributors

Installation

yarn add react-native-magic-modal

Quickstart

Insert 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 />
    </>
  );
}

Examples

Showcasing modal management on iOS and Android platforms:

iOS	Android

Usage

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.

Documentation

Access the complete documentation here.

FAQ

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.

Contributors

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.

License

React Native Magic Modal is licensed under the MIT License.