{"id":19247853,"url":"https://github.com/artirigo/react-native-modalview","last_synced_at":"2026-05-07T03:33:27.498Z","repository":{"id":57338461,"uuid":"98174948","full_name":"Artirigo/react-native-modalview","owner":"Artirigo","description":"An advanced and composable Modal component for react-native","archived":false,"fork":false,"pushed_at":"2017-08-09T09:13:24.000Z","size":131,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-18T21:41:48.445Z","etag":null,"topics":["android","animation","composable","ios","javascript","modal","modal-dialogs","react","react-native"],"latest_commit_sha":null,"homepage":null,"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/Artirigo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-24T09:43:34.000Z","updated_at":"2019-01-22T23:53:14.000Z","dependencies_parsed_at":"2022-09-07T11:51:06.030Z","dependency_job_id":null,"html_url":"https://github.com/Artirigo/react-native-modalview","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artirigo%2Freact-native-modalview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artirigo%2Freact-native-modalview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artirigo%2Freact-native-modalview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artirigo%2Freact-native-modalview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Artirigo","download_url":"https://codeload.github.com/Artirigo/react-native-modalview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240339583,"owners_count":19785957,"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","animation","composable","ios","javascript","modal","modal-dialogs","react","react-native"],"created_at":"2024-11-09T18:05:28.946Z","updated_at":"2026-05-07T03:33:27.461Z","avatar_url":"https://github.com/Artirigo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-modalview\n\n[![npm version](https://badge.fury.io/js/react-native-modalview.svg)](https://badge.fury.io/js/react-native-modalview)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n \nAn advanced and composable Modal component for react-native\n\n## Features\n\n- Very modular through composable components\n- all features are easy to toggle on/off via props\n- Smooth open/close animations\n- Extendable with own animations/easings/...\n- Customizable backdrop opacity, color, duration and easing\n- Event listeners for the modal states `onOpen`, `onOpened`, `onClose`, `onClosed`\n\n## Demo\n\ncoming soon\n\n## Setup\n\nThis library is available on npm, install it with: `npm install --save react-native-modalview` or `yarn add react-native-modalview`.\n\n## Usage\n\nUse all of the features or toggle features on and off via props;\n\n```javascript\nimport React, { Component } from 'react'\nimport { Text, TouchableOpacity, View } from 'react-native'\nimport Modal from 'react-native-modalview'\n\nexport default class ModalDemo extends Component {\n  state = {\n    showModal: false\n  }\n\n  _showModal = () =\u003e this.setState({ showModal: true })\n\n  _hideModal = () =\u003e this.setState({ showModal: false })\n\n  render () {\n    const { showModal } = this.state;\n    return (\n      \u003cView style={{ flex: 1 }}\u003e\n        \u003cTouchableOpacity onPress={this._showModal}\u003e\n          \u003cText\u003eShow Modal\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n        \u003cModal \n          open={showModal}\n          backdrop={true}\n          swipeToDismiss={true}\n          onClosed={this._hideModal}\n        \u003e\n          \u003cView style={{ backgroundColor: '#fff' }}\u003e\n            \u003cText\u003eHello!\u003c/Text\u003e\n          \u003c/View\u003e\n        \u003c/Modal\u003e\n      \u003c/View\u003e\n    )\n  }\n\n}\n```\n\nIf you don't need all the functionality like `backdrop` or `swipeToDismiss` you can also \nimport the base components and compose the Modal without this functionality or extend it with \nyour own.\n\n\n```javascript\nimport { ModalBase, withBackdrop} from 'react-native-modalview'\nimport { compose } from 'ramda';\n\nconst Modal = compose(\n  withBackdrop, \n)(ModalBase);\n```\n\n\n## Props\n\n`ModalBase`\n\n| Name | Type| Default | Description |\n| --- | --- | --- | --- |\n| open | `bool` | false | open/close the modal |\n| disabled | `bool` | false | disable open/closing of the modal |\n| children | `node` | **REQUIRED** | The modal content |\n| style | `any` | null | Style applied to the modal |\n| positionVertical | `string` | 'center' | vertical position of the modal. possible values: 'start', 'center', 'end'  |\n| positionHorizontal | `string` | 'center' | horizontal position of the modal. possible values: 'start', 'center', 'end'  |\n| animation | `string` | 'slideBottom' | convenience prop to set the animation type for open/close.  |\n| animationDuration | `number` | 300 | convenience prop to set the animation duration for open/close/backdrop  |\n| animationEasing | `string` | 'easeOut' | convenience prop to set the animation easing for open/close/backdrop  |\n| animationIn | `string` | `animation` | animation type for opening the modal  |\n| animationInDuration | `string` | `animationDuration` | animation duration for opening the modal  |\n| animationInEasing | `string`, `func` | `animationEasing` | animation easing for opening the modal  |\n| animationOut | `string` | `animation` | animation type for closing the modal  |\n| animationOutDuration | `string` | `animationDuration` | animation duration for closing the modal  |\n| animationOutEasing | `string`, `func` | `animationEasing` | animation easing for closing the modal  |\n| animationUseNativeDriver | `bool` | false | use `useNativeDriver` for animations  |\n| overlay | `bool` | false | wrap view in react-native `Modal` to present content above everything else  |\n| testID | `string` | null | Used to locate this view in end-to-end tests.  |\n\n`withBackdrop`\n\n| Name | Type| Default | Description |\n| --- | --- | --- | --- |\n| backdrop | `bool` | false | show/hide backdrop  |\n| backdropClickToClose | `bool` | false | close modal by clicking on backdrop  |\n| backdropColor | `string` | #00000099 | change backdrop color  |\n| backdropAnimationDuration | `string` | `animationDuration` | animation duration for opening and closing the backdrop  |\n| backdropAnimationEasing | `string`, `func` | `animationEasing` | animation easing for opening and closing the backdrop  |\n\n`withSwipeToDismiss`\n\n| Name | Type| Default | Description |\n| --- | --- | --- | --- |\n| swipeToDismiss | `bool` | false | enable/disable swipe-to-dismiss functionality  |\n| swipeThreshold | `number` | 50 | threshold to reach in pixels to close the modal  |\n| swipeArea | `number` | null | width/height in pixels of the swipeable area. By default the whole modal is swipeable.  |\n\n\n## Events\n\n| Name | Type| Default | Description |\n| --- | --- | --- | --- |\n| onLayout | `func` | null | invoked on mount and layout changes |\n| onContentLayout | `func` | null | invoked when content layout changes |\n| onClose | `func` | null | invoked when the modal starts closing |\n| onClosed | `func` | null | invoked when the modal is closed completely |\n| onOpen | `func` | null | invoked when the modal starts opening |\n| onOpened | `func` | null | invoked when the modal is opened completely |\n\n\n## Animations\n\n- `fade`\n- `slideBottom`\n- `slideTop`\n- `slideRight`\n- `slideLeft`\n- `scaleBackground`\n- `scaleForeground`\n- custom animation `func`\n\n\n## Easings\n\n- `linear`\n- `easeIn`\n- `easeOut`\n- `easeInOut`\n- `easeInQuad`\n- `easeOutQuad`\n- `easeInOutQuad`\n- `easeInCubic`\n- `easeOutCubic`\n- `easeInOutCubic`\n- `easeInSine`\n- `easeOutSine`\n- `easeInOutSine`\n- `easeInCirc`\n- `easeOutCirc`\n- `easeInOutCirc`\n- `easeInExpo`\n- `easeOutExpo`\n- `easeInOutExpo`\n- `easeInBounce`\n- `easeOutBounce`\n- `easeInOutBounce`\n- `easeInQuart`\n- `easeOutQuart`\n- `easeInOutQuart`\n- `easeInQuint`\n- `easeOutQuint`\n- `easeInOutQuint`\n- `easeInElastic`\n- `easeOutElastic`\n- `easeInOutElastic`\n- `easeInBack`\n- `easeOutBack`\n- `easeInOutBack`\n- custom easing `func`\n\n\n## TODO\n\n- [ ] usage examples\n- [ ] unit-tests\n- [ ] demo gifs","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartirigo%2Freact-native-modalview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartirigo%2Freact-native-modalview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartirigo%2Freact-native-modalview/lists"}