React Native Multiple Modals

Native Modal implementation which allows to display multiple Modals simultaneously.

✨ Features

• 📱 iOS & Android
• 🚀 Performant Native Implementation
• ✅ Accessibility Support
• 💯 Compatible with Expo
• 💥 New Architecture (Fabric)
• 🆗 Old Architecture (Paper)
• 👌 Written in TypeScript

Installation

npm i react-native-multiple-modals

or

yarn add react-native-multiple-modals

iOS

pod install --project-directory=ios

Versions

| version | react-native | links | | ------------- | ------------ | ----------------------------------------------------------------------------------- | | 2.0.0+ | 71+ | Documentation | | 1.0.0 - 1.2.6 | 70+ | Documentation |

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

More Examples: https://github.com/paufau/react-native-multiple-modals-examples

Properties

contentContainerStyle?: ViewStyle

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

onRequestClose?: (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.

containerSize?: { width: number, height: number }

Use to change the modals's rendering area. May be useful for foldable devices.

Default: Dimensions.get('screen')

Known issues

• Some layout animations from react-native-reanimated don't work properly inside the ModalView

Roadmap

Common:

• Add default fade and slide animations
• Add UI tests automation
• Create separate documentation page

Android:

• Add statusBarTranslucent and navigationBarTranslucent prop

Author

• Pavel Pakseev

Sponsor & Support

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