@oolio-group/rn-use-modal

React hook for showing modals on react-native. Uses react-native-modal under the hood. Show any component as modal with showModal

Why

Following recent trends useModal fits right in
There are some libraries already, but few of them allows dynamic content for modals.

Usage

import { useModal } from '@oolio-group/rn-use-modal';

function ScreenWithModal() {
  const { showModal, closeModal } = useModal();

  const onConfirm = useCallback(() => {
    closeModal();
  }, [closeModal]);

  const showConfirmation = useCallback(() => {
    showModal(<ConfirmationModal onConfirm={onConfirm} />);
  }, [showModal]);

  return <Pressable onPress={showConfirmation}>Confirm Me</Pressable>;
}

ModalProvider

You need to wrap your screen with ModalProvider first for useModal to work.

function App() {
  return (
    <ModalProvider modalProps={options}>
      <ScreenWithModal />
    </ModalProvider>
  );
}

For a list of options see this page

Caveats

This module currently uses react-native-modal under the hood. Considering life cycle of open source libraries it would be bettor to implement Modal from react-native directly. react-native-modal was chosen as of now to support web platforms also. This can be done by aliasing react-native-modal with modal-enhanced-react-native-web

Development

Build

Build all projects yarn build Clean build output yarn clean