React-native-nested-modals NPM

react-native-nested-modals

Installation

npm install react-native-modal react-native-nested-modals

This package built on top react-native-modal, make sure it installed in your project

Usage

import { ModalsProvider } from 'react-native-nested-modals';

// ...

 <ModalsProvider>
   <App />
 </ModalsProvider>

Inside the wrapped component

import useNestedModals, { INestedModalsContext, modalsContext } from 'react-native-nested-modals';

// function component
const { openModal, closeModal, closeAllModals }: INestedModalsContext = useNestedModals();

// class component
<modalsContext.Consumer>
  {( openModal, closeModal, closeAllModals }) => ...}
</modalsContext.Consumer>

To do - Create method for MyModal props manipulation on run time

Speical types

type TModalProps = {
  withClickOutside?: boolean;  // defalut -> false
  onClickOutside?: () => void; // defalut -> useNestedModals().close  
} & Partial<ModalProps>;


interface INestedModalsContext {
  closeModal: (idx?: number) => void; // default -> modals.length - 1
  openModal: (MyModal: ReactElement, modalProps?: TModalProps) => number; // default -> ( **REQUIRED**, {} ) => new modal idx
  closeAllModals: () => void;
}

List of full react-native-modal ModalProps can be found here

Unlike react-native-modal, isVisibile alwayes set to true, in case you want to close a modal, just call close method.

To do - Support for modalProps manipulation and re-render accords

Full working example