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 oneopenModal
: open a specific modalcloseModal
: close a modalcloseModals
: close every instance of a given modalcloseAllModals
: close all opened modalsaddListener
: subscribe to updates to modal lifecycleremoveAllListeners
: remove all modal listenersparams
: current modal's paramsgetParams
: 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
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).
openModal
- Open a modal
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
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
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
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
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.
removeAllListeners
- remove all modal listeners
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
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
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
Last updated
Was this helpful?