{"id":3969,"url":"https://github.com/jacklam718/react-native-modals","last_synced_at":"2025-05-14T07:09:42.387Z","repository":{"id":10985402,"uuid":"67902342","full_name":"jacklam718/react-native-modals","owner":"jacklam718","description":"A react native modals library. Swipeable. Highly customizable. Support multi modals \u0026 Support custom animation. For IOS \u0026 Android.","archived":false,"fork":false,"pushed_at":"2024-06-19T12:57:31.000Z","size":15940,"stargazers_count":2201,"open_issues_count":129,"forks_count":299,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-02T11:18:51.916Z","etag":null,"topics":["component","dialog","es6","javascript","react","react-animate","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jacklam718.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2016-09-11T00:56:21.000Z","updated_at":"2025-04-25T20:52:23.000Z","dependencies_parsed_at":"2024-11-19T01:11:35.929Z","dependency_job_id":"b17c1310-09b9-4ca3-91eb-23be26599512","html_url":"https://github.com/jacklam718/react-native-modals","commit_stats":{"total_commits":339,"total_committers":21,"mean_commits":"16.142857142857142","dds":0.1504424778761062,"last_synced_commit":"d68d1cba2066bb87fc082d837dd129681349989e"},"previous_names":["jacklam718/react-native-popup-dialog"],"tags_count":100,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-modals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-modals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-modals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-modals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacklam718","download_url":"https://codeload.github.com/jacklam718/react-native-modals/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092788,"owners_count":22013290,"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":["component","dialog","es6","javascript","react","react-animate","react-native"],"created_at":"2024-01-05T20:16:57.217Z","updated_at":"2025-05-14T07:09:37.352Z","avatar_url":"https://github.com/jacklam718.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["UI","Dialog/Modal/Alert"],"readme":"[![Build Status](https://travis-ci.org/jacklam718/react-native-modals.svg?branch=master)](https://travis-ci.org/jacklam718/react-native-modals)\n[![npm](https://img.shields.io/npm/dm/react-native-modals.svg)]()\n[![npm](https://img.shields.io/npm/v/react-native-modals.svg)]()\n\n## React Native Modals\nReact Native Modals Library for iOS \u0026 Android.\n\n#### How to thank me ?\nJust click on ⭐️ button 😘\n\n[Try it with Exponent](https://exp.host/@jacklam718/modals-example)\u003cbr\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003c!-- ![Example](https://jacklam718.github.io/react-native-modals/resources/react-native-modals.gif) --\u003e\n\u003cspan\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/swipeable-modal.gif\" width=\"220\"\u003e\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/bottom-modal.gif\" width=\"220\"\u003e\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/slide-animation.gif\" width=\"220\"\u003e\n\u003c/span\u003e\n\n## BREAKING CHANGE\nA lot of backward incompatible changes in `v0.22.0`. Please, Read the Docs before upgrading to `v0.22.0`\n\n## Installation\n\n```\nnpm install --save react-native-modals\n# OR\nyarn add react-native-modals\n```\n\n## Exposed Modules\n\n* Modal\n* ButtomModal\n* ModalPortal\n* Backdrop\n* ModalButton\n* ModalContent\n* ModalTitle\n* ModalFooter\n* Animation\n* FadeAnimation\n* ScaleAnimation\n* SlideAnimation\n* DragEvent,\n* SwipeDirection,\n* ModalProps\n* ModalFooterProps\n* ModalButtonProps\n* ModalTitleProps\n* ModalContentProps\n* BackdropProps\n\n## Examples\n[Example](https://github.com/jacklam718/react-native-modals/blob/master/example/src/DemoScreen.js)\n\n## Setup - this is essential step\nThe Component can not be used until `ModalPortal` is mounted.\nYou should register in your app root. For example:\n```jsx\nimport { ModalPortal } from 'react-native-modals';\nimport { Provider } from 'react-redux';\n\nconst Root = () =\u003e {\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cApp /\u003e\n      \u003cModalPortal /\u003e\n    \u003c/Provider\u003e\n  );\n}\n```\n\n## Basic Usage\n```jsx\nimport { Modal, ModalContent } from 'react-native-modals';\nimport { Button } from 'react-native'\n\n\u003cView style={styles.container}\u003e\n  \u003cButton\n    title=\"Show Modal\"\n    onPress={() =\u003e {\n      this.setState({ visible: true });\n    }}\n  /\u003e\n  \u003cModal\n    visible={this.state.visible}\n    onTouchOutside={() =\u003e {\n      this.setState({ visible: false });\n    }}\n  \u003e\n    \u003cModalContent\u003e\n      {...}\n    \u003c/ModalContent\u003e\n  \u003c/Modal\u003e\n\u003c/View\u003e\n```\n\n## Usage - Imperative APIs\nshow\n```jsx\nimport { ModalPortal } from 'react-native-modals';\n\nconst id = ModalPortal.show((\n  \u003cView\u003e\n    {...}\n  \u003c/View\u003e\n));\n```\n\nupdate\n```jsx\nModalPortal.update(id, {\n  children: (\n    \u003cView\u003e\n      \u003cText\u003eUpdated\u003c/Text\u003e\n    \u003c/View\u003e\n  ),\n});\n```\n\ndismiss\n```jsx\nModalPortal.dismiss(id);\n```\n\ndismissAll\n```jsx\nModalPortal.dismissAll(id);\n```\n\n## Usage - Animation\n```jsx\nimport { Modal, SlideAnimation, ModalContent } from 'react-native-modals';\n\n\u003cView style={styles.container}\u003e\n  \u003cModal\n    visible={this.state.visible}\n    modalAnimation={new SlideAnimation({\n      slideFrom: 'bottom',\n    })}\n  \u003e\n    \u003cModalContent\u003e\n      {...}\n    \u003c/ModalContent\u003e\n  \u003c/Modal\u003e\n\u003c/View\u003e\n```\n\n## Usage - Swipe\n```jsx\nimport { Modal, ModalContent } from 'react-native-modals';\nimport { Button } from 'react-native'\n\n\u003cView style={styles.container}\u003e\n  \u003cModal\n    visible={this.state.visible}\n    swipeDirection={['up', 'down']} // can be string or an array\n    swipeThreshold={200} // default 100\n    onSwipeOut={(event) =\u003e {\n      this.setState({ visible: false });\n    }}\n  \u003e\n    \u003cModalContent\u003e\n      {...}\n    \u003c/ModalContent\u003e\n  \u003c/Modal\u003e\n\u003c/View\u003e\n```\n\n## Usage - Modal Title\n```jsx\nimport { Modal, ModalTitle, ModalContent } from 'react-native-modals';\n\n\u003cView style={styles.container}\u003e\n  \u003cModal\n    visible={this.state.visible}\n    modalTitle={\u003cModalTitle title=\"Modal Title\" /\u003e}\n  \u003e\n    \u003cModalContent\u003e\n      {...}\n    \u003c/ModalContent\u003e\n  \u003c/Modal\u003e\n\u003c/View\u003e\n```\n\n## Usage - Modal Action\n```jsx\nimport { Modal, ModalFooter, ModalButton, ModalContent } from 'react-native-modals';\n\n\u003cView style={styles.container}\u003e\n  \u003cModal\n    visible={this.state.visible}\n    footer={\n      \u003cModalFooter\u003e\n        \u003cModalButton\n          text=\"CANCEL\"\n          onPress={() =\u003e {}}\n        /\u003e\n        \u003cModalButton\n          text=\"OK\"\n          onPress={() =\u003e {}}\n        /\u003e\n      \u003c/ModalFooter\u003e\n    }\n  \u003e\n    \u003cModalContent\u003e\n      {...}\n    \u003c/ModalContent\u003e\n  \u003c/Modal\u003e\n\u003c/View\u003e\n```\n\n\n## Props\n\n### Modal\n| Prop | Type | Default | Note |\n|---|---|---|---|\n| `visible` | `boolean` | `false` | |\n| `rounded` | `boolean` | `true` | |\n| `useNativeDriver` | `boolean` | `true` | |\n| `children` | `any` | | |\n| `modalTitle?` | `React Element` | | You can pass a `modalTitle` component or pass a `View` for customizing titlebar |\n| `width?` | `Number` | Your device width | The Width of modal, you can use fixed width or use percentage. For example `0.5` it means `50%`\n| `height?` | `Number` | 300 | The Height of modal, you can use fixed height or use percentage. For example `0.5` it means `50%`\n| `modalAnimation?` |  | `FadeAnimation` | animation for modal | |\n| `modalStyle?` | `any` | | | |\n| `containerStyle?` | `any` | `null` | For example: ``` {  zIndex: 10, elevation: 10 } ``` | |\n| `animationDuration?` | `Number` | `200` | | |\n| `overlayPointerEvents?` | `String` | | Available option: `auto`, `none` |\n| `overlayBackgroundColor?` | `String` | `#000` |\n| `overlayOpacity?` | `Number` | `0.5` |\n| `hasOverlay?` | `Boolean` | `true` | | |\n| `onShow?` | `Function` | | You can pass shown function as a callback function, will call the function when modal shown | |\n| `onDismiss?` | `Function` | | You can pass onDismiss function as a callback function, will call the function when modal dismissed | |\n| `onTouchOutside?` | `Function` | `() =\u003e {}` | | |\n| `onHardwareBackPress?` | `Function` | `() =\u003e true` | [Handle hardware button presses](https://facebook.github.io/react-native/docs/backhandler) | |\n| `onMove?` | `Function` | `() =\u003e {}` | | |\n| `onSwiping?` | `Function` | `() =\u003e {}` | | |\n| `onSwipeRelease?` | `Function` | `() =\u003e {}` | | |\n| `onSwipingOut?` | `Function` | `() =\u003e {}` | | |\n| `onSwipeOut?` | `Function` | | | |\n| `swipeDirection?` | `string or Array\u003cstring\u003e` | [] | Available option: `up`, `down`, `left`, `right` | |\n| `swipeThreshold?` | `number` | `100` | | |\n| `footer?` | `React Element` | `null` | for example: ```\u003cView\u003e\u003cButton text=\"DISMISS\" align=\"center\" onPress={() =\u003e {}}/\u003e\u003c/View\u003e``` | |\n\n### ModalTitle\n| Prop | Type | Default | Note |\n|---|---|---|---|\n| `title` | `String` | | | |\n| `style?` | `any` | `null` | | |\n| `textStyle?` | `any` | `null` | | |\n| `align?` | `String` | `center` | Available option: `left`, `center`, `right` | |\n| `hasTitleBar?` | `Bool` | `true` | | |\n\n\n### ModalContent\n| Prop | Type | Default | Note |\n|---|---|---|---|\n| `children` | `any` | | | |\n| `style?` | `any` | `null` | | |\n\n\n### ModalFooter\n| Prop | Type | Default | Note |\n|---|---|---|---|\n| `children` | `ModalButton` | | | |\n| `bordered?` | `Boolean` | `true` | | |\n| `style?` | `any` | null | | |\n\n\n### ModalButton\n| Prop | Type | Default | Note |\n|---|---|---|---|\n| `text` | `String` | | | |\n| `onPress` | `Function` | | | |\n| `align?` | `String` | `center` | Available option: `left`, `center`, `right` | |\n| `style?` | `any` | `null` | | |\n| `textStyle?` | `any` | `null` | | |\n| `activeOpacity?` | `Number` | `0.6` | | |\n| `disabled?` | `Boolean` | `false` | | |\n| `bordered?` | `Boolean` | `false` | | |\n\n\n### Backdrop\n| Prop | Type | Default | Note |\n|---|---|---|---|\n| `visible` | `Boolean` | | | |\n| `opacity` | `Number` | `0.5` | | |\n| `onPress?` | `Function` | | | |\n| `backgroundColor?` | `string` | `#000` | | |\n| `animationDuration?` | `Number` | `200` | | |\n| `pointerEvents?` | `String` | `null` | Available option: `auto`, `none` | |\n| `useNativeDriver?` | `Boolean` | `true` | | |\n\n\n## Animation\n### Params for (*)Animation\n\n### FadeAnimation\n##### Preview:\n\u003cimg src=\"https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/fade-animation.gif\" width=\"200\"\u003e\n\n##### Example:\n```javascript\nnew FadeAnimation({\n  initialValue: 0, // optional\n  animationDuration: 150, // optional\n  useNativeDriver: true, // optional\n})\n```\n| Param | Type | Default | Note |\n|---|---|---|---|\n| `initialValue` | Number | 0 | |\n| `animationDuration?` | Number | 150 | |\n| `useNativeDriver?` | Boolean | true | |\n\n### ScaleAnimation\n##### Preview:\n\u003cimg src=\"https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/scale-animation.gif\" width=\"200\"\u003e\n\n##### Example:\n```javascript\nnew ScaleAnimation({\n  initialValue: 0, // optional\n  useNativeDriver: true, // optional\n})\n```\n| Param | Type | Default | Note |\n|---|---|---|---|\n| `initialValue` | Number | 0 | |\n| `useNativeDriver` | Boolean | true |  |\n\n### SlideAnimation\n##### Preview:\n\u003cimg src=\"https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/slide-animation.gif\" width=\"200\"\u003e\n\n##### Example:\n```javascript\nnew SlideAnimation({\n  initialValue: 0, // optional\n  slideFrom: 'bottom', // optional\n  useNativeDriver: true, // optional\n})\n```\n| Param | Type | Default | Note |\n|---|---|---|---|\n| `initialValue` | Number | 0 | |\n| `slideFrom` | String | `bottom` | Available option: `top`, `bottom`, `left`, `right` |\n| `useNativeDriver` | Boolean | true | |\n\n### Create your custom animation\n\n##### Example:\n\n```javascript\nimport { Animated } from 'react-native';\nimport { Animation } from 'react-native-modals';\n\nclass CustomAnimation extends Animation {\n  in(onFinished) {\n    Animated.spring(this.animate, {\n      toValue: 1,\n      useNativeDriver: this.useNativeDriver,\n    }).start(onFinished);\n  }\n\n  out(onFinished) {\n    Animated.spring(this.animate, {\n      toValue: 0,\n      useNativeDriver: this.useNativeDriver,\n    }).start(onFinished);\n  }\n\n  getAnimations() {\n    return {\n      transform: [{\n        translateY: this.animate.interpolate({\n          inputRange: [0, 1],\n          outputRange: [800, 1],\n        }),\n      }],\n    };\n  }\n}\n```\n\n## Development\n`yarn`\n\n`yarn run build`\n\n`yarn test`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacklam718%2Freact-native-modals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacklam718%2Freact-native-modals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacklam718%2Freact-native-modals/lists"}