React Native Multiple Modals

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

Documentation: https://paufau.github.io/react-native-multiple-modals/

• Getting Started
• Guides
• API Reference
• Compatibility

Installation

npm i react-native-multiple-modals

yarn add react-native-multiple-modals

iOS

pod install --project-directory=ios

Usage

import { ModalView } from "react-native-multiple-modals";

const YourComponent = () => {
  const [isVisible, setVisibility] = useState(false);

  return (
    <View>
      <Button text="Open modal" onPress={() => setVisibility(true)} />
      {isVisible && (
        <ModalView
          animationType="fade"
          statusBar={{ translucent: true, barStyle: "dark-content" }}
          backdropColor="rgba(0,0,0,0.5)"
          contentContainerStyle={{
            justifyContent: "center",
            alignItems: "center",
          }}
          onRequestDismiss={() => setVisibility(false)}
        >
          <YourContentView />
        </ModalView>
      )}
    </View>
  );
};

More examples: example/demo-components/src/modals

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!

Sponsor & Support

If you found the library useful, you can support me here: