{"id":17700958,"url":"https://github.com/wrathchaos/react-native-global-modal-2","last_synced_at":"2025-05-13T04:52:52.862Z","repository":{"id":64208207,"uuid":"573854718","full_name":"WrathChaos/react-native-global-modal-2","owner":"WrathChaos","description":"✨ Global Modal Accessible from Anywhere in Your App 🎯 ","archived":false,"fork":false,"pushed_at":"2025-04-09T12:47:53.000Z","size":7285,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-13T04:52:41.797Z","etag":null,"topics":["android","app","app-development","apple","application","development","front-end","global","global-modal","ios","modal","programming","react-native","reactjs","ui"],"latest_commit_sha":null,"homepage":"https://freakycoder.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WrathChaos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-12-03T16:40:12.000Z","updated_at":"2025-04-09T12:50:23.000Z","dependencies_parsed_at":"2025-04-21T12:31:48.632Z","dependency_job_id":null,"html_url":"https://github.com/WrathChaos/react-native-global-modal-2","commit_stats":null,"previous_names":["wrathchaos/react-native-animated-modal"],"tags_count":6,"template":false,"template_full_name":"WrathChaos/react-native-typescript-library-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-global-modal-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-global-modal-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-global-modal-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-global-modal-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-global-modal-2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253877492,"owners_count":21977642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","app","app-development","apple","application","development","front-end","global","global-modal","ios","modal","programming","react-native","reactjs","ui"],"created_at":"2024-10-24T17:43:44.166Z","updated_at":"2025-05-13T04:52:52.840Z","avatar_url":"https://github.com/WrathChaos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Global Modal\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n[![React Native Global Modal](https://img.shields.io/badge/-%F0%9F%8C%8D%20Global%20modal%20and%20callable%20from%20anywhere%20on%20the%20app%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-global-modal-2)\n\n[![npm version](https://img.shields.io/npm/v/react-native-global-modal-2.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-global-modal-2)\n[![npm](https://img.shields.io/npm/dt/react-native-global-modal-2.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-global-modal-2)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React Native Global Modal Demo\" src=\"assets/for-docs/react-native-global-modal-2.gif\" width=\"360\"/\u003e\n\u003c/p\u003e\n\n# Features\n\n✨ Global Modal Accessible from Anywhere in Your App\n🎯 Three Modal Types Out of the Box:\n  - Simple Modal\n  - Styled Modal with Animations\n  - Full Screen Modal\n🎨 Fully Customizable Styling\n🔄 Smooth Animations\n📱 iOS and Android Support\n\n# Installation\n\nAdd the dependency:\n\n```bash\nnpm i react-native-global-modal-2\n```\n\n## Peer Dependencies\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n```json\n\"react-native-modal\": \"^13.0.1\"\n```\n\u003c/details\u003e\n\n# Usage\n\n## Import\n\n```jsx\nimport GlobalModal, { ModalController } from \"react-native-global-modal-2\"\n```\n\n## Basic Setup\n\nFirst, import the necessary components:\n\n```jsx\nimport GlobalModal, { ModalController } from \"react-native-global-modal-2\"\n```\n\nAdd the `GlobalModal` component to your app's root:\n\n```jsx\n// App.tsx or your root component\nimport React, { useRef } from 'react';\nimport { NavigationContainer } from '@react-navigation/native';\nimport GlobalModal, { ModalController, GlobalModalRef } from \"react-native-global-modal-2\";\n\nconst App = () =\u003e {\n  const modalRef = useRef\u003cGlobalModalRef\u003e(null);\n\n  React.useEffect(() =\u003e {\n    if (modalRef.current) {\n      ModalController.setModalRef(modalRef);\n    }\n  }, []);\n\n  return (\n    \u003cNavigationContainer\u003e\n      \u003cMainStack /\u003e\n      \u003cGlobalModal\n        ref={modalRef}\n        animationIn=\"fadeIn\"\n        animationOut=\"fadeOut\"\n        onBackdropPress={ModalController.hide}\n      /\u003e\n    \u003c/NavigationContainer\u003e\n  );\n};\n```\n\n## Modal Types and Examples\n\n### 1. Simple Modal\n\nBasic modal with minimal styling:\n\n```jsx\nimport { ModalController } from \"react-native-global-modal-2\";\n\nconst showSimpleModal = () =\u003e {\n  ModalController.show({\n    content: (\n      \u003cView style={styles.modalContent}\u003e\n        \u003cText style={styles.title}\u003eSimple Modal\u003c/Text\u003e\n        \u003cText style={styles.text}\u003eThis is a simple modal example\u003c/Text\u003e\n        \u003cButton title=\"Close\" onPress={() =\u003e ModalController.hide()} /\u003e\n      \u003c/View\u003e\n    ),\n  });\n};\n\nconst styles = StyleSheet.create({\n  modalContent: {\n    backgroundColor: '#fff',\n    padding: 20,\n    borderRadius: 8,\n    alignItems: 'center',\n  },\n  title: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    marginBottom: 10,\n  },\n  text: {\n    marginBottom: 20,\n    textAlign: 'center',\n  },\n});\n```\n\n### 2. Styled Modal\n\nModal with custom styling and animations:\n\n```jsx\nconst showStyledModal = () =\u003e {\n  ModalController.show({\n    content: (\n      \u003cView style={styles.styledContent}\u003e\n        \u003cText style={styles.styledTitle}\u003eStyled Modal\u003c/Text\u003e\n        \u003cText style={styles.styledText}\u003e\n          Custom styled modal with beautiful design\n        \u003c/Text\u003e\n        \u003cTouchableOpacity\n          style={styles.closeButton}\n          onPress={() =\u003e ModalController.hide()}\u003e\n          \u003cText style={styles.buttonText}\u003eClose\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    ),\n  });\n};\n\nconst styles = StyleSheet.create({\n  styledContent: {\n    backgroundColor: '#4A90E2',\n    padding: 30,\n    borderRadius: 20,\n    alignItems: 'center',\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  styledTitle: {\n    color: '#fff',\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 16,\n  },\n  styledText: {\n    color: '#fff',\n    marginBottom: 24,\n    textAlign: 'center',\n  },\n  closeButton: {\n    backgroundColor: '#fff',\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n    borderRadius: 8,\n  },\n  buttonText: {\n    color: '#4A90E2',\n    fontWeight: '600',\n  },\n});\n```\n\n### 3. Full Screen Modal\n\nModal that covers the entire screen:\n\n```jsx\nconst showFullScreenModal = () =\u003e {\n  ModalController.show({\n    content: (\n      \u003cView style={styles.fullScreenContent}\u003e\n        \u003cText style={styles.fullScreenTitle}\u003eFull Screen Modal\u003c/Text\u003e\n        \u003cText style={styles.fullScreenText}\u003e\n          This modal takes up the entire screen\n        \u003c/Text\u003e\n        \u003cTouchableOpacity\n          style={styles.fullScreenButton}\n          onPress={() =\u003e ModalController.hide()}\u003e\n          \u003cText style={styles.fullScreenButtonText}\u003eClose\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    ),\n    isFullScreen: true,\n    containerStyle: {\n      backgroundColor: '#fff',\n    },\n  });\n};\n\nconst styles = StyleSheet.create({\n  fullScreenContent: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n  },\n  fullScreenTitle: {\n    fontSize: 28,\n    fontWeight: 'bold',\n    marginBottom: 16,\n  },\n  fullScreenText: {\n    fontSize: 18,\n    marginBottom: 24,\n    textAlign: 'center',\n  },\n  fullScreenButton: {\n    backgroundColor: '#102B43',\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n    borderRadius: 8,\n  },\n  fullScreenButtonText: {\n    color: '#fff',\n    fontSize: 16,\n    fontWeight: '600',\n  },\n});\n```\n\n## Advanced Usage\n\n### Custom Animations\n\nYou can customize the modal animations using any animation type from `react-native-modal`:\n\n```jsx\n\u003cGlobalModal\n  animationIn=\"slideInUp\"  // or fadeIn, bounceIn, etc.\n  animationOut=\"slideOutDown\"  // or fadeOut, bounceOut, etc.\n  animationInTiming={500}  // animation duration in ms\n  animationOutTiming={500}\n  backdropTransitionInTiming={500}\n  backdropTransitionOutTiming={500}\n/\u003e\n```\n\n### Modal with Form\n\nExample of a modal containing a form:\n\n```jsx\nconst showFormModal = () =\u003e {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n\n  const handleSubmit = () =\u003e {\n    // Handle form submission\n    console.log({ name, email });\n    ModalController.hide();\n  };\n\n  ModalController.show({\n    content: (\n      \u003cView style={styles.formContent}\u003e\n        \u003cText style={styles.formTitle}\u003eContact Form\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          value={name}\n          onChangeText={setName}\n          placeholder=\"Enter your name\"\n        /\u003e\n        \u003cTextInput\n          style={styles.input}\n          value={email}\n          onChangeText={setEmail}\n          placeholder=\"Enter your email\"\n          keyboardType=\"email-address\"\n        /\u003e\n        \u003cTouchableOpacity\n          style={styles.submitButton}\n          onPress={handleSubmit}\u003e\n          \u003cText style={styles.submitText}\u003eSubmit\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    ),\n  });\n};\n```\n\n### Modal with Loading State\n\nExample of a loading modal:\n\n```jsx\nconst showLoadingModal = () =\u003e {\n  ModalController.show({\n    content: (\n      \u003cView style={styles.loadingContent}\u003e\n        \u003cActivityIndicator size=\"large\" color=\"#4A90E2\" /\u003e\n        \u003cText style={styles.loadingText}\u003eLoading...\u003c/Text\u003e\n      \u003c/View\u003e\n    ),\n  });\n\n  // Hide the modal after some async operation\n  setTimeout(() =\u003e {\n    ModalController.hide();\n  }, 2000);\n};\n```\n\n### Handling Modal Lifecycle\n\nYou can use the `onShow` and `onHide` callbacks:\n\n```jsx\nModalController.show({\n  content: \u003cYourModalContent /\u003e,\n  onShow: () =\u003e {\n    console.log('Modal shown');\n    // Perform actions when modal is shown\n  },\n  onHide: () =\u003e {\n    console.log('Modal hidden');\n    // Clean up or perform actions when modal is hidden\n  },\n});\n```\n\n## Best Practices\n\n1. **Modal Reference**: Always set up the modal reference in your root component to ensure it's accessible throughout your app.\n\n2. **Error Handling**: Handle cases where the modal reference might not be set:\n```jsx\nconst showModal = () =\u003e {\n  try {\n    ModalController.show({\n      content: \u003cYourContent /\u003e,\n    });\n  } catch (error) {\n    console.warn('Failed to show modal:', error);\n  }\n};\n```\n\n3. **Styling**: Keep modal styles consistent throughout your app by defining a common style theme:\n```jsx\nconst modalStyles = {\n  content: {\n    backgroundColor: '#fff',\n    borderRadius: 12,\n    padding: 20,\n  },\n  title: {\n    fontSize: 20,\n    fontWeight: 'bold',\n  },\n  // ... other common styles\n};\n```\n\n4. **Performance**: For modals with complex content, consider using `useMemo` or `useCallback`:\n```jsx\nconst ModalContent = React.memo(() =\u003e {\n  const handlePress = useCallback(() =\u003e {\n    // Handle press\n  }, []);\n\n  return (\n    \u003cView\u003e\n      \u003cText\u003eComplex Modal Content\u003c/Text\u003e\n      \u003cButton onPress={handlePress} title=\"Action\" /\u003e\n    \u003c/View\u003e\n  );\n});\n```\n\n## Configuration\n\n### GlobalModal Props\n\n| Property      | Type       | Description                                     |\n|--------------|:----------:|-------------------------------------------------|\n| defaultStyle | ViewStyle  | Default style for the modal container           |\n| animationIn  | string    | Entry animation type (e.g., \"fadeIn\", \"slideInDown\") |\n| animationOut | string    | Exit animation type (e.g., \"fadeOut\", \"slideOutUp\") |\n| ...rest      | ModalProps | Any prop from react-native-modal                |\n\n### ModalData Props\n\n| Property       | Type       | Description                                     |\n|---------------|:----------:|-------------------------------------------------|\n| content       | ReactNode  | Modal content to display                        |\n| isFullScreen  | boolean   | Whether to show as full screen modal            |\n| containerStyle| ViewStyle | Style for the modal container                   |\n| onShow        | function  | Callback when modal is shown                    |\n| onHide        | function  | Callback when modal is hidden                   |\n\n## Styling Examples\n\n### Simple Modal\n```jsx\nconst styles = StyleSheet.create({\n  modalContent: {\n    backgroundColor: '#fff',\n    borderRadius: 16,\n    padding: 24,\n    alignItems: 'center',\n  },\n});\n```\n\n### Styled Modal\n```jsx\nconst styles = StyleSheet.create({\n  styledContent: {\n    backgroundColor: '#4A90E2',\n    borderRadius: 20,\n    padding: 30,\n    alignItems: 'center',\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n});\n```\n\n### Full Screen Modal\n```jsx\nconst styles = StyleSheet.create({\n  content: {\n    flex: 1,\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n```\n\n## Example Project\n\nTo run the example project:\n\n1. Clone the repository\n2. Navigate to the example directory\n3. Run:\n```bash\nnpm install\nnpx pod-install  # for iOS\nnpm run ios/android\n```\n\n## Future Plans\n\n- [x] ~~LICENSE~~\n- [x] ~~Custom Layout Feature~~\n- [x] Full Screen Modal Support\n- [ ] More built-in modal types\n  - [ ] Alert Modal\n  - [ ] Action Sheet Modal\n  - [ ] Bottom Sheet Modal\n- [ ] Gesture Controls\n- [ ] Accessibility Improvements\n- [ ] More Examples and Documentation\n\n## Credits \n\n- Design inspiration: [Patrick Marx](https://dribbble.com/shots/10762430/attachments/2430949?mode=media)\n- Original concept: [Roycechua's global modal example](https://github.com/roycechua/rn-global-modal-control-example)\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Global Modal is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-global-modal-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-global-modal-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-global-modal-2/lists"}