{"id":20472563,"url":"https://github.com/dekoruma/react-native-web-modal","last_synced_at":"2025-04-05T09:07:03.298Z","repository":{"id":49087619,"uuid":"139941525","full_name":"Dekoruma/react-native-web-modal","owner":"Dekoruma","description":"React Native Modal Implementation for Web","archived":false,"fork":false,"pushed_at":"2021-06-29T11:26:24.000Z","size":137,"stargazers_count":125,"open_issues_count":11,"forks_count":41,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-22T19:21:04.490Z","etag":null,"topics":["animated","modal","react","react-native","react-native-web"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/kxmx8w08jv","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/Dekoruma.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}},"created_at":"2018-07-06T06:17:36.000Z","updated_at":"2023-11-07T12:49:08.000Z","dependencies_parsed_at":"2022-09-16T14:50:56.804Z","dependency_job_id":null,"html_url":"https://github.com/Dekoruma/react-native-web-modal","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dekoruma%2Freact-native-web-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dekoruma%2Freact-native-web-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dekoruma%2Freact-native-web-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dekoruma%2Freact-native-web-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dekoruma","download_url":"https://codeload.github.com/Dekoruma/react-native-web-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312078,"owners_count":20918344,"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":["animated","modal","react","react-native","react-native-web"],"created_at":"2024-11-15T14:20:35.702Z","updated_at":"2025-04-05T09:07:03.262Z","avatar_url":"https://github.com/Dekoruma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  React Native Web Modal\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://codesandbox.io/s/kxmx8w08jv\"\u003e\n    \u003cimg alt=\"Edit kxmx8w08jv\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cbr /\u003e\n  This repository contains NPM Packages for React Native Modal Implementation for Web\n  \u003cbr /\u003e\n\u003c/p\u003e\n\n---\n\n## Announcement\n\nModal is now supported in react native web.\n\nhttps://github.com/necolas/react-native-web/releases/tag/0.14.0\n\nThank you for using and supporting this library!\n\n## Inspiration\n\n[React Native Modal](https://facebook.github.io/react-native/docs/modal.html) is not yet implemented in [React Native Web](https://github.com/necolas/react-native-web). This is just replacement of React Native Modal with the same API, behavior, and design. If you want to create a more enhanced modal, use React Native Web Modal Enhanced with the same code as [React Native Modal](https://github.com/react-native-community/react-native-modal) implementation by React Native Community.\n\n---\n\n## Setup\n\nModal library is available on npm, install it with: `npm install --save modal-react-native-web` or `yarn add modal-react-native-web` for the basic modal.\n\nIf you want to use the enhanced version, install it with `npm install --save modal-enhanced-react-native-web` or `yarn add modal-enhanced-react-native-web`.\n\n## Usage\n\n1. React Native Web Modal\n\nSince r-web-modal is an implemantion of the original react native modal, it works in a similar fashion with [react-native modal](https://facebook.github.io/react-native/docs/modal.html). But of course, some APIs are limited (not all props are suppported).\n\n```javascript\n\nimport React, { Component } from 'react';\nimport { Text, TouchableHighlight, View } from 'react-native';\n\nimport Modal from 'modal-react-native-web';\n\nexport default class Example extends Component {\n  state = {\n    modalVisible: false,\n  };\n\n  setModalVisible(visible) {\n    this.setState({modalVisible: visible});\n  }\n\n  render() {\n    return (\n      \u003cView style={{marginTop: 22}}\u003e\n        \u003cModal\n          animationType=\"slide\"\n          transparent={false}\n          visible={this.state.modalVisible}\n          onDismiss={() =\u003e {\n            alert('Modal has been closed.');\n          }}\u003e\n          \u003cView style={{marginTop: 22}}\u003e\n            \u003cView\u003e\n              \u003cText\u003eHello World!\u003c/Text\u003e\n\n              \u003cTouchableHighlight\n                onPress={() =\u003e {\n                  this.setModalVisible(!this.state.modalVisible);\n                }}\u003e\n                \u003cText\u003eHide Modal\u003c/Text\u003e\n              \u003c/TouchableHighlight\u003e\n            \u003c/View\u003e\n          \u003c/View\u003e\n        \u003c/Modal\u003e\n\n        \u003cTouchableHighlight\n          onPress={() =\u003e {\n            this.setModalVisible(true);\n          }}\u003e\n          \u003cText\u003eShow Modal\u003c/Text\u003e\n        \u003c/TouchableHighlight\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n_Taken from [React Native Modal Example](https://facebook.github.io/react-native/docs/modal.html) with some changes_\n\n2. Modal Enhanced for React Native Web\n\n```javascript\nimport React, { Component } from \"react\";\nimport { Text, TouchableOpacity, View, ScrollView } from \"react-native\";\n\nimport Modal from 'modal-enhanced-react-native-web';\n\nexport default class Example extends Component {\n  state = {\n    visibleModal: null\n  };\n\n  _renderButton = (text, onPress) =\u003e (\n    \u003cTouchableOpacity onPress={onPress}\u003e\n      \u003cView\u003e\n        \u003cText\u003e{text}\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/TouchableOpacity\u003e\n  );\n\n  _renderModalContent = () =\u003e (\n    \u003cView\u003e\n      \u003cText\u003eHello!\u003c/Text\u003e\n      {this._renderButton(\"Close\", () =\u003e this.setState({ visibleModal: false }))}\n    \u003c/View\u003e\n  );\n\n  _handleOnScroll = event =\u003e {\n    this.setState({\n      scrollOffset: event.nativeEvent.contentOffset.y\n    });\n  };\n\n  _handleScrollTo = p =\u003e {\n    if (this.scrollViewRef) {\n      this.scrollViewRef.scrollTo(p);\n    }\n  };\n\n  render() {\n    return (\n      \u003cView\u003e\n        {this._renderButton(\"Modal that can be closed on backdrop press\", () =\u003e\n          this.setState({ visibleModal: true })\n        )}\n        \u003cModal\n          isVisible={this.state.visibleModal}\n          onBackdropPress={() =\u003e this.setState({ visibleModal: false })}\n        \u003e\n          {this._renderModalContent()}\n        \u003c/Modal\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\nThe `isVisible` prop is the only prop you'll really need to make the modal work: you should control this prop value by saving it in your state and setting it to `true` or `false` when needed.\n\n_Taken from [React Native Modal Example](https://snack.expo.io/@kulack/react-native-modal-example) and [RN Modal by React Native](https://github.com/react-native-community/react-native-modal) with some changes_\n\nSee [React Native Modal by React Native Community](https://github.com/react-native-community/react-native-modal) for APIs.\n\n### Available animations\n\n_Taken From [React Native Modal by React Native Community](https://github.com/react-native-community/react-native-modal)_\n\nTake a look at [react-native-animatable](https://github.com/oblador/react-native-animatable) to see the dozens of animations available out-of-the-box. You can also pass in custom animation definitions and have them automatically register with react-native-animatable. For more information on creating custom animations, see the react-native-animatable [animation definition schema](https://github.com/oblador/react-native-animatable#animation-definition-schema).\n\n---\n\n## Packages\n\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u0026nbsp;\u003c/th\u003e\n    \u003cth\u003e\n      \u003ch3\u003e\u003ca href=\"https://github.com/rayandrews/react-native-web-modal/tree/master/packages/modal-react-native-web\"\u003eReact Native Web Modal\u003c/a\u003e\u003c/h3\u003e\n    \u003c/th\u003e\n    \u003cth\u003e\n      \u003ch3\u003e\u003ca href=\"https://github.com/rayandrews/react-native-web-modal/tree/master/packages/modal-enhanced-react-native-web\"\u003eEnhanced Modal React Native Web\u003c/a\u003e\u003c/h3\u003e\n    \u003c/th\u003e\n  \u003ctr\u003e\n  \u003ctr\u003e\n    \u003cth align=\"right\"\u003eNPM\u003c/th\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://nodei.co/npm/modal-react-native-web/\"\u003e\u003cimg src=\"https://nodei.co/npm/modal-react-native-web.png?downloads=true\u0026downloadRank=true\u0026stars=true\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://nodei.co/npm/modal-enhanced-react-native-web/\"\u003e\u003cimg src=\"https://nodei.co/npm/modal-enhanced-react-native-web.png?downloads=true\u0026downloadRank=true\u0026stars=true\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth align=\"right\"\u003eDescription\u003c/th\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"\"\u003eReact Native Modal\u003c/a\u003e implemented for Web.\u003cbr /\u003e\n    Implemented using\n    \u003ca href=\"https://github.com/necolas/react-native-web\"\u003eReact Native Web Animated\u003c/a\u003e and \u003ca href=\"https://reactjs.org/docs/portals.html\"\u003eReact DOM Portal\u003c/a\u003e\u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/react-native-community/react-native-modal\"\u003eEnhanced Version of React Native Modal\u003c/a\u003e, \u003cb\u003eimplemented\u003c/b\u003e for web\u003cbr /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth align=\"right\"\u003eInspired by\u003c/th\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/kiurchv/react-native-web-modal\"\u003eRNW Modal by Kiurchv\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/react-native-community/react-native-modal\"\u003eReact Native Modal by React Native Community\u003c/a\u003e\u003cbr /\u003e\n      MIT License by React Native Community\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth align=\"right\"\u003eNot yet supported\u003c/th\u003e\n    \u003ctd align=\"left\"\u003e\n      - onRequestClose\u003cbr /\u003e\n      - supportedOrientations\u003cbr /\u003e\n      - hardwareAccelerated\u003cbr /\u003e\n      - onOrientationChange\u003cbr /\u003e\n      - presentationStyle\u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e-\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Author\n\n* **Ray Andrew** - [Ray Andrew](https://github.com/rayandrews)\n\n## Special Thanks\n\n* **Natan Elia** - [Natan Elia](https://github.com/natanelia)\n* **Louis David** - [Louis David](https://github.com/louvidc)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdekoruma%2Freact-native-web-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdekoruma%2Freact-native-web-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdekoruma%2Freact-native-web-modal/lists"}