React Native Modal

An improved modal implimentation for React Native - by

• Uses pure JS
• Does not use the additional native layer used by react-native's implementation
• Fixes Android bugs associated with touch events
• Uses hooks, rather than adding things to a component's render that aren't displayed
• Has four animation types
• No additional dependencies

Installation

yarn:

$ yarn add @idiosync/react-native-modal

npm:

$ npm i @idiosync/react-native-modal

Basic Usage

First, to use this library, you must wrap your entire app in with <ModalContextLayer>

const App = () => {
  return (
    <ModalContextLayer>
      {...App goes here...}
    </ModalContextLayer>
  )
}

The simplest implementation uses the useModal hook and controls viability at the component where the hook is being used

import { useModal } from "@idiosync/react-native-modal"

const SomeComponent = () => {
  const [modalIsVisible, setModalIsVisible] = useState(false)

  // this config is optional
  const options = {
    onBackgroundPress: () => setModalIsVisible(false),
    animationTypeIn: AnimationType.SLIDE_TOP,
    animationTypeOut: AnimationType.SLIDE_BOTTOM,
  }

  useModal(
    () => <MyModal onClose={() => setModalIsVisible(false)} />,
    modalIsVisible
    options
  )

  return (
    <OpenButton onPress={() => setModalIsVisible(true) />
  )
}

When using the useModalTrigger hook, the viability is handled automatically and functions are returned to open and close the modal

const SomeComponent = () => {
  // the onClose function is received via the render function
  // and passed into the modal component
  const { openModal, closeModal } = useModalTrigger(
    ({ onClose }) => <MyModal onClose={onClose} />,
  )

  return (
    <>
      <OpenButton onPress={openModal} />
      <CloseButton onPress={closeModal} />
    </>
  )

Finally - a situation often arises in which a component has a series of modals, all of which open based on a state, or a set of variables. This can be streamlined with useModalSwitch

const SomeComponent = () => {
  const [currentModal, setCurrentModal] = useState(MODAL_1)

  // The hook accepts an array or arrays. The nested arrays
  // contain the render function, the condition that specifies isVisible
  // and the modal options
  useModalSwitch([
    [
      () => <Modal1 onClose={() => setCurrentModal(MODAL_2)} />,
      currentModal === MODAL_1,
      options
    ],
    [
      () => <Modal2 onClose={() => setCurrentModal(MODAL_3)} />,
      currentModal === MODAL_2,
      options
    ],
    [
      () => <Modal3 onClose={() => setCurrentModal(NONE)} />,
      currentModal === MODAL_3,
      options
    ]
  ])

  return (
    <SomeOtherComponent onShowModal={() => setModalIsVisible(true) />
  )
}

Hook Interfaces

useModal

Arguments:

• renderModal - Render function which is passed an interface, and returns your bespoke modal component
• isVisible - boolean that specifies whether the modal should be rendered
• options (optional) - Modal options
• onModalClosed (optional) - Called when modal start to animate out
• onModalRemoved (optional) - Called when animation out is completed, and modal is removed

Returned interface:

• removeModal - Instantly removes modal with no out animation

useModalTrigger

Arguments:

• renderModal - Render function which is passed an interface, and returns your bespoke modal component
• options (optional) - Modal options
• onModalClosed (optional) - Called when modal start to animate out
• onModalRemoved (optional) - Called when animation out is completed, and modal is removed

Returned interface:

• openModal - Triggers modal to start animating in
• closeModal - Triggers modal to start animating out
• removeModal - Instantly removes modal with no out animation

useModalSwitch

Arguments:

• modalConfigArray - An array of arrays, each with 2 / 3 elements
• [0] - renderModal - Render function which is passed an interface, and returns your bespoke modal component
• [1] - isVisible - boolean that specifies whether the modal should be rendered
• [2] - options (optional) - Modal options

Options

• onBackgroundPress - Callback triggered by the background being pressed
• animationTypeIn - Animation type used when modal appears
• animationTypeOut - Animation type used when modal disappears
• backgroundFadeDuration - The time taken for the background to animate
• backgroundFadeOutDelay - Time after which the background animates out once modal is closed
• animationTimeIn - Time taken to animate in
• animationTimeOut - Time taken to animate out

Animation Types

Animations types found on the AnimationType enum

• FADE - Fade in or out
• SLIDE_TOP - Slide in from, or out to the top of the screen
• SLIDE_BOTTOM - Slide in from, or out to the bottom of the screen
• SLIDE_LEFT - Slide in from, or out to the left of the screen
• SLIDE_RIGHT - Slide in from, or out to the right of the screen