Opening & closing
As soon as our modal stack is set up, we can start using it from wherever we want in the code. With Modal v2, we now have 3 different ways to do so, depending on the situation:
1. If we're inside a regular component
2. If we're inside a modal component specifically
3. Or if we're just in plain JavaScript, outside React
This use case could be the most frequent: we're in a regular component, could be a screen in our app for instance and we want to open a modal from there. To do so, we'll use the useModal() Hooks (or withModal() HOC if we're dealing with a Class component) to access the
modal prop we saw in the previous section.From there, amongst other things we'll cover later (if you can't wait, check out ModalProp API reference), we'll have access to the
openModal() function:React JSX
./components/Message.js
import React from 'react'
import { Button, Text, View } from 'react-native'
import { useModal } from 'react-native-modalfy'
const Message = () => {
const { openModal, closeModal } = useModal()
const sendMessage = () => openModal('MessageSentModal'))
return (
<View>
<Text>Just press send!</Text>
<Button onPress={sendMessage} title="Send" />
</View>
)
}
export default Message
Have a look at ModalProp API reference to have a complete overview of what does
modal brings with it. The most important thing to notice is that regular components (ModalProp) and modal components (ModalComponentProp) do not have access to the same things inside modal.Each component we put inside the
modalConfig object we passed to createModalStack() will receive the modal prop. That's why we access it directly from the props, without the need of the Hooks/HOC:React JSX
./modals/MessageSentModal.js
import React from 'react'
import { Button, Text, View } from 'react-native'
const MessageSentModal = ({ modal: { closeModal }}) => (
<View>
<Text>Your message was sent!</Text>
<Button onPress={closeModal} title="OK" />
</View>
)
export default MessageSentModal
You'll notice that to open a modal, Modalfy uses the keys we put inside
modalConfig. So if the config looks like:React JSX
./App.js
import { ErrorModal, MessageSentModal } from './components/Modals'
const modalConfig = {
NoConnection: ErrorModal,
APITimeout: ErrorModal,
TokenExpired: ErrorModal,
MessageSentModal,
}
We can call
openModal('NoConnection'), openModal('MessageSentModal'), etc.Modalfy v2 now allows us to interact with the modal stack from outside React. Possible use cases for this could be opening/closing modals from API calls or when there is a specific change in the global state, etc.
Last modified 2yr ago