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
  • 1. When opening
  • 2. When closing
  • Things to remember

Was this helpful?

  1. Guides

Triggering a callback

PreviousPassing paramsNextType checking with TypeScript

Last updated 8 months ago

Was this helpful?

You may often want to perform an action as soon as you open or close a modal. Up until now, you had to skillfully employ setTimeout() in order to trigger your function after the modal is done animating. With Modalfy v3, you no longer have to think about it thanks to the built-in support of callbacks.

1. When opening

The function now accepts a 3rd argument that designates your callback. Simply provide it and you should see it be invoked after the modal has been opened (this includes animation time as well).

openModal('WelcomeModal', undefined, () => {
  console.log(`✅ Opened WelcomeModal`)
})

openModal('ErrorModal', { titleColor: 'red' }, () => {
  closeModal('WelcomeModal')
})

As you can see, still expects themodalNameandparamsas the first two arguments, with the latter being optional.

2. When closing

As you'd expect, all the closing methods have also received a new argument that behaves in the same capacity:

closeModal('ErrorModal', () => openModal('LoginModal'))

closeModals('ErrorModal', () => console.log('✅ Closed all ErrorModal'))

closeAllModals(() => console.log('✅ Closed all modals'))

Things to remember

You'll notice that first argument is optional. That's you can either provide undefined (to close the latest opened modal) or specify a name to close another one.

If you're using / to drive the modal animations yourself, remember that you have to call the new callback argument there in order for your callbacks to be called. You can refer to the dedicated section in the guide to learn more about it.

🤓
> ModalProp API
animationIn
animationOut
openModal()
openModal()
closeModal()
Upgrading from v2.x