{"id":18301435,"url":"https://github.com/dominicstop/react-native-ios-popover","last_synced_at":"2025-07-18T21:32:30.390Z","repository":{"id":57337792,"uuid":"319256329","full_name":"dominicstop/react-native-ios-popover","owner":"dominicstop","description":"A react-native component to use the native popover in iOS","archived":false,"fork":false,"pushed_at":"2023-04-12T13:47:13.000Z","size":13366,"stargazers_count":42,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-04T20:15:58.266Z","etag":null,"topics":["native-component","react-native","react-native-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/dominicstop.png","metadata":{"files":{"readme":"README-old.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2020-12-07T08:43:40.000Z","updated_at":"2025-01-11T23:32:14.000Z","dependencies_parsed_at":"2024-10-24T17:46:03.296Z","dependency_job_id":"770fbe6d-1600-4371-af05-8e806d9a2f20","html_url":"https://github.com/dominicstop/react-native-ios-popover","commit_stats":{"total_commits":234,"total_committers":2,"mean_commits":117.0,"dds":"0.33760683760683763","last_synced_commit":"9c2ae93fd1c5cf3c110f55b6c1ffd2ca1f86746d"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/dominicstop/react-native-ios-popover","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dominicstop","download_url":"https://codeload.github.com/dominicstop/react-native-ios-popover/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-popover/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265837577,"owners_count":23836557,"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":["native-component","react-native","react-native-component"],"created_at":"2024-11-05T15:15:56.765Z","updated_at":"2025-07-18T21:32:30.368Z","avatar_url":"https://github.com/dominicstop.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-ios-popover\n\nA react native wrapper component to use the native iOS popover by wrapping a react native view inside a `UIViewController` and presenting it.\n\n\u003cdetails open\u003e\n  \u003csummary\u003eShow/Hide Gifs\u003c/summary\u003e\n\n`PopoverView` **Left**: [Example 1](#411-popoverview-example-1), [Example 2](#412-popoverview-example-2), and **Right**: [Example 3](413-popoverview-example-3), [Example 4](#414-popoverview-example-4)\n![Popover View Example 1, 2, 3 and 4](./assets/popover-view-gifs/PopoverView-Example-1-2-3-4.gif)\n\n`PopoverView` **Left**: [Example 5](#415-popoverview-example-5), [Example 6](#416-popoverview-example-6), and **Right**: [Example 7](#417-popoverview-example-7), [Example 8](#418-popoverview-example-8)\n![Popover View Example 1, 2, 3 and 4](./assets/popover-view-gifs/PopoverView-Example-5-6-7-8.gif)\n\n  \u003c/details\u003e\n\n------\n\n### 🚧⚠️ Documentation WIP 🚧⚠️\n(Check [TODO](https://github.com/dominicstop/react-native-ios-popover/blob/master/docs/TODO.md) for progress) \n\n\u003cbr\u003e\n\n## 1. Installation\n\n```sh\n# install via npm\nnpm install react-native-ios-popover\n\n# or install via yarn\nyarn add react-native-ios-popover\n\n# then run pod install (uses auto-linking)\ncd ios \u0026\u0026 pod install\n```\n\n\u003cbr\u003e\n\n### 1.1 Installation Notes\nIf you encounter any errors/bugs while using this library, or want a particular feature implemented, please create an issue!\n\n#### 1.1.1 Xcode Build Error (Swift)\nThis library is written in Swift. If you are having trouble building your app after installing this library, try adding an empty swift file:\n1. Open up your `ios/project.xcworkspace` project\n2. On the project navigator panel (located on the right side of Xcode), right click on your project group (or another folder/group i.e the blue or yellow icons) and select the \"*New File...*\" option\n3. In the popup sheet, select \"Swift\" as the template and then click the \"*Next*\" button\n4. A \"*Save As*\" popup sheet should appear and then click \"*Create*\" (you can rename the file first if you want to)\n5. If Xcode asks you to create a \"*Objective-C Bridging Header*\" choose *\"Create Objective-C Bridging Header\"*\n\n\u003cbr\u003e\n\n#### 1.1.2 Cocoapods Static Libraries Error\nIf you encounter the following error when running `pod install`:\n\n```\n[!] The following Swift pods cannot yet be integrated as static libraries:\n\nThe Swift pod `react-native-ios-popover` depends upon `React-Core`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers =\u003e true` for particular dependencies.\n```\n\n\u003cbr\u003e\n\nThen try following these steps:\n1. Open up your project's `ios/podfile` configuration\n2. Under `target 'ProjectName' do` block, find the `'React-Core'` pod, and append the following snippet to the end of the line: `, :modular_headers =\u003e true`\n3. It should now look something similar to this: `pod 'React-Core', :path =\u003e '../node_modules/react-native/', :modular_headers =\u003e true`\n4. Try running `pod install` again.\n\n\u003cbr\u003e\n\n## 2. Usage\n\nPlease check out the [examples section](#41-popoverview-examples) or the [examples directory](https://github.com/dominicstop/react-native-ios-popover/tree/master/example/src) for more on how to use it.\n\n```jsx\nimport { PopoverView } from \"react-native-ios-popover\";\n\nfunction PopoverViewExample() {\n  const popoverRef = useRef();\n\n  return (\n    \u003cPopoverView\n      ref={popoverRef}\n      renderPopoverContent={() =\u003e (\n        \u003cView style={{padding: 20}}\u003e\n          \u003cText\u003e\n            {'Popover Content'}\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n    \u003e\n      \u003cTouchableOpacity onPress={() =\u003e {\n        popoverRef.current.toggleVisibility();\n      }}\u003e\n        \u003cText\u003e\n          {'Toggle Popover Visibility'}\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/PopoverView\u003e\n  );\n};\n```\n\n\u003cbr\u003e\n\n## 3. Documentation\n### 3.1 Modules/Components\n#### `PopoverView` Props\n\n| Prop Name                         | Type                                                         | Description                                                  |\n| --------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |\n| `renderPopoverContent`            | **Required**: `Function` -\u003e `Element`                        | The elements to show in the popover. This prop accepts a function that returns an element. The element returned from this function will be shown in the popover.\u003cbr\u003e\u003cbr\u003eSee [example 1](#411-popoverview-example-1) section. |\n| `popoverSize`                     | **Optional**: `String` or  `Object: {width: number, height: number}` \u003cbr\u003e**Default**: `INHERIT` | Controls the size the of the popover.\u003cbr\u003e\u003cbr\u003eThis prop accepts either  a `String` value ( i.e. a  `PopoverSize` enum item e.g. `INHERIT`, `STRETCH` sring) or a \"size\" object (i.e. an object with a `height` and/or `width` property).\u003cbr/\u003e\u003cbr/\u003eIf you provide a size object (e.g. `{width: 100, height: 100}`) then that object will be used for setting the size of the popover.\u003cbr\u003e\u003cbr\u003eSee [example 3](#413-popoverview-example-3) section. |\n| `popoverBackgroundColor`          | **Optional**: `String`\u003cbr\u003e**Default**: `transparent`         | Sets the background color of the popover.\u003cbr\u003e\u003cbr\u003eSee [example 4](#414-popoverview-example-4) section. |\n| `permittedArrowDirections`        | **Optional**: `[String]`\u003cbr/\u003e**Default**: `[\"any\"]`          | Sets the arrow directions that you allow for the popover. \u003cbr\u003e\u003cbr\u003eAccept an array of 0 or more string values, i.e. an array of `ArrowDirections` enum items (e.g. `up`, `down`, etc.)\u003cbr/\u003e\u003cbr/\u003eNote If you pass in an empty array, then there will be no arrow shown.\u003cbr\u003e\u003cbr\u003eSee [example 2](#412-popoverview-example-2) section. |\n| `lazyPopover`                     | **Optional**: `Bool`\u003cbr/\u003e**Default**: `true`                 | Controls whether or not the popover content is always mounted. If set to `true` the popover content will only be mounted while the popover is visible.\u003cbr/\u003e\u003cbr/\u003eSet this to `false` to prevent the popover from closing. |\n| `popoverShouldDismiss`            | **Optional**: `Bool`\u003cbr/\u003e**Default**: `true`                 | Controls whether or not a tap outside the popover will dismiss it.\u003cbr\u003e\u003cbr\u003eSee [example 7](#417-popoverview-example-7) section. |\n| `popoverCanOverlapSourceViewRect` | **Optional**: `Bool`\u003cbr/\u003e**Default**: `false`                | Controls whether the popover can overlap its source view. If set to `false` the popover will avoid covering up the source view.\u003cbr/\u003e\u003cbr/\u003eSee [example 3](#413-popoverview-example-3) section. |\n\u003cbr\u003e\n\n##### `PopoverView` Events\n\n| Event Name                     | Description                                                  |\n| ------------------------------ | ------------------------------------------------------------ |\n| `onPopoverDidShow`             | Event that gets called **after** the popover is shown, i.e. this event is invoked after the popover entrance animation is finished. |\n| `onPopoverDidHide`             | Event that gets called **after** the popover is hidden, i.e. this event is invoked after the popover exit animation is finished. |\n| `onPopoverWillShow`            | Event that gets called **before** the popover is shown, i.e. this event is immediently invoked when the popover is about to become visible. |\n| `onPopoverWillHide`            | Event that gets called **before** the popover is hidden, i.e. this event is immediently invoked when the popover is about to become hidden. |\n| `onPopoverDidHideViaTap`       | Event that gets called **before** the popover is hidden due to a tap outside the popover's content, i.e. this event is immediently invoked when the popover is about to become hidden. |\n| `onPopoverWillHideViaTap`      | Event that gets called **after** the popover is hidden due to a tap outside the popover's content, i.e. this event is invoked after the popover exit animation is finished. |\n| `onPopoverDidAttemptToDismiss` | This event is invoked when the `popoverShouldDismiss` prop is set to `false`, and a tap outside the popover's content is initiated to dismiss the popover. |\n\n\u003cbr\u003e\n\n##### `PopoverView` Functions\n\n| Function Name                         | Description                                                  |\n| ------------------------------------- | ------------------------------------------------------------ |\n| **async** `setVisibility(boolean)`    | A function that you can call to set whether or not the popover is shown or hidden.\u003cbr\u003eThis function returns a promise that gets resolved when the popover is successfully shown or hidden. This function throws an error if the popover is already hidden or shown.\u003cbr/\u003e\u003cbr/\u003eSee [Example 1](#411-popoverview-example-1) section |\n| **async** `toggleVisibility()`        | A function that you can call to toggle the popover's visibility.\u003cbr/\u003eThis function returns a promise that gets resolved when the popover is successfully shown or hidden.\u003cbr\u003e\u003cbr\u003e |\n| **async** `getVisibility()` -\u003e `Bool` | A function to query whether or not the popover is visible. Returrns a promise that resolves to a boolean value. |\n\u003cbr\u003e\n\n### 3.2 Enum Values\n#### 3.2.1 `PopoverSize` Enum\n\nThis enum is used to for the `PopoverView`'s `popoverSize` prop. Use this enum to control the size of the popover.\n\n- Import the enum like this: `import { PopoverSize } from \"react-native-ios-popover\";`\n\n- And use it like this: `{ popoverSize: PopoverSize.STRETCH }`\n\n- Or you can directly pass a string like this: `{ popoverSize: 'STRETCH' }`\n\n  \n\n| Value     | Description                                                  |\n| --------- | ------------------------------------------------------------ |\n| `INHERIT` | The default value. Specifies that the popover's size should match the view you return from `PopoverView.renderPopoverContent` prop. It will automatically resize/scale the popover to fit the screen. |\n| `STRETCH` | Specifies that we want the popover to be as big as possible, i.e. the popover should to stretch and fill up the screen. |\n\n\u003cbr\u003e\n\n#### 3.2.2 `ArrowDirections` Enum\n\nThis enum is used to for the `PopoverView`'s `permittedArrowDirections` prop. This enum corresponds to the `UIPopoverArrowDirection` swift struct, check out the [apple docs](https://developer.apple.com/documentation/uikit/uipopoverarrowdirection) for more info.\n\n- Import the enum like this: `import { ArrowDirections  } from \"react-native-ios-popover\";`\n- And use it like this: `{ permittedArrowDirections: [ArrowDirections.up] }`\n- Or you can directly pass a string like this: `{ permittedArrowDirections: ['up'] }`\n\n| Value     | Description                                                  |\n| --------- | ------------------------------------------------------------ |\n| `up`      | An arrow that points upward. The popover will appear at the bottom with the arrow pointing up. |\n| `down`    | An arrow that points downward. The popover will appear at the top with the arrow pointing down. |\n| `left`    | An arrow that points toward the left. The popover will appear at the right with the arrow pointing left. |\n| `right`   | An arrow that points toward the right. The popover will appear at the left with the arrow pointing right. |\n| `any`     | An arrow that points in any direction.                       |\n| `unknown` | The status of the arrow is currently unknown.                |\n\u003cbr\u003e\n\n## 4 Examples\nCheck out the [examples directory](https://github.com/dominicstop/react-native-ios-popover/tree/master/example). The example app contains a bunch of demos that showcases the different `PopoverView` configurations, props and events you can use. The [assets directory](https://github.com/dominicstop/react-native-ios-popover/tree/master/assets) contains gifs and screenshots for every example/test shown in the example app.\n* Note: the section title on each example contains a link to the corresponding example code.\n1. Clone the repository: `git clone https://github.com/dominicstop/react-native-ios-popover.git`\n2. `cd react-native-ios-popover \u0026\u0026 yarn bootstrap`\n3. Go to the `react-native-ios-context-popover/example` directory and run `yarn ios` to build/launch the example app in the iOS simulator.\n### 4.1 `PopoverView` Examples\n#### 4.1.1 `PopoverView` [Example #1](https://github.com/dominicstop/react-native-ios-popover/blob/master/example/src/components/PopoverViewExample01.js)\n\nA bare minimum example showing how to present a popover via the `setVisibility` function.\n\n\u003cbr\u003e\n\n```jsx\nfunction PopoverViewExample01() {\n  const popoverRef = useRef();\n\n  return (\n    \u003cPopoverView\n      // get/store a ref to the popover component\n      ref={popoverRef}\n      // a function that returns the content to show\n      // inside the popover\n      renderPopoverContent={() =\u003e (\n        \u003cView style={{padding: 20}}\u003e\n          \u003cText\u003e\n            {'Popover Content'}\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n    \u003e\n      \u003cTouchableOpacity onPress={() =\u003e {\n        // show the popover when the button is pressed\n        // alt. you can call `toggleVisibility` to show/hide the popover\n        popoverRef.current.setVisibility(true);\n      }}\u003e\n        \u003cText\u003e\n          {'Show Popover'}\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/PopoverView\u003e\n  );\n};\n```\n\n![PopoverViewExample01](./assets/example-screenshots/PopoverViewExample01.png)\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### 4.1.2 `PopoverView` [Example #2](https://github.com/dominicstop/react-native-ios-popover/blob/master/example/src/components/PopoverViewExample02.js)\n\nA example `PopoverView` for the `permittedArrowDirections` prop. \n\n* This prop accepts an array of `ArrowDirections` string values (e.g: 'up', 'down', etc). You can also pass in an empty array or null to specify that the popover should not have an arrow.\n* The popover position and sizing will automatically adapt based on the `permittedArrowDirections`.\n\n\u003cbr\u003e\n\n```jsx\nfunction PopoverViewExample02() {\n  const popoverRef = useRef();\n  \n  return(\n    \u003cPopoverView\n      ref={popoverRef}\n      // the allowed direction of the popover arrow.\n      // accepts an array of `ArrowDirections` values,\n      // e.g. \"up\", \"down\", etc.\n      permittedArrowDirections={[\"left\"]}\n      renderPopoverContent={() =\u003e (\n        \u003cView style={{padding: 20}}\u003e\n          \u003cText\u003e\n            {'Left Arrow'}\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n      \u003e\n      \u003cTouchableOpacity onPress={() =\u003e {\n        popoverRef.current.setVisibility(true);\n      }}\u003e\n        \u003cText\u003e\n          {'Show Popover'}\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/PopoverView\u003e\n  );\n};\n```\n\n![PopoverViewExample01](./assets/example-screenshots/PopoverViewExample02.png)\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### 4.1.3 `PopoverView` [Example #3](https://github.com/dominicstop/react-native-ios-popover/blob/master/example/src/components/PopoverViewExample03.js)\n\nA example `PopoverView` with the `popoverSize` prop set to \"STRETCH\". \n\n* By default, the `popoverSize` prop is set to `INHERIT` which means the size of the popover is determined by the size of the popover content.\n* However, if you set the prop  to `STRETCH`, the popover will be sized to be as big as possible based on the `permittedArrowDirections` prop, its position on screen, etc. \n\n\u003cbr\u003e\n\n```jsx\nfunction PopoverViewExample03() {\n  const popoverRef = useRef();\n\n  return(\n    \u003cPopoverView\n      ref={popoverRef}\n      // set the `popoverSize` prop to `STRETCH` to make the\n      // popover as big as possible.\n      popoverSize={'STRETCH'}\n      // You also have to set `popoverCanOverlapSourceViewRect`\n      // prop to false to prevent the popover from covering up\n      // the popover source view.\n      popoverCanOverlapSourceViewRect={false}\n      permittedArrowDirections={[\"up\", \"down\"]}\n      // the style of the root popover content view must be set\n      // to `{flex: 1}` so that it'll stretch to the size of the\n      // popover.\n      renderPopoverContent={() =\u003e (\n        \u003cView style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}\u003e\n          \u003cText\u003e\n            {'Popover Content'}\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n    \u003e\n      \u003cTouchableOpacity onPress={() =\u003e {\n        popoverRef.current.setVisibility(true);\n      }}\u003e\n        \u003cText\u003e\n          {'Show Popover'}\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/PopoverView\u003e\n  );\n};\n```\n\n![PopoverViewExample01](./assets/example-screenshots/PopoverViewExample03.png)\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### 4.1.4 `PopoverView` [Example #4](https://github.com/dominicstop/react-native-ios-popover/blob/master/example/src/components/PopoverViewExample04.js)\n\nA example `PopoverView` with the `popoverBackgroundColor` prop set to \"pink\". By default, the `PopoverView` has a transparent background with a blur effect.\n\n\u003cbr\u003e\n\n```jsx\nfunction PopoverViewExample04(props) {\n  const popoverRef = useRef();\n\n  return (\n    \u003cPopoverView\n      ref={popoverRef}\n      // pass in a valid color value\n      popoverBackgroundColor={'pink'}\n      renderPopoverContent={() =\u003e (\n        \u003cView style={{padding: 20}}\u003e\n          \u003cText\u003e\n            {'Popover Content'}\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n    \u003e\n      \u003cTouchableOpacity onPress={() =\u003e {\n        popoverRef.current.setVisibility(true);\n      }}\u003e\n        \u003cText\u003e\n          {'Show Popover'}\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/PopoverView\u003e\n  );\n};\n```\n\n![PopoverViewExample01](./assets/example-screenshots/PopoverViewExample04.png)\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### 4.1.5 `PopoverView` [Example #5](https://github.com/dominicstop/react-native-ios-popover/blob/master/example/src/components/PopoverViewExample05.js)\n\nA example `PopoverView` for programmatically hiding the popover via the `setVisibility` function.\n\n* The `setVisibility(bool)` function will throw an error if it's already visible or hidden.\n\n\u003cbr\u003e\n\n```jsx\nfunction PopoverViewExample05(props) {\n  const popoverRef = useRef();\n\n  return (\n    \u003cPopoverView\n      ref={popoverRef}\n      onPopoverDidHideViaTap={() =\u003e alert('onPopoverDidHideViaTap')}\n      renderPopoverContent={() =\u003e (\n        \u003cView style={{padding: 20}}\u003e\n          \u003cTouchableOpacity onPress={() =\u003e {\n            // hide the popover\n            popoverRef.current.setVisibility(false);\n          }}\u003e\n            \u003cText\u003e\n              {'Dismiss Popover'}\n            \u003c/Text\u003e\n          \u003c/TouchableOpacity\u003e\n        \u003c/View\u003e\n      )}\n    \u003e\n      \u003cTouchableOpacity onPress={() =\u003e {\n        // toggle popover visibility\n        popoverRef.current.toggleVisibility();\n      }}\u003e\n        \u003cText\u003e\n          {'Toggle Popover'}\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/PopoverView\u003e\n  );\n};\n```\n\n![PopoverViewExample01](./assets/example-screenshots/PopoverViewExample05.png)\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### 4.1.6 `PopoverView` [Example #6](https://github.com/dominicstop/react-native-ios-popover/blob/master/example/src/components/PopoverViewExample06.js)\n\nA simple `PopoverView` example for the popover did show/hide events.\n\n\u003cbr\u003e\n\n```jsx\nfunction PopoverViewExample06(props) {\n  const popoverRef = useRef();\n\n  return(\n    \u003cPopoverView\n      ref={popoverRef}\n      // popover events\n      onPopoverDidHide={() =\u003e alert('onPopoverDidHide')}\n      onPopoverDidShow={() =\u003e alert('onPopoverDidShow')}\n      renderPopoverContent={() =\u003e (\n        \u003cView style={{padding: 20}}\u003e\n          \u003cText style={styles.popoverText}\u003e\n            {'Popover Content'}\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n    \u003e\n      \u003cTouchableOpacity onPress={() =\u003e {\n        popoverRef.current.setVisibility();\n      }}\u003e\n        \u003cText\u003e\n          {'Toggle Popover'}\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/PopoverView\u003e\n  );\n};\n```\n\n![PopoverViewExample01](./assets/example-screenshots/PopoverViewExample06.png)\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### 4.1.7 `PopoverView` [Example #7](https://github.com/dominicstop/react-native-ios-popover/blob/master/example/src/components/PopoverViewExample07.js)\n\nA example `PopoverView` that has a switch that toggles the `popoverShouldDismiss` prop.\n\n* The `onPopoverDidAttemptToDismiss` prop is set to `true` by default. This prop controls whether or not the popover should dismiss when there's a tap gesture outside the popover.\n* So setting the `onPopoverDidAttemptToDismiss` to `false` will prevent the popover from dismissing via a tap outside the popover.\n\n\u003cbr\u003e\n\n```jsx\nfunction PopoverViewExample07(props) {\n  const popoverRef = useRef();\n  \n  const [isEnabled, setIsEnabled] = useState(false);\n  // toggle `popoverShouldDismiss`\n  const toggleSwitch = () =\u003e setIsEnabled(previousState =\u003e !previousState);\n\n  return(\n    \u003cPopoverView\n      ref={popoverRef}\n      // set the `popoverShouldDismiss` prop\n      popoverShouldDismiss={isEnabled}\n      onPopoverDidAttemptToDismiss={() =\u003e alert('onPopoverDidAttemptToDismiss')}\n      renderPopoverContent={() =\u003e (\n        \u003cView\u003e\n          \u003cText\u003e\n            {'popoverShouldDismiss'}\n          \u003c/Text\u003e\n          \u003cSwitch\n            onValueChange={toggleSwitch}\n            value={isEnabled}\n          /\u003e\n        \u003c/View\u003e\n      )}\n    \u003e\n      \u003cTouchableOpacity onPress={() =\u003e {\n        popoverRef.current.setVisibility(true);\n      }}\u003e\n        \u003cText\u003e\n          {'Show Popover'}\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/PopoverView\u003e\n  );\n};\n```\n\n![PopoverViewExample01](./assets/example-screenshots/PopoverViewExample07.png)\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### 4.1.8 `PopoverView` [Example #8](https://github.com/dominicstop/react-native-ios-popover/blob/master/example/src/components/PopoverViewExample08.js)\n\nA example `PopoverView` for the `toggleVisibility` function.\n\n\u003cbr\u003e\n\n```jsx\nfunction PopoverViewExample08(props) {\n  const popoverRef = useRef();\n\n  return(\n    \u003cPopoverView\n      ref={popoverRef}\n      popoverShouldDismiss={false}\n      renderPopoverContent={() =\u003e (\n        \u003cView style={{padding: 20}}\u003e\n          \u003cText\u003e\n            {'Popover Content'}\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n    \u003e\n      \u003cTouchableOpacity onPress={() =\u003e {\n        // toggle the popover visibility\n        popoverRef.current.toggleVisibility();\n      }}\u003e\n        \u003cText\u003e\n          {'Toggle Popover'}\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/PopoverView\u003e\n  );\n};\n```\n\n![PopoverViewExample01](./assets/example-screenshots/PopoverViewExample08.png)\n\n\u003cbr\u003e\u003cbr\u003e\n\n## License\nMIT\n\n\u003cbr\u003e\n\n## Links\n* I'm [@DominicGo](https://twitter.com/GoDominic) on twitter if you have any questions ✨\n* Other libraries: [react-native-ios-modal](https://github.com/dominicstop/react-native-ios-modal), [react-native-ios-context-menu](https://github.com/dominicstop/react-native-ios-context-menu)\n* This library was generated/made using [@react-native-community/bob](https://github.com/callstack/react-native-builder-bob)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdominicstop%2Freact-native-ios-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdominicstop%2Freact-native-ios-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdominicstop%2Freact-native-ios-popover/lists"}