React Native Modalfy
v3.x
v3.x
  • Getting started
  • Installation
  • 🤓Guides
    • Creating a stack
    • Opening & closing
    • Passing params
    • Triggering a callback
    • Type checking with TypeScript
    • Subscribing to events
    • Using outside React
    • Upgrading from v2.x
  • 📚API Reference
    • Types
      • ModalStackConfig
      • ModalOptions
      • ModalProp
      • ModalComponentProp
      • ModalProps
      • ModalComponentWithOptions
    • ModalProvider
    • createModalStack
    • useModal
    • withModal
    • modalfy
  • 📰Blog
    • Unveiling Modalfy v3
    • Announcing Modalfy v2
    • Stacks on stacks in React Native
    • Introducing a Modal Citizen
  • 🗃️Others
    • Help
    • Contributing
    • Changelog
    • GitHub
Powered by GitBook
On this page
  • API reference
  • closeAllModals
  • closeModal
  • closeModals
  • currentModal
  • openModal

Was this helpful?

  1. API Reference
  2. Types

ModalProp

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

type ModalProp<P extends ModalfyParams, Props = unknown> = Props & {
  modal: UsableModalProp<P>
}

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

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

interface UsableModalProp<
  P extends ModalfyParams,
  M extends Exclude<keyof P, symbol | number> = Exclude<
    keyof P,
    symbol | number
  >
> {
  closeAllModals: (callback?: () => void) => void
  
  closeModal: (modalName?: M, callback?: () => void) => void
    
  closeModals: (modalName: M, callback?: () => void) => boolean
  
  currentModal: M | null
  
  openModal: (modalName: M, params?: P[M], callback?: () => void) => void
}

API reference

closeAllModals

closeAllModals: (callback?: () => void) => void

This function closes every open modal.

Example: modal.closeAllModals()

modalfy().closeAllModals()

modalfy().closeAllModals(() => console.log('All modals closed'))

closeModal

closeModal: (modalName?: M, callback?: () => void) => void

This function closes the currently displayed modal by default. Incidentally, you can also provide a modalName if you want to close a different modal than the latest opened.

Examples:

modalfy().closeModal()

modalfy().closeModal('UserModal', () => console.log('Latest UserModal modal closed'))

modalfy().closeModal(undefined, () => console.log('Latest modal closed'))

closeModals

closeModals: (modalName: M, callback?: () => void) => boolean

This function closes all the instances of a given modal. You can use it whenever you have the same modal opened several times, to close all of them at once.

Example:

modalfy().closeModals(
  'ErrorModal', 
  () => console.log('All ErrorModal modals closed')
)

Returns: boolean indicating whether or not Modalfy found any open modal corresponding to the provided modalName (and then closed them).

currentModal

currentModal: M | null

This value returns the current open modal (null if none).

Example: modal.currentValue

openModal

openModal: (modalName: M, params?: P[M], callback?: () => void) => void

This function opens a modal based on the provided modalName. It will look at the stack passed to <ModalProvider> and add the corresponding component to the current stack of open modals. Alternatively, you can also provide some params that will be accessible to that component.

Example:

modalfy().openModal(
  'PokedexEntryModal', 
  { id: 619, name: 'Lin-Fu' },
  () => console.log('PokédexEntryModal modal opened'),
)
PreviousModalOptionsNextModalComponentProp

Last updated 9 months ago

Was this helpful?

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