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. From a regular component
  • 2. From a modal component
  • 3. From vanilla JavaScript

Was this helpful?

  1. Guides

Opening & closing

PreviousCreating a stackNextPassing params

Last updated 8 months ago

Was this helpful?

As soon as our modal stack is set up, we can start using it from wherever we want in the code. Since Modal v2, we 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 vanilla JavaScript, outside React

If you want to execute some code right after calling an initial /(ie: opening/closing another modal? making API calls? etc) or any other Modalfy methds, you can use Modalfy's callback API to that effect. Please refer to our guide.

1. From a regular component

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 Hooks (or 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 API reference), we'll have access to the function:

./components/Message.js
import React from 'react'
import { useModal } from 'react-native-modalfy'
import { Button, Text, View } from 'react-native'

const Message = () => {
  const { openModal } = useModal()

  const sendMessage = () => openModal('MessageSentModal'))

  return (
    <View>
      <Text>Just press send!</Text>
      <Button onPress={sendMessage} title="Send" />
    </View>
  )
}

export default Message

2. From a modal component

./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 this:

./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.

3. From vanilla JavaScript

Since Modalfy v2, we can 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.

Have a look at API reference to have a complete overview of what does modalbrings with it. The most important thing to notice is that regular components () and modal components () do not have access to the same things inside modal.

Each component we put inside the modalConfig object we passed to will receive the modal prop. That's why we access it directly from the props, without the need of the Hooks/HOC:

If you want to learn more about this, head over to the guide.

🤓
ModalProp
ModalProp
ModalComponentProp
> ModalComponentProp API
createModalStack()
Using outside of React
Triggering a callback
> ModalProp API
useModal()
withModal()
ModalProp
openModal()
closeModal()
openModal()