{"id":26139780,"url":"https://github.com/wrathchaos/react-native-modal-2","last_synced_at":"2025-12-31T00:50:03.487Z","repository":{"id":281691104,"uuid":"945987748","full_name":"WrathChaos/react-native-modal-2","owner":"WrathChaos","description":"A powerful, customizable modal library for React Native with smooth animations, touchable backdrop, and comprehensive TypeScript support.","archived":false,"fork":false,"pushed_at":"2025-03-10T17:24:49.000Z","size":536,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T17:29:29.183Z","etag":null,"topics":["android","apple","expo","google","ios","modal","react-native","react-native-modal","react-native-modal-2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WrathChaos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2025-03-10T12:45:04.000Z","updated_at":"2025-03-10T17:24:29.000Z","dependencies_parsed_at":"2025-03-10T17:40:07.899Z","dependency_job_id":null,"html_url":"https://github.com/WrathChaos/react-native-modal-2","commit_stats":null,"previous_names":["wrathchaos/react-native-modal-2"],"tags_count":2,"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-modal-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-modal-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-modal-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-modal-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-modal-2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242960563,"owners_count":20213178,"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","apple","expo","google","ios","modal","react-native","react-native-modal","react-native-modal-2"],"created_at":"2025-03-11T02:36:55.685Z","updated_at":"2025-12-07T12:01:57.569Z","avatar_url":"https://github.com/WrathChaos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Modal 2\n\nA powerful, customizable modal library for React Native with smooth animations, touchable backdrop, and comprehensive TypeScript support.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/react-native-modal-2.svg\" /\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dt/react-native-modal-2.svg\" /\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/WrathChaos/react-native-modal-2\" /\u003e\n\u003c/p\u003e\n\n## Features\n\n- 🎨 Fully customizable UI with flexible styling options\n- 🔄 Multiple animation types (fade, slide, bounce, zoom)\n- 🧭 Directional animations (up, down, left, right)\n- 🎯 Touchable backdrop to close modal\n- 📱 Works seamlessly on both iOS and Android\n- 🔧 Comprehensive TypeScript support\n- 🪝 Includes useModal hook for easy state management\n- ⚡ Optimized performance with native driver animations\n- 🧩 Simple API with sensible defaults\n- 🔍 Zero default styling for content - complete freedom to design your modal\n- 🔌 Full prop drilling support for the underlying React Native Modal\n\n## Installation\n\n```bash\n# npm\nnpm install react-native-modal-2\n\n# yarn\nyarn add react-native-modal-2\n\n# pnpm\npnpm add react-native-modal-2\n```\n\n## Quick Start\n\n### Basic Modal\n\n`useModal` hook is not a must it is just an easier way to control the modal totally optional.\n\n```jsx\nimport React from \"react\";\nimport { View, Text, Button, StyleSheet } from \"react-native\";\nimport { Modal, useModal } from \"react-native-modal-2\";\n\nconst App = () =\u003e {\n  const { visible, showModal, hideModal } = useModal();\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cButton title=\"Show Basic Modal\" onPress={showModal} /\u003e\n\n      \u003cModal visible={visible} onBackdropPress={hideModal} animationType=\"fade\"\u003e\n        \u003cView style={styles.modalContent}\u003e\n          \u003cText style={styles.title}\u003eHello!\u003c/Text\u003e\n          \u003cText style={styles.description}\u003e\n            This is a basic modal with a fade animation.\n          \u003c/Text\u003e\n          \u003cButton title=\"Close\" onPress={hideModal} /\u003e\n        \u003c/View\u003e\n      \u003c/Modal\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: 20,\n  },\n  modalContent: {\n    backgroundColor: \"white\",\n    padding: 20,\n    borderRadius: 10,\n    maxWidth: \"80%\",\n    shadowColor: \"#000\",\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  title: {\n    fontSize: 18,\n    fontWeight: \"bold\",\n    marginBottom: 10,\n  },\n  description: {\n    marginBottom: 20,\n  },\n});\n\nexport default App;\n```\n\n### Animated Modal with Advanced Animations\n\n```jsx\nimport React, { useState } from \"react\";\nimport { View, Text, Button, StyleSheet } from \"react-native\";\nimport { AnimatedModal } from \"react-native-modal-2\";\n\nconst App = () =\u003e {\n  const [slideModalVisible, setSlideModalVisible] = useState(false);\n  const [bounceModalVisible, setBounceModalVisible] = useState(false);\n  const [zoomModalVisible, setZoomModalVisible] = useState(false);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cButton\n        title=\"Slide Up Modal\"\n        onPress={() =\u003e setSlideModalVisible(true)}\n        style={styles.button}\n      /\u003e\n\n      \u003cButton\n        title=\"Bounce Modal\"\n        onPress={() =\u003e setBounceModalVisible(true)}\n        style={styles.button}\n      /\u003e\n\n      \u003cButton\n        title=\"Zoom Modal\"\n        onPress={() =\u003e setZoomModalVisible(true)}\n        style={styles.button}\n      /\u003e\n\n      {/* Slide Modal */}\n      \u003cAnimatedModal\n        visible={slideModalVisible}\n        onBackdropPress={() =\u003e setSlideModalVisible(false)}\n        animationIn=\"slide\"\n        animationDirection=\"up\"\n        backdropOpacity={0.7}\n        contentContainerStyle={styles.modalContent}\n      \u003e\n        \u003cText style={styles.title}\u003eSlide Up Modal\u003c/Text\u003e\n        \u003cText style={styles.description}\u003e\n          This modal slides up from the bottom of the screen.\n        \u003c/Text\u003e\n        \u003cButton title=\"Close\" onPress={() =\u003e setSlideModalVisible(false)} /\u003e\n      \u003c/AnimatedModal\u003e\n\n      {/* Bounce Modal */}\n      \u003cAnimatedModal\n        visible={bounceModalVisible}\n        onBackdropPress={() =\u003e setBounceModalVisible(false)}\n        animationIn=\"bounce\"\n        animationDirection=\"down\"\n        backdropColor=\"#2c3e50\"\n        contentContainerStyle={styles.modalContent}\n      \u003e\n        \u003cText style={styles.title}\u003eBounce Modal\u003c/Text\u003e\n        \u003cText style={styles.description}\u003e\n          This modal bounces in from the top with a custom backdrop color.\n        \u003c/Text\u003e\n        \u003cButton title=\"Close\" onPress={() =\u003e setBounceModalVisible(false)} /\u003e\n      \u003c/AnimatedModal\u003e\n\n      {/* Zoom Modal */}\n      \u003cAnimatedModal\n        visible={zoomModalVisible}\n        onBackdropPress={() =\u003e setZoomModalVisible(false)}\n        animationIn=\"zoom\"\n        animationOut=\"zoom\"\n        animationDuration={400}\n        contentContainerStyle={styles.modalContent}\n      \u003e\n        \u003cText style={styles.title}\u003eZoom Modal\u003c/Text\u003e\n        \u003cText style={styles.description}\u003e\n          This modal zooms in and out with a custom animation duration.\n        \u003c/Text\u003e\n        \u003cButton title=\"Close\" onPress={() =\u003e setZoomModalVisible(false)} /\u003e\n      \u003c/AnimatedModal\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: 20,\n  },\n  button: {\n    marginVertical: 10,\n  },\n  modalContent: {\n    backgroundColor: \"white\",\n    padding: 20,\n    borderRadius: 10,\n    maxWidth: \"80%\",\n    shadowColor: \"#000\",\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  title: {\n    fontSize: 18,\n    fontWeight: \"bold\",\n    marginBottom: 10,\n  },\n  description: {\n    marginBottom: 20,\n  },\n});\n\nexport default App;\n```\n\n## API Reference\n\n### Modal Component\n\nThe `Modal` component provides a simple modal with basic animation options.\n\n#### Props\n\n| Prop                  | Type                        | Default  | Description                                          |\n| --------------------- | --------------------------- | -------- | ---------------------------------------------------- |\n| visible               | boolean                     | required | Controls the visibility of the modal                 |\n| onBackdropPress       | function                    | required | Callback when backdrop is pressed or modal is closed |\n| children              | ReactNode                   | required | Content to render inside the modal                   |\n| animationType         | 'none' \\| 'slide' \\| 'fade' | 'fade'   | Type of animation for the modal                      |\n| backdropOpacity       | number                      | 0.5      | Opacity of the backdrop                              |\n| backdropColor         | string                      | '#000'   | Color of the backdrop                                |\n| contentContainerStyle | ViewStyle                   | {}       | Style for the content container                      |\n| style                 | ViewStyle                   | {}       | Style for the modal container                        |\n| closeOnBackdropPress  | boolean                     | true     | Whether to close the modal when backdrop is pressed  |\n| animationDuration     | number                      | 300      | Duration of the animation in milliseconds            |\n| statusBarTranslucent  | boolean                     | true     | Whether the modal should appear under the status bar |\n| ...otherProps         | RNModalProps                | -        | Any other props from React Native's Modal component  |\n\n### AnimatedModal Component\n\nThe `AnimatedModal` component extends the basic Modal with more advanced animation options.\n\n#### Props\n\nIncludes all props from the Modal component, plus:\n\n| Prop               | Type                                    | Default             | Description                                         |\n| ------------------ | --------------------------------------- | ------------------- | --------------------------------------------------- |\n| animationIn        | 'fade' \\| 'slide' \\| 'bounce' \\| 'zoom' | 'fade'              | Type of entrance animation                          |\n| animationOut       | 'fade' \\| 'slide' \\| 'bounce' \\| 'zoom' | same as animationIn | Type of exit animation                              |\n| animationDirection | 'up' \\| 'down' \\| 'left' \\| 'right'     | 'up'                | Direction of the animation                          |\n| avoidKeyboard      | boolean                                 | false               | Whether the modal should avoid the keyboard         |\n| ...otherProps      | RNModalProps                            | -                   | Any other props from React Native's Modal component |\n\n### useModal Hook\n\nA convenient hook for managing modal visibility state.\n\n```jsx\nconst { visible, showModal, hideModal, toggleModal } = useModal(initialState);\n```\n\n#### Parameters\n\n| Parameter    | Type    | Default | Description                           |\n| ------------ | ------- | ------- | ------------------------------------- |\n| initialState | boolean | false   | Initial visibility state of the modal |\n\n#### Return Values\n\n| Return Value | Type     | Description                             |\n| ------------ | -------- | --------------------------------------- |\n| visible      | boolean  | Current visibility state                |\n| showModal    | function | Function to show the modal              |\n| hideModal    | function | Function to hide the modal              |\n| toggleModal  | function | Function to toggle the modal visibility |\n\n## Animation Types\n\n### Fade\n\nThe modal fades in and out with a smooth opacity transition.\n\n### Slide\n\nThe modal slides in from the specified direction (up, down, left, right).\n\n### Bounce\n\nThe modal bounces in from the specified direction with a spring-like effect.\n\n### Zoom\n\nThe modal zooms in and out with a scaling effect.\n\n## Customization Examples\n\n### Modal Content Styling\n\nThe library doesn't apply any default styling to your modal content, giving you complete freedom to design it however you want. You need to provide your own styling through the `contentContainerStyle` prop:\n\n```jsx\n\u003cAnimatedModal\n  visible={visible}\n  onBackdropPress={hideModal}\n  animationIn=\"slide\"\n  contentContainerStyle={{\n    backgroundColor: \"#f8f9fa\",\n    borderRadius: 15,\n    padding: 20,\n    width: \"90%\",\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 10 },\n    shadowOpacity: 0.3,\n    shadowRadius: 20,\n    elevation: 10,\n  }}\n  backdropColor=\"#2c3e50\"\n  backdropOpacity={0.8}\n\u003e\n  {/* Modal content */}\n\u003c/AnimatedModal\u003e\n```\n\n### Custom Animation Duration\n\n```jsx\n\u003cAnimatedModal\n  visible={visible}\n  onBackdropPress={hideModal}\n  animationIn=\"bounce\"\n  animationDuration={500} // Slower animation (500ms)\n  contentContainerStyle={styles.modalContent}\n\u003e\n  {/* Modal content */}\n\u003c/AnimatedModal\u003e\n```\n\n### Using React Native Modal Props\n\nYou can pass any props from React Native's Modal component directly to our Modal components:\n\n```jsx\n\u003cModal\n  visible={visible}\n  onBackdropPress={hideModal}\n  animationType=\"fade\"\n  contentContainerStyle={styles.modalContent}\n  style={styles.modalWrapper} // Style for the modal container\n  hardwareAccelerated={true} // React Native Modal prop\n  supportedOrientations={[\"portrait\", \"landscape\"]} // React Native Modal prop\n  onShow={() =\u003e console.log(\"Modal shown\")} // React Native Modal prop\n\u003e\n  {/* Modal content */}\n\u003c/Modal\u003e\n```\n\n## Roadmap\n\nWe're constantly working to improve react-native-modal-2. Here are some features we plan to add in future releases:\n\n### Upcoming Features\n\n- **Separate Animation Durations**: Different durations for entrance (`animationInDuration`) and exit (`animationOutDuration`) animations\n- **Backdrop Control**: `hasBackdrop` prop to completely disable the backdrop when needed\n- **Custom Backdrop Component**: Support for custom backdrop components beyond just color and opacity\n- **Lifecycle Events**: `onModalShow` and `onModalHide` callbacks for better control of modal lifecycle\n- **Gesture Support**: Swipe to dismiss and other gesture-based interactions\n- **Stacked Modals**: Better support for displaying multiple modals simultaneously\n- **Enhanced Keyboard Handling**: Improved `KeyboardAvoidingView` integration with automatic content adjustment when keyboard appears\n\nHave a feature request? Feel free to open an issue or submit a pull request!\n\n## Troubleshooting\n\n### Animations Not Working\n\nIf animations aren't working correctly:\n\n1. Make sure you're using a unique modal instance for each animation type\n2. Verify that you're not rapidly toggling the modal visibility\n3. Check that you're using the correct animation type and direction\n\n### Modal Content Not Displaying Correctly\n\nIf your modal content isn't displaying correctly:\n\n1. Make sure you've provided proper styling through `contentContainerStyle`\n2. Remember that the library doesn't apply any default styling to your content\n3. Use ScrollView for content that might be too large\n\n### Performance Issues\n\nIf you're experiencing performance issues:\n\n1. Use `useNativeDriver: true` for animations (this is enabled by default)\n2. Avoid complex layouts inside the modal\n3. Reduce the number of simultaneous animations\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT\n\n## Author\n\n[WrathChaos](https://github.com/WrathChaos)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-modal-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-modal-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-modal-2/lists"}