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

Was this helpful?

  1. API Reference

withModal

PrevioususeModalNextmodalfy

Last updated 9 months ago

Was this helpful?

HOC that provides the modal prop to a wrapped Class component. The modal prop injected bywithodal()is covered in .

Note: PreferHooks if you're using a functional component.

const withModal = <P extends ModalfyParams, Props extends object>(
  Component: React.ComponentClass<Props>,
) => {
  const { closeModal, closeModals, closeAllModals } = modalfy<P>()
  class WithModalComponent extends React.Component<ModalProp<P, Props>> {
    render() {
      return (
        <ModalContext.Consumer>
          {(context) => (
            <Component
              modal={{
                closeModal,
                closeModals,
                closeAllModals,
                openModal: context.openModal,
                currentModal: context.currentModal,
              }}
            />
          )}
        </ModalContext.Consumer>
      )
    }
  }

  return WithModalComponent
}

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 (
      <View>
        <Text>Welcome!</Text>
        <Button
          title="Edit"
          onPress={() => this.props.modal.openModal('EditProfile')}
        />
      </View>
    )
  }
}

export default withModal(ProfileScreen)

Using withModal() will give you access to:

  • this.props.modal

    • currentModal: name of the currently 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
useModal()
ModalProp
Logoreact-native-modalfy/withModal.tsx at main ยท colorfy-software/react-native-modalfyGitHub