{"id":15801616,"url":"https://github.com/garrettmac/react-native-popover","last_synced_at":"2025-08-02T21:09:09.123Z","repository":{"id":84888362,"uuid":"91369046","full_name":"garrettmac/react-native-popover","owner":"garrettmac","description":null,"archived":false,"fork":false,"pushed_at":"2017-08-28T03:24:09.000Z","size":2118,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-06T01:23:19.736Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/garrettmac.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":"2017-05-15T18:07:17.000Z","updated_at":"2018-05-08T03:01:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"88224e87-b986-40fb-8a9e-8fcc3ccdad5f","html_url":"https://github.com/garrettmac/react-native-popover","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/garrettmac%2Freact-native-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garrettmac","download_url":"https://codeload.github.com/garrettmac/react-native-popover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246547388,"owners_count":20794970,"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":[],"created_at":"2024-10-05T01:23:18.884Z","updated_at":"2025-03-31T21:55:43.471Z","avatar_url":"https://github.com/garrettmac.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-native-popover\n\n[![npm version](http://img.shields.io/npm/v/react-native-popover.svg?style=flat-square)](https://npmjs.org/package/react-native-popover \"View this project on npm\")\n[![npm version](http://img.shields.io/npm/dm/react-native-popover.svg?style=flat-square)](https://npmjs.org/package/react-native-popover \"View this project on npm\")\n[![npm licence](http://img.shields.io/npm/l/react-native-popover.svg?style=flat-square)](https://npmjs.org/package/react-native-popover \"View this project on npm\")\n\nA `\u003cPopover\u003e` component for react-native. This is still very much a work\nin progress and only handles the simplest of cases, ideas and\ncontributions are very welcome.\n\n![Demo](https://raw.githubusercontent.com/jeanregisser/react-native-popover/master/Screenshots/animated.gif)\n\n## Install\n\n```shell\nnpm i --save react-native-popover\n```\n\n## Usage\n\n```jsx\n'use strict';\n\nvar React = require('react');\nvar Popover = require('react-native-popover');\nvar {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  TouchableHighlight,\n  View,\n} = require('react-native');\n\nvar PopoverExample = React.createClass({\n  getInitialState() {\n    return {\n      isVisible: false,\n      buttonRect: {},\n    };\n  },\n\n  showPopover() {\n    this.refs.button.measure((ox, oy, width, height, px, py) =\u003e {\n      this.setState({\n        isVisible: true,\n        buttonRect: {x: px, y: py, width: width, height: height}\n      });\n    });\n  },\n\n  closePopover() {\n    this.setState({isVisible: false});\n  },\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cTouchableHighlight ref='button' style={styles.button} onPress={this.showPopover}\u003e\n          \u003cText style={styles.buttonText}\u003ePress me\u003c/Text\u003e\n        \u003c/TouchableHighlight\u003e\n\n        \u003cPopover\n          isVisible={this.state.isVisible}\n          fromRect={this.state.buttonRect}\n          onClose={this.closePopover}\u003e\n          \u003cText\u003eI'm the content of this popover!\u003c/Text\u003e\n        \u003c/Popover\u003e\n      \u003c/View\u003e\n    );\n  }\n});\n\nvar styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: 'rgb(43, 186, 180)',\n  },\n  button: {\n    borderRadius: 4,\n    padding: 10,\n    marginLeft: 10,\n    marginRight: 10,\n    backgroundColor: '#ccc',\n    borderColor: '#333',\n    borderWidth: 1,\n  },\n  buttonText: {\n  }\n});\n\nAppRegistry.registerComponent('PopoverExample', () =\u003e PopoverExample);\n```\n\n### Displaying the popover on top of other elements\n\nReact Native doesn't support directly setting a zIndex on a view.\nWhat is recommended instead is to rearrange your view hierarchy and put the popover last at the root of your app.\nSee [facebook/react-native#131](https://github.com/facebook/react-native/issues/131#issuecomment-77764928)\n\nHowever, as an alternative, I recommend you use [@brentvatne](https://github.com/brentvatne)'s [react-native-overlay](https://github.com/brentvatne/react-native-overlay) library to wrap `\u003cPopover /\u003e` and bring it to the front no matter where it sits in the render tree.\n\n## Props\n\nProp              | Type     | Optional | Default     | Description\n----------------- | -------- | -------- | ----------- | -----------\nisVisible         | bool     | Yes      | false       | Show/Hide the popover\nfromRect          | rect     | No       | {}          | Rectangle at which to anchor the popover\ndisplayArea       | rect     | Yes      | screen rect | Area where the popover is allowed to be displayed\nplacement         | string   | Yes      | 'auto'      | How to position the popover - top \u0026#124; bottom \u0026#124; left \u0026#124; right \u0026#124; auto. When 'auto' is specified, it will determine the ideal placement so that the popover is fully visible within `displayArea`.\nonClose           | function | Yes      |             | Callback to be fired when the user taps the popover\ncustomShowHandler | function | Yes      |             | Custom show animation handler - uses a [react-tween-state wrapper](https://github.com/jeanregisser/react-native-popover/blob/master/Transition.js) API in order to show the modal. See [default show handler](https://github.com/jeanregisser/react-native-popover/blob/754a87b0befccfe534774f3166765732a99bfddf/Popover.js#L185-L192).\ncustomHideHandler | function | Yes      |             | Custom hide animation handler - uses a [react-tween-state wrapper](https://github.com/jeanregisser/react-native-popover/blob/master/Transition.js) API in order to hide the modal. See [default hide handler](https://github.com/jeanregisser/react-native-popover/blob/754a87b0befccfe534774f3166765732a99bfddf/Popover.js#L193-L200).\n\nrect is an object with the following properties: `{x: number, y: number, width: number, height: number}`\n\n## Credits\n\nThe code supporting animations was inspired and adapted from [@brentvatne](https://github.com/brentvatne)'s [Transition.js mixin](https://github.com/brentvatne/react-native-modal/blob/8020a920e7f08a0f1acd6ce897fe888fa39a51bf/Transitions.js).\n\n---\n\n**MIT Licensed**\n# react-native-popover","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarrettmac%2Freact-native-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarrettmac%2Freact-native-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarrettmac%2Freact-native-popover/lists"}