react-native-multiple-modals

Native layering for React Native modals, sheets and overlays, including native Modal and bottom tabs

✨ 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
• ✅ Built with Accessibility support in mind (WCAG)

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

• Getting Started
• Guides
• API Reference
• Comparison
• 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

Comparison

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: