React-native-multiple-modals NPM

React Native Multiple Modals

Native Modal implementation which allows to display multiple Modals simultaneously.

React Native Multiple Modals

✨ 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

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 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.

`statusBarTranslucent?: boolean = false` - Android only

Determines whether your modal should go under the system statusbar.

`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.

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 🙏.

Also, if there are any well-known issues in React Native that haven’t been fixed for a long time and they show up here too, let me know! Let’s make things better together 😎.