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

Was this helpful?

  1. Guides

Subscribing to events

PreviousType checking with TypeScriptNextUsing outside React

Last updated 8 months ago

Was this helpful?

Once in a while, we might want to perform some animations alongside the ones applied to our modals.

One example could be animating the modal and something inside it at the same time. But to do so and have those animations happening in sync, we'd need to have access to the animatedValue Modalfy uses under the hood.

Another example could be that you'd like to be notified when your modal is about to be closed by Modalfy. Being able to access a closingAction could be very valuable here!

Use cases like this are the reason why we decided to provide a way to hook into the library's internal events, thanks to modal.addListener():

./modals/EmptyModal.tsx
import React, { useEffect, useRef }  from 'react'

const EmptyModal = ({ modal: { addListener }) => {
  const onAnimateListener = useRef()
  const onCloseListener = useRef()


  const handleAnimation = (value) => {
    console.log('Modal animatedValue:', value)
  }
  
  const handleClose = useCallback(
    closingAction => {
      console.log(`Modal by: ${closingAction.type} • ${closingAction.origin}`)
    },
  )

  useEffect(() => {
    onAnimateListener.current = addListener('onAnimate', handleAnimation)
    onCloseListener.current = addListener('onClose', handleClose)
    
    return () => {
      onAnimateListener.current?.remove()
      onCloseListener.current?.remove()
    }
  }, [])

  return (
    //...
  )
}

export default EmptyModal

onAnimate & onClose are the only events we support for now. If there is another one you'd like to have, please: !

🤓
> ModalComponentProp API
let us know