ModalComponentProp

Interface of the modal prop exposed by the library specifically to modal components.

Note: ModalComponentProp reuses the same types as ModalProp and only adds 4 more on top of them.

TypeScript

export type ModalComponentProp<
  P extends ModalfyParams,
  Props = unknown,
  M = keyof P
> = Props & {
  modal: UsableModalComponentProp<P, M>
}

// ------------------ INTERNAL TYPES ------------------ //

type ModalfyParams = { [key: string]: any }

interface UsableModalComponentProp<
  P extends ModalfyParams,
  M extends keyof P
> extends<UsableModalProp<P>> {
  addListener: ModalListener
  getParam: <N extends keyof P[M], D extends P[M][N]>(
    paramName: N,
    defaultValue?: D,
  ) => D extends P[M][N] ? P[M][N] : undefined
  removeAllListeners: () => void
  params?: P[M]
}

type ModalListener = (
  eventName: 'onAnimate',
  callback: (value?: number) => void,
) => ModalEventListener

type ModalEventListener = { remove: () => boolean }

react-native-modalfy/types.ts at main · colorfy-software/react-native-modalfyGitHub

Types have been simplified for the sake of clarity. Refer to the exact definitions here.

API reference

addListener

addListener: ModalListener

Function that allows you to hook a listener to the animatedValue of the modal represented by the component you're in.

Example:

React JSX

./modals/EmptyModal.js

import React from 'react'

const EmptyModal = ({ modal: { addListener }) => {
  const modalListener = React.useRef()

  const handleAnimation = (value) => {
    console.log('Modal animatedValue:', value)
  }

  React.useEffect(() => {
    modalListener.current = addListener('onAnimate', handleAnimation)
    
    return () => {
      modalListener.current?.remove()
    }
  }, [])

  return (
    //...
  )
}

export default EmptyModal

getParam

getParam: <N extends keyof P[M], D extends P[M][N]>(
  paramName: N,
  defaultValue?: D,
) => D extends P[M][N] ? P[M][N] : undefined

Function that looks inside params and returns you the value of the key corresponding to paramName. Returns the provided defaultValue if nothing was found.

Example:

React JSX

./modals/ErrorModal.js

import React from 'react'
import { Button, Text, View } from 'react-native'

const TITLES = {
  login: 'We could not log you in',
  signup: 'We could not create your account',
  unknown: 'An error has occurred!',
}

const ErrorModal = ({ modal: { closeModal, getParam } }) => {
  const origin = getParam('origin', 'unknown')
  const message = getParam('message', 'Something went wrong... 🤔')

  return (
    <View>
      {/* 'An error has occurred!' */}
      <Text>{TITLES[origin]}</Text>
      {/* 'Your token has expired user' */}
      <Text>{message}</Text>
      <Button onPress={closeModal} title="OK" />
    </View>
  )
}

export default ErrorModal

removeAllListeners

removeAllListeners: () => void

Removes all the listeners connected to the modal component you're in.

Example:

import React from 'react'

const EmptyModal = ({ modal: { addListener, removeAllListeners }) => {
  const modalListener = React.useRef()

  const handleAnimation = (value) => {
    console.log('Modal animatedValue:', value)
  }

  React.useEffect(() => {
    modalListener.current = addListener('onAnimate', handleAnimation)
    
    return () => {
      removeAllListeners()
    }
  }, [])

  return (
    //...
  )
}

export default EmptyModal

params

params?: P[M]

Optional params you provided when opening the modal you're in.

Example:

React JSX

./modals/ErrorModal.js

import React from 'react'
import { Button, Text, View } from 'react-native'

const ErrorModal = ({ modal: { closeModal, params } }) => (
  <View>
    <Text>{params?.title}</Text>
    <Text>{params?.message}</Text>
    <Button onPress={closeModal} title="Close" />
  </View>
)

export default ErrorModal