@idiosync/react-native-modal
TypeScript icon, indicating that this package has built-in type declarations

1.2.14 • Public • Published

NPM Version

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 (
    // NOTE: if you need to access any context from inside your modal, such as redux
    // you need to place the ModalContextLayer inside the provider for that context
    <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)

  useModal(
    {
      // all config params are optional apart from renderModal
      renderModal: () => <MyModal onClose={() => setModalIsVisible(false)} someProp={someProp} />,
      onBackgroundPress: () => setModalIsVisible(false),
      animationTypeIn: AnimationType.SLIDE_TOP,
      contentContainerStyle: { width: '100%' }
    },
    modalIsVisible,
    [someProp] // dependencies array to trigger rerenders. Empty array is passed by default
  )

  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({
    renderModal: ({ 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([
    [
    { renderModal: () => <Modal1 onClose={() => setCurrentModal(MODAL_2)} /> },
      currentModal === MODAL_1,
    ],
    [
      {
        renderModal: () => <Modal2 onClose={() => setCurrentModal(MODAL_3)} someParam={someParam} />,
        ...options,
      },
      currentModal === MODAL_2,
      [someParam] // depencencies added per modal

    ],
    [
      { renderModal: () => <Modal3 onClose={() => setCurrentModal(NONE)} /> },
      currentModal === MODAL_3,
    ]
  ])

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

Hook Interfaces

useModal

Arguments:

  • config - config object for you modal - must include your renderModal function
  • isVisible - boolean that specifies whether the modal should be rendered
  • dependencies - An array of dependecied for shallow checking. When these change, the modal rerenders. They will often be the same as your modals properties

Returned interface:

  • removeModal - Instantly removes modal with no out animation

useModalTrigger

Arguments:

  • config - config object for you modal - must include your renderModal function
  • dependencies - An array of dependecied for shallow checking. When these change, the modal rerenders.

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] - config - config object for you modal - must include your renderModal function
  • [1] - isVisible - boolean that specifies whether the modal should be rendered
  • [2] - dependencies - An array of dependecied for shallow checking. When these change, the modal rerenders.

Config

  • renderModal- Render function which is passed an interface, and returns your bespoke modal component
  • onBackgroundPress(optional) - Callback triggered by the background being pressed
  • animationTypeIn(optional) - Animation type used when modal appears
  • animationTypeOut(optional) - Animation type used when modal disappears
    • backgroundFadeDuration(optional) - The time taken for the background to animate
  • backgroundFadeOutDelay(optional) - Time after which the background animates out once modal is closed
  • animationTimeIn(optional) - Time taken to animate in
  • animationTimeOut(optional) - Time taken to animate out
  • onModalClosed(optional) - Called when modal start to animate out
  • onModalRemoved(optional) - Called when animation out is completed, and modal is removed
  • contentContainerStyle - Pass a style in to effect the container, for example to make it fill the screen. Be aware that filling the screen will stop you being able to click the background.
  • alignModal - horiontally align the modal within its parent container using the enum ModalAlign (START|END|CENTER).
  • justifyModal - vertically align the modal within its parent container using the enum ModalAlign (START|END|CENTER).

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.2.14
    4
    • latest

Version History

Package Sidebar

Install

npm i @idiosync/react-native-modal

Weekly Downloads

4

Version

1.2.14

License

MIT

Unpacked Size

64.2 kB

Total Files

32

Last publish

Collaborators

  • idiosync