rn-popup-manager

Priority Queue Based Popup Manager For React Native

It is a light-weight and easy-to-use React Native package, that provides finer control over the popups and modals in the app. It keeps only one popup active at a time, based on the priority, while others wait in the queue. This helps in preventing modal-over-modal issues and crashes. It is made specifically to support both Android and IOS.

Quickstart ⚡️

1. Install

npm install rn-popup-manager

yarn add rn-popup-manager

2. Imports

import {PopupProvider, PopupWrap, usePopupController} from 'rn-popup-manager';

3. Usage

• Enable the Popup Manager by wrapping your app-content with <PopupProvider> at the App level. ex:

  function App(): JSX.Element {
    return (
        <PopupProvider>
          .
          .
          .
        </PopupProvider>
    );
  }

• Wrap all modals and popups with <PopupWrap>. ex:

  <PopupWrap>
    <CustomPopup body="I am Popup" onClose={closePopup} />
  </PopupWrap>

• Alternatively use withWrap() while exporting popups. ex:

  export default withWrap(CustomPopup);

Note:

• Use either <PopupWrap> or withWrap(), do not use both the ways together on same component.
• Do not nest <PopupWrap> within another <PopupWrap>.

Props

Related to <PopupWrap> and withWrap():

• priority: number. Default value is 0.
• visible: boolean. Default value is true.

Related to <PopupProvider>:

• waitTimeBeforePopupReplaceIos: number. Default value is 500 (ms).
• delayTimeAfterPopupCloseIos: number. Default value is 100 (ms).

Methods

const {hold, release} = usePopupController();

• hold(): Puts a hold on current and upcoming popups.
• release(): Does opposite to what hold() does.

Example

Whenever you're rendering modal conditionally, make sure the wrap also gets removed when modal gets removed from the screen. Here are some ways in which we can use:

//wrong usage
<PopupWrap>
  <Modal visible={isVisible} />
</PopupWrap>

//correct usage
<PopupWrap visible={isVisible}>
  <Modal visible={true} />
</PopupWrap>

//correct usage
{isVisible && (
  <PopupWrap>
    <Modal visible={true} />
  </PopupWrap>
)}

.
.
//export with withWrap
export default withWrap(CustomPopup);

//wrong usage
<PopupWrap>
  <CustomPopup visible={true} />
</PopupWrap>

//correct usage
<CustomPopup visible={isVisible} />
//or
{isVisible && <CustomPopup />}

As long as the wrap stays visible on the screen, it is assumed that the popup or modal inside it is visible. So, never make the wrap visible with the modal inside it being invisible, as this doesn't let next modals in the queue to get displayed if they exist.

Changelog

- Improvements:

• 2.0.2:

  • An Edge case handling in IOS, introduction of delayTimeAfterPopupCloseIos prop.

• 2.0.1:

  • Error message log has been added upon nesting <PopupWrap> within each other.

- Breaking changes:

• 2.0.0:
  • next() method has been removed, as it doesn't fit in the current usage framework.

- Fixes:

• 2.0.0:
  • Issue related to programatically deactivating the popups that were currently waiting in the queue has been fixed.