Simple opening and closing modals in react-native with no dependencies
Warning: project at beta-testing stage
- Simple opening and closing modals (no boilerplate code)
- Separate modal state management logic from components, that use modals
- Easily open the same modal from different components
- Use some default props for all modals
- Compatible with react-native modals and react-native-modal animated modals.
npm i react-native-modal-manager
MyModal.js
import * as React from 'react';
import modalManager from "react-native-modal-manager";
import { Modal, Text, Button } from "react-native";
const MyModal = ({ name, message, ...props }) => <Modal>
<Text>{message}</Text>
<Button
title="Close"
onPress={() => modalManager.close(name)}
/>
</Modal>
export const myModalName = "MyModal";
modalManager.push(myModalName, MyModal);MyButton.js
import * as React from 'react';
import { Button } from "react-native";
import modalManager from "react-native-modal-manager";
import { myModalName } from "./MyModal.js";
const MyButton = () => <Button
title="Open modal"
onPress={() => modalManager.open(
myModalName,
{
message: "Hello world!"
}
)}
/>App.js
import * as React from 'react';
import { View } from "react-native";
import { ModalContainer } from "react-native-modal-manager";
import MyButton from "./MyButton";
const App = () => <View>
<MyButton />
<ModalContainer />
</View>With react-native-modal
Add to your index.js
(Warning: if this option is enabled - modalManager will be incompatible with react-native modals)
modalManager.setup({
reactNativeModalCompatibleMode: true
});modalManager.setup({
props: {
// Your default props for all modals
}
});If strict mode enabled - some useful warnings will be shown.
For example: calling close method of ModalManager with name, that differs from currently running modal's name will produce warning.
modalManager.setup({
strict: true
});setup(options object) - change options of ModalManager. Can be called at any time.
push(name string, modal function | class) - register given component as modal with a name, which can be used in future for opening or closing this modal. Name must be unique in application scope.
open(name string, props object) - open modal, associated with given name. Given props will be passed to opened modal.
close(name string) - close modal, associated with given name.
getOption(option string) - return current ModalManager option value.
Pull requests, feedbacks and suggestions are welcome!
MIT