https://github.com/wrathchaos/react-native-global-modal-2
✨ Global Modal Accessible from Anywhere in Your App 🎯
https://github.com/wrathchaos/react-native-global-modal-2
android app app-development apple application development front-end global global-modal ios modal programming react-native reactjs ui
Last synced: about 1 month ago
JSON representation
✨ Global Modal Accessible from Anywhere in Your App 🎯
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-global-modal-2
- Owner: WrathChaos
- License: mit
- Created: 2022-12-03T16:40:12.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T12:47:53.000Z (2 months ago)
- Last Synced: 2025-05-13T04:52:41.797Z (about 1 month ago)
- Topics: android, app, app-development, apple, application, development, front-end, global, global-modal, ios, modal, programming, react-native, reactjs, ui
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 6.95 MB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-global-modal-2)
[](https://www.npmjs.com/package/react-native-global-modal-2)
[](https://www.npmjs.com/package/react-native-global-modal-2)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Features
✨ Global Modal Accessible from Anywhere in Your App
🎯 Three Modal Types Out of the Box:
- Simple Modal
- Styled Modal with Animations
- Full Screen Modal
🎨 Fully Customizable Styling
🔄 Smooth Animations
📱 iOS and Android Support
# Installation
Add the dependency:
```bash
npm i react-native-global-modal-2
```
## Peer Dependencies
Click to expand
```json
"react-native-modal": "^13.0.1"
```
# Usage
## Import
```jsx
import GlobalModal, { ModalController } from "react-native-global-modal-2"
```
## Basic Setup
First, import the necessary components:
```jsx
import GlobalModal, { ModalController } from "react-native-global-modal-2"
```
Add the `GlobalModal` component to your app's root:
```jsx
// App.tsx or your root component
import React, { useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import GlobalModal, { ModalController, GlobalModalRef } from "react-native-global-modal-2";
const App = () => {
const modalRef = useRef(null);
React.useEffect(() => {
if (modalRef.current) {
ModalController.setModalRef(modalRef);
}
}, []);
return (
);
};
```
## Modal Types and Examples
### 1. Simple Modal
Basic modal with minimal styling:
```jsx
import { ModalController } from "react-native-global-modal-2";
const showSimpleModal = () => {
ModalController.show({
content: (
Simple Modal
This is a simple modal example
ModalController.hide()} />
),
});
};
const styles = StyleSheet.create({
modalContent: {
backgroundColor: '#fff',
padding: 20,
borderRadius: 8,
alignItems: 'center',
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
},
text: {
marginBottom: 20,
textAlign: 'center',
},
});
```
### 2. Styled Modal
Modal with custom styling and animations:
```jsx
const showStyledModal = () => {
ModalController.show({
content: (
Styled Modal
Custom styled modal with beautiful design
ModalController.hide()}>
Close
),
});
};
const styles = StyleSheet.create({
styledContent: {
backgroundColor: '#4A90E2',
padding: 30,
borderRadius: 20,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
styledTitle: {
color: '#fff',
fontSize: 24,
fontWeight: 'bold',
marginBottom: 16,
},
styledText: {
color: '#fff',
marginBottom: 24,
textAlign: 'center',
},
closeButton: {
backgroundColor: '#fff',
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 8,
},
buttonText: {
color: '#4A90E2',
fontWeight: '600',
},
});
```
### 3. Full Screen Modal
Modal that covers the entire screen:
```jsx
const showFullScreenModal = () => {
ModalController.show({
content: (
Full Screen Modal
This modal takes up the entire screen
ModalController.hide()}>
Close
),
isFullScreen: true,
containerStyle: {
backgroundColor: '#fff',
},
});
};
const styles = StyleSheet.create({
fullScreenContent: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
fullScreenTitle: {
fontSize: 28,
fontWeight: 'bold',
marginBottom: 16,
},
fullScreenText: {
fontSize: 18,
marginBottom: 24,
textAlign: 'center',
},
fullScreenButton: {
backgroundColor: '#102B43',
paddingHorizontal: 24,
paddingVertical: 12,
borderRadius: 8,
},
fullScreenButtonText: {
color: '#fff',
fontSize: 16,
fontWeight: '600',
},
});
```
## Advanced Usage
### Custom Animations
You can customize the modal animations using any animation type from `react-native-modal`:
```jsx
```
### Modal with Form
Example of a modal containing a form:
```jsx
const showFormModal = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = () => {
// Handle form submission
console.log({ name, email });
ModalController.hide();
};
ModalController.show({
content: (
Contact Form
Submit
),
});
};
```
### Modal with Loading State
Example of a loading modal:
```jsx
const showLoadingModal = () => {
ModalController.show({
content: (
Loading...
),
});
// Hide the modal after some async operation
setTimeout(() => {
ModalController.hide();
}, 2000);
};
```
### Handling Modal Lifecycle
You can use the `onShow` and `onHide` callbacks:
```jsx
ModalController.show({
content: ,
onShow: () => {
console.log('Modal shown');
// Perform actions when modal is shown
},
onHide: () => {
console.log('Modal hidden');
// Clean up or perform actions when modal is hidden
},
});
```
## Best Practices
1. **Modal Reference**: Always set up the modal reference in your root component to ensure it's accessible throughout your app.
2. **Error Handling**: Handle cases where the modal reference might not be set:
```jsx
const showModal = () => {
try {
ModalController.show({
content: ,
});
} catch (error) {
console.warn('Failed to show modal:', error);
}
};
```
3. **Styling**: Keep modal styles consistent throughout your app by defining a common style theme:
```jsx
const modalStyles = {
content: {
backgroundColor: '#fff',
borderRadius: 12,
padding: 20,
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
// ... other common styles
};
```
4. **Performance**: For modals with complex content, consider using `useMemo` or `useCallback`:
```jsx
const ModalContent = React.memo(() => {
const handlePress = useCallback(() => {
// Handle press
}, []);
return (
Complex Modal Content
);
});
```
## Configuration
### GlobalModal Props
| Property | Type | Description |
|--------------|:----------:|-------------------------------------------------|
| defaultStyle | ViewStyle | Default style for the modal container |
| animationIn | string | Entry animation type (e.g., "fadeIn", "slideInDown") |
| animationOut | string | Exit animation type (e.g., "fadeOut", "slideOutUp") |
| ...rest | ModalProps | Any prop from react-native-modal |
### ModalData Props
| Property | Type | Description |
|---------------|:----------:|-------------------------------------------------|
| content | ReactNode | Modal content to display |
| isFullScreen | boolean | Whether to show as full screen modal |
| containerStyle| ViewStyle | Style for the modal container |
| onShow | function | Callback when modal is shown |
| onHide | function | Callback when modal is hidden |
## Styling Examples
### Simple Modal
```jsx
const styles = StyleSheet.create({
modalContent: {
backgroundColor: '#fff',
borderRadius: 16,
padding: 24,
alignItems: 'center',
},
});
```
### Styled Modal
```jsx
const styles = StyleSheet.create({
styledContent: {
backgroundColor: '#4A90E2',
borderRadius: 20,
padding: 30,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
});
```
### Full Screen Modal
```jsx
const styles = StyleSheet.create({
content: {
flex: 1,
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
});
```
## Example Project
To run the example project:
1. Clone the repository
2. Navigate to the example directory
3. Run:
```bash
npm install
npx pod-install # for iOS
npm run ios/android
```
## Future Plans
- [x] ~~LICENSE~~
- [x] ~~Custom Layout Feature~~
- [x] Full Screen Modal Support
- [ ] More built-in modal types
- [ ] Alert Modal
- [ ] Action Sheet Modal
- [ ] Bottom Sheet Modal
- [ ] Gesture Controls
- [ ] Accessibility Improvements
- [ ] More Examples and Documentation
## Credits
- Design inspiration: [Patrick Marx](https://dribbble.com/shots/10762430/attachments/2430949?mode=media)
- Original concept: [Roycechua's global modal example](https://github.com/roycechua/rn-global-modal-control-example)
## Author
FreakyCoder, [email protected]
## License
React Native Global Modal is available under the MIT license. See the LICENSE file for more info.