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

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: https://github.com/paufau/react-native-multiple-modals-examples

---

Properties

animationType?: "fade" | "slide" | "none" = "none"

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

---

contentContainerStyle?: ViewStyle

Styles of the content wrapper. Use it for aligning your content view.

---

statusBar?: StatusBarProps - Native Only

Controls the status bar.

Android - supports only translucent, barStyle

iOS - all props are supported.

See StatusBarProps type

---

disableDefaultStatusBarIOS?: boolean = false - iOS only

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.

---

onRequestDismiss?: (calledBy: 'Backdrop' | 'BackButton') => void

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.

---

renderBackdrop?: () => ReactNode

Use it to render custom backdrop. For example <BlurView />

---

backdropColor?: string

Default: rgba(0, 0, 0, 0.3)

---

BackdropPressableComponent?: FC<PressableProps>

The component which wraps renderBackdrop. Use it to overwrite default props or make backdrop untouchable.

---

@Deprecated (use statusBar prop) statusBarTranslucent?: boolean = false - Android only

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: software-mansion/react-native-reanimated#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

• Pavel Pakseev

Sponsor & Support

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