React Native Modalfy


HOC that provides the modal prop to a wrapped Class component.
Note: Prefer useModal() Hooks if you're using a functional component.
The modal prop injected bywithodal()is covered in ModalProp.
const withModal = <P extends ModalfyParams, Props extends object>(
Component: React.ComponentClass<Props>,
) => {
class WithModalComponent extends React.Component<ModalProp<P, Props>> {
render() {
return (
{(context) => (
closeAllModals: context.closeAllModals,
currentModal: context.currentModal,
closeModals: context.closeModals,
closeModal: context.closeModal,
openModal: context.openModal,
return WithModalComponent
Types have been simplified for the sake of clarity. Refer to the exact definitions here.

API reference

import React, { Component } from 'react'
import { Button, Text } from 'react-native'
import { withModal } from 'react-native-modalfy'
class ProfileScreen extends Component {
render() {
return (
onPress={() => this.props.modal.openModal('EditProfile')}
export default withModal(ProfileScreen)
Using withModal will give you access to:
  • 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 open modals
as seen in ModalProp.