react-native-multiple-modals

The library provides several advanced layering and UX capabilities:

• Multiple Instances: Shows multiple modals/sheets at the same time.
• Native Layering: Displays on top of the default React Native Modal and above bottom tab navigation.
• Gesture Support: Supports gesture handlers out of the box.
• Responsive Layout: Automatically adjusts content when the device is rotated.
• Status Bar: Provides enhanced status bar configuration.
• Accessibility: Built with WCAG accessibility support in mind.

The stacking order of ModalView instances is determined by the order in which they were opened, rather than their order in the JSX markup.

• When a ModalView mounts, it is placed on top of all currently open modals.
• The topmost modal is the only one that receives interaction for the Android back button or the Escape key on Web.
• Tapping a backdrop only triggers the onRequestDismiss callback of the topmost modal.

Use react-native-multiple-modals when you need a native implementation that supports showing multiple modals at once and provides full accessibility (WCAG) support.

Unlike the standard React Native Modal, this library allows multiple instances on iOS. Unlike JS-based solutions like react-native-modalfy or @gorhom/portal, it uses native layering, which is better for performance and integration with native components like bottom tabs.

To run E2E tests for the web platform, ensure you have Maestro CLI 2.10.0+ installed.

1. Start the web server:

   npx expo start --web

2. In a separate terminal, run the tests:

   npm run e2e:run -- --platform web --run-steps generation tests

The ModalView component is displayed when it is mounted in the React tree and hidden when it is removed. To handle user interactions like tapping the backdrop or pressing the hardware back button, provide an onRequestDismiss callback to update your local visibility state.

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"
          onRequestDismiss={() => setVisibility(false)}
        >
          <YourContentView />
        </ModalView>
      )}
    </View>
  );
};

On iOS, the status bar is shared across all windows. This means the internal StatusBar managed by ModalView may conflict with expo-status-bar if you are using it in your app.

To prevent this conflict and allow your own status bar component to control the appearance, pass the disableDefaultStatusBarIOS prop to ModalView.

To replace the default translucent backdrop of a ModalView with a blur effect, use the renderBackdrop prop.

Pass a function to renderBackdrop that returns a component (such as BlurView from expo-blur). The returned element is rendered inside a pressable that handles backdrop taps, so it should use style={{ flex: 1 }} to fill the available space.

Note that tapping the blurred area will trigger onRequestDismiss by default because the pressable wraps the returned element.

import { BlurView } from 'expo-blur';
import { ModalView } from 'react-native-multiple-modals';

const BlurredModal = ({ onClose, children }) => (
  <ModalView
    contentContainerStyle={{ justifyContent: 'center', alignItems: 'center' }}
    onRequestDismiss={onClose}
    renderBackdrop={() => <BlurView intensity={40} style={{ flex: 1 }} />}
  >
    {children}
  </ModalView>
);

Install the package using npm or yarn, and ensure you run pod install for iOS projects to set up the native layering capabilities.

npm i react-native-multiple-modals

# or

yarn add react-native-multiple-modals

# For iOS
pod install --project-directory=ios

The example is an Expo app that demonstrates react-native-multiple-modals on iOS, Android, and web.

Important: Because the library uses custom native (Fabric) code, you cannot use Expo Go. You must run the app as a dev build using npx expo run:ios or npx expo run:android after performing a prebuild.

cd example
npm install                 # links the library via file:.. and installs deps
npx expo prebuild --clean   # generates ios/ + android/ (regenerable; gitignored)

npx expo run:ios            # iOS simulator
npx expo run:android        # Android emulator/device
npx expo start --web        # web (react-native-web)