react-native-modal-handler
v0.0.5
Published
Modal handler in react native
Downloads
8
Maintainers
Readme
react-native-modal-handler
Modal Handler Library in react-native : No Mess, No State, No Duplicate.
react-native-modal-handler is a library which is based on eumji-modal-pattern.
HOW TO USE
1. npm install
$ npm install --save react-native-modal-handler
2. import withModal
import { withModal } from "react-native-modal-handler";
3. export withModal
If the name of your component is YourComponents.js
export default withModal(Yourcomponent);
If you are using another higher-order-component like the connect
function of redux
export default connect(..)(withModal(YourComponent));
4. Making Modal
I recommend to handle multiple modal components by making modals
directory.
src
components
modals
FirstModal.js
SecondModal.js
ThirdModal.js
Basically, Modal has the structure like below.
import Modal from "react-native-modal";
export default FirstModal = ({ isVisible, closeModal, ...otherProps }) => {
return (
<Modal isVisible={isVisible}>
<View style={styles.modal}>
<TouchableOpacity onPress={() => closeModal("firstModal")}>
<Text>Close Modal</Text>
</TouchableOpacity>
<View style={styles.main}>
<TouchableOpacity onPress={() => otherProps.sayHello()}>
<Text>FirstModal and sayHello</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
};
I used react-native-modal and recommend that you use this library too. Because react-native-modal
has many features based on pure Modal
in react-native and is very stable.
You can make Modal component regardless of that the component is stateless or statefull.
Since isVisible
and closeModal
props are automatically passed to your modal component, You should define those as props.
If you want to get other props in addition two props above, You can do it by using ...otherProps
.
5. Making modals
variable and Rendering Modal Components
react-native-modal-handler
adds showModal
and closeModal
props in your modal components by passing modals
variable that will be defined below to the inner of library.
So, You should define which modal you will use in YourComponent.js
.
// YourComponent.js
import FirstModal from "./modals/FirstModal";
import SecondModal from "./modals/SecondModal";
import ThirdModal from "./modals/ThirdModal";
const modals = {
firstModal: <FirstModal />,
SecondModal: <SecondModal />,
ThirdModal: <ThirdModal />
};
I recommend that you use modals
as the name of that variable for consistency.
The keys of the modals
variable are very important because they are used to open and close modal components.
To maintain uniformity, it is recommended that the names be created with the camelCase
technique of the name of the modal component.
Next, You will pass the modals
variable to withModal
as property.
this.props.renderModal(modals);
The following is a complete example of this part.
import FirstModal from "./modals/FirstModal";
import SecondModal from "./modals/SecondModal";
import ThirdModal from "./modals/ThirdModal";
render() {
const modals = {
firstModal: <FirstModal />,
SecondModal: <SecondModal />,
ThirdModal: <ThirdModal />
};
return (
this.props.renderModal(modals);
);
}
6. How to show and close modal
showModal
// want to show FirstModal.js in YourComponent.js
this.props.showModal("firstModal");
closeModal
// want to close FirstModal.js in YourComponents.js
this.props.closeModal("firstModal");
// want to close FirstModal.js in FirstModal.js
<TouchableOpacity onPress={() => closeModal("firstModal")}>
<Text>Close Modal</Text>
</TouchableOpacity>
7. Full Examples
Contributions
Pull Request and Issue are open at any time.
If you have ideas to improve react-native-modal-handler
, please do not hesitate to join us.