Modal prop

Every modal component you added in your modal stack (see createModalStack) receives the modal prop automatically:

  • this.props.modal

    • currentModal: name of the current displayed modal if there's one

    • openModal: open a specific modal

    • closeModal: close a modal

    • closeModals: close every instance of a given modal

    • closeAllModals: close all opened modals

    • addListener: subscribe to updates to modal lifecycle

    • removeAllListeners: remove all modal listeners

    • params: current modal's params

    • getParams: get current's modal params with fallback

Be aware that only components in you modal stack do receive this prop. If you're looking for how to access the modal prop from any component, head to withModal/useModal sections.

API reference

currentModal - Get the currently displayed modal's name

// type CurrentModal = ?ModalName
const { currentModal }  = this.props.modal

Returns the name of the current modal, null if none is currently displayed or if you're displaying several modals, the name of the one on top of the stack (currently shown to the user).

Note: The "name of the current modal" refers to the key you used for that specific modal in the modal configuration object you used in createModalStack.

openModal - Open a modal

// type OpenModal = (modalName: ModalName, params?: Object) => void
const { openModal } = this.props.modal

Use this to open any modal you've setup.

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

import { sendFakeMessage } from '@utils'

class Message extends React.Component {

  _sendMessage = () => {
    const { modal: { openModal } } = this.props
    sendFakeMessage()
      .then(() => openModal('MessageSent'))
      .catch(error => openModal('Error', { origin: 'message', error }))
  }

  // ...
}

export default Message

closeModal - close a modal

// type CloseModal = (modalName?: string) => void,
const { closeModal }  = this.props.modal

This function closes a modal. Depending on your modal stack configuration it will either: close the first modal in your stack or clear the whole stack (see createModalStack).

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

class ErrorModal extends React.Component {
  render() {
    const { closeModal } = this.props.modal
    return (
      <View>
        <Text>An error occured!</Text>
        <Button onPress={closeModal} title="OK" />
      </View>
    )
  }
}

export default ErrorModal

closeModals - close every instance of a given modal

// type CloseModals = ModalName => void
const { closeModals }  = this.props.modal

React Native Modalfy workflow allows you to use the same modal component several times. Moreover, it also let you call and display the same modal several times.

Let's say that for some reason you have to display several error modals to your user, if they perform the action needed to fix everything: you don't want them to have to close all the modals one by one. Similarly, it'd be nice if you didn't have to programmatically close all of them: that's what closeModals is here for.

You'll just have to pass as an argument the name of the modal you'd like to close and all its instances will be deleted.

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

class ErrorModal extends React.Component {

  _onErrorsFixed = () => {
    // Will close every opened modal named 'Error'
    this.props.modal.closeModals('Error')
  }
  
  // ...
}

export default ErrorModal

closeAllModals - close all opened modals

// type CloseAllModal = () => void,
const { closeAllModals }  = this.props.modal

This function will close every single opened modal, clearing the whole stack.

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

class ErrorModal extends React.Component {
  render() {
    const { closeAllModals } = this.props.modal
    return (
      <View>
        <Text>An error occured!</Text>
        <Button onPress={closeAllModals} title="OK" />
      </View>
    )
  }
}

export default ErrorModal

addListener - subscribe to updates to modal lifecycle

// type EventName = 'onAnimate'
// type EventCallback = (animatedValue?: AnimatedValue) => void
// type EventSubscription = { remove: () => boolean }

// type AddListener = (eventName: EventName, callback: EventCallback) => EventSubscription

const { addListener }  = this.props.modal

As the name suggest, addListener allows you to hook listeners to your current modal. For now, only onAnimate is supported as a valid EventName. If you need to perform any animation at the same time as your modal, this function is what you'll need.

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

class InfoModal extends React.Component {
  componentDidMount() {
    const { modal } = this.props
    this.modalListenerID = modal.addListener('onAnimate', this._handleAnimation)
  }

  componentWillUnmount() {
    if (this.modalListenerID) this.modalListenerID.remove()
  }

  // Will be called as soon as InfoModal is being animated
  _handleAnimation = animatedValue => {
    console.log(`✨ InfoModal animatedValue:`, animatedValue)
  }

  // ...
}

export default InfoModal

Note: addListener returns an EventSubscription object, in which you'll find a remove() method to use as soon as you'll no longer to listen to your modal updates.

If you're looking for a specific listener EventName that's not implemented yet: feel free to submit an issue on the repo

removeAllListeners - remove all modal listeners

// type RemoevAllListeners = () => void

const { removeAllListeners }  = this.props.modal

As seen in the previous section, addListener returns an object with a remove() function in it. However if you have a lot of listeners subscribed to the same modal component, calling listenerA.remove(), listernerB.remove(), listernerC.remove() isn't ideal. That's what removeAllListeners is here for: just call it once and all the modal listeners will be removed.

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

class InfoModal extends React.Component {
  componentDidMount() {
    this.props.modal.addListener('onAnimate', this._handleAnimation)
  }

  componentWillUnmount() {
    this.props.modal.removeAllListeners()
  }
  
   _handleAnimation = animatedValue => {
    console.log(`✨ InfoModal animatedValue:`, animatedValue)
  }

  // ...
}

export default InfoModal

params - current modal's params

// type Params = any
const { params }  = this.props.modal
import React from 'react'
import { Button, Text, View } from 'react-native'

class WelcomeBackModal extends React.Component {
  render() {
    const { closeModal, params } = this.props.modal
    return (
      <View>
        <Text>Welcome back {params.userName}!</Text>
        <Text>Just wanted to say hello =)</Text>
        <Button onPress={closeModal} title="Thanks!" />
      </View>
    )
  }
}

export default WelcomeBackModal

This is the other way to access a modal's params. Here you'll directly have access to the data you passed.

Note: If you're outside a modal component (aka you used withModal/useModal) you won't have any params key in this.props.modal.

getParams - get current modal's params with fallback

// type GetParams = fallback?: any => any
const { getParams }  = this.props.modal
import React from 'react'
import { Button, Text, View } from 'react-native'

class ErrorModal extends React.Component {
  render() {
    const { getParams } = this.props.modal
    
    // If modal.params.error isn't a thing,
    // it will fallback to { message: "An error occurred!" }
    const error = getParams({ message: "An error occurred!" })
    return (
      <View>
        <Text>{error.message}</Text>
      </View>
    )
  }
}

export default ErrorModal

Note: getParams is really useful when you're not sure if your params content will be there for any reason (coming from an API, output of an async function, etc).

PreviousAPINextModalProvider

Last updated