withModal
HOC that provides the
modal
prop to a wrapped Class component.TypeScript
const withModal = <P extends ModalfyParams, Props extends object>(
Component: React.ComponentClass<Props>,
) => {
class WithModalComponent extends React.Component<ModalProp<P, Props>> {
render() {
return (
<ModalContext.Consumer>
{(context) => (
<Component
modal={{
closeAllModals: context.closeAllModals,
currentModal: context.currentModal,
closeModals: context.closeModals,
closeModal: context.closeModal,
openModal: context.openModal,
}}
/>
)}
</ModalContext.Consumer>
)
}
}
return WithModalComponent
}
https://github.com/colorfy-software/react-native-modalfy/blob/master/lib/withModal.ts
github.com
Types have been simplified for the sake of clarity. Refer to the exact definitions here.
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 current displayed modal if there's oneopenModal
: open a specific modalcloseModal
: close a modalcloseModals
: close every instance of a given modalcloseAllModals
: close all open modals
Last modified 2yr ago