npmpackage.info

Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-modal-popover

Other packages similar to @react-native-oh-tpl/react-native-modal-popover

@react-native-oh-tpl/react-native-popover-view

5.1.7-0.0.2

A <Popover /> component for react-native iOS, Android, and Web

@react-native-oh-tpl/react-native-root-modal

5.0.0-0.0.1

react native modal component

Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-modal-popover

@react-native-oh-tpl/react-native-modal-popover - 2.1.3-0.0.1 | npmpackage.info

@react-native-oh-tpl/react-native-modal-popover

React-Native pure JS popover that uses Modal

2.1.3-0.0.1

322

MIT

TypeScript

41.26 kB

2.5

Installations

npm install @react-native-oh-tpl/react-native-modal-popover

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.11.0

NPM Version

10.2.4 Pull Requests

Open

2

Total

53

Closed

47

Merged

4

Issues

Open

23

Total

54

Closed

31

Releases

v2.1.3

Updated on Dec 30, 2022

v2.1.0

Updated on Aug 24, 2021

v2.0.1

Updated on Jun 04, 2021

v2.0.0

Updated on Apr 25, 2021

v1.0.0

Updated on Nov 22, 2020

View All 5 releases

Languages

TypeScript

Java

Objective-C

JavaScript

Ruby

Starlark

Shell

TypeScript (70.3%)

Java (13.51%)

Objective-C (9.79%)

JavaScript (3.17%)

Ruby (1.59%)

Starlark (1.31%)

Shell (0.32%)

Developer

doomsower

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

322 Stars

60 Commits

45 Forks

3 Watchers

3 Branches

5 Contributors

Updated on Mar 28, 2025

Maintainers

View All 5 Contributors

Package Meta Information

Latest Version

2.1.3-0.0.1

Package Id

@react-native-oh-tpl/react-native-modal-popover@2.1.3-0.0.1

Unpacked Size

41.26 kB

Size

9.55 kB

File Count

NPM Version

10.2.4

Node Version

20.11.0

Published on

Oct 31, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

react-native-modal-popover

Pure JS popover component for react-native

Android iOS

About this module

The original react-native-popover is now outdated, so I decided to publish my own module to avoid using github url in my package.json. Something got lost in the process of rewriting, but now it uses Modal and native animation drivers, and also has cool helper to use with Touchables. Thanks to @jeanregisser and to the authors of hanging PRs for their code.

Requirements

Previously (version 0.0.6) this module required react version >16.2.0 to work (which corresponds to react-native version >0.52.0).

Version 0.0.7 does not reqire React.Fragment anymore, so you can use with reasonably old versions of react and react-native.

Install

1yarn add react-native-modal-popover

Usage

This module exports two react components, Popover and PopoverController, and one react hook, usePopover. Popover works pretty much like original Popover, and PopoverController is a convenience component that uses React Render Props pattern.

Important this example uses React.Fragment to wrap children, but if you use react-native version older than 0.52, then you should reaplce React.Fragment with View

Using hook

usePopover is preferred modern way to have popover in your app.

1import React from 'react';
2import { Button, StyleSheet, Text, View } from 'react-native';
3import { Popover, usePopover } from 'react-native-modal-popover';
4
5const styles = StyleSheet.create({
6  app: {
7    ...StyleSheet.absoluteFillObject,
8    alignItems: 'center',
9    justifyContent: 'center',
10    backgroundColor: '#c2ffd2',
11  },
12  content: {
13    padding: 16,
14    backgroundColor: 'pink',
15    borderRadius: 8,
16  },
17  arrow: {
18    borderTopColor: 'pink',
19  },
20  background: {
21    backgroundColor: 'rgba(0, 0, 255, 0.5)',
22  },
23});
24
25const App = () => {
26  const {
27    openPopover,
28    closePopover,
29    popoverVisible,
30    touchableRef,
31    popoverAnchorRect,
32  } = usePopover();
33  return (
34    <View style={styles.app}>
35      <Button title="Press me!" ref={touchableRef} onPress={openPopover} />
36      <Popover
37        contentStyle={styles.content}
38        arrowStyle={styles.arrow}
39        backgroundStyle={styles.background}
40        visible={popoverVisible}
41        onClose={closePopover}
42        fromRect={popoverAnchorRect}
43        supportedOrientations={['portrait', 'landscape']}>
44        <Text>Hello from inside popover!</Text>
45      </Popover>
46    </View>
47  );
48};
49
50export default App;

Using PopoverController

Use PopoverController if you cannot use hooks for some reason.

1import React from 'react';
2import { Button, StyleSheet, Text, View } from 'react-native';
3import { Popover, PopoverController } from 'react-native-modal-popover';
4
5const styles = StyleSheet.create({
6  app: {
7    ...StyleSheet.absoluteFillObject,
8    alignItems: 'center',
9    justifyContent: 'center',
10    backgroundColor: '#c2ffd2',
11  },
12  content: {
13    padding: 16,
14    backgroundColor: 'pink',
15    borderRadius: 8,
16  },
17  arrow: {
18    borderTopColor: 'pink',
19  },
20  background: {
21    backgroundColor: 'rgba(0, 0, 255, 0.5)',
22  },
23});
24
25const App = () => (
26  <View style={styles.app}>
27    <PopoverController>
28      {({
29        openPopover,
30        closePopover,
31        popoverVisible,
32        setPopoverAnchor,
33        popoverAnchorRect,
34      }) => (
35        <React.Fragment>
36          <Button
37            title="Press me!"
38            ref={setPopoverAnchor}
39            onPress={openPopover}
40          />
41          <Popover
42            contentStyle={styles.content}
43            arrowStyle={styles.arrow}
44            backgroundStyle={styles.background}
45            visible={popoverVisible}
46            onClose={closePopover}
47            fromRect={popoverAnchorRect}
48            supportedOrientations={['portrait', 'landscape']}>
49            <Text>Hello from inside popover!</Text>
50          </Popover>
51        </React.Fragment>
52      )}
53    </PopoverController>
54  </View>
55);
56
57export default App;

Props

`Popover`

Prop	Type	Optional	Default	Description
visible	bool	Yes	false	Show/Hide the popover
fromRect	Rect	No*		Rectangle at which to anchor the popover. Optional when used inside `PopoverTouchable`, required when used standalone. If you set this property, you should also change it when screen orientation changes.
displayArea	Rect	Yes	Screen - 10px padding	Area where the popover is allowed to be displayed. Important note: if you use non-default value here and you want to handle screen orientation changes, it is your responsibility to change this value when screen orientation changes.
placement	string	Yes	'auto'	How to position the popover - top \| bottom \| start \| end \| auto. When 'auto' is specified, it will determine the ideal placement so that the popover is fully visible within `displayArea`.
onClose	function	Yes		Callback to be fired when the user closes the popover
onDismiss	function	Yes		Callback to be fired after the popup closes
backgroundStyle	ViewStyle	Yes		Custom style to be applied to background overlay
contentStyle	ViewStyle	Yes		Custom style to be applied to popover reactangle. Use it to set round corners, background color, etc.
arrowStyle	ViewStyle	Yes		Custom style to be applied to popover arrow. Use `borderTopColor` to match content backgroundColor
duration	number	Yes	300	Animation duration
easing	(show: boolean) => (value: number) => number	Yes	show => show ? Easing.out(Easing.back(1.70158)) : Easing.inOut(Easing.quad)	Function that returns easing function for show or hide animation, depending on `show` argument
useNativeDriver	bool	Yes	false	Defines if animations should use native driver
supportedOrientations	array of enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')	Yes		This prop is passed to react-native `Modal`, see react-native docs. Set this to `['portrait', 'landscape']` if you want your popover to resprect screen orientation.
calculateStatusBar	bool	Yes	false	Defines if while use status bar height while calculating "Y" origin of anchor.

`PopoverController` and `usePopover` hook

PopoverController accepts function as children. This function is called with one argument of type PopoverControllerRenderProps and returns react element. The children of this element are your UI handle to open popover (Button, Toggle, whatever) and Popover element itself. Pass properties to you handle and Popover, and PopoverController will make them work together behind the scenes. All the props are required to make controller work.

usePopover returns object with same props as PopoverControllerRenderProps, except that ref has different name: touchableRef.

`PopoverControllerRenderProps`:

Prop	Type	Description
openPopover	() => void	Call this function when you want to open popover, e.g. pass to `onPress` of a `Button`
closePopover	() => void	Call this function when you want to close popover. Typically you pass this as `onClose` prop of `Popover`, which will make popover close when tapped outside. If you have a button inside popover which should close the popover, pass this function to this button.
popoverVisible	boolean	Pass this to `visible` prop of `Popover` component
setPopoverAnchor (`PopoverController`) / touchableRef (`usePopover`)	ref function	Pass this as `ref` to popover UI handle. This will bind popover display position to the position of this UI handle.
popoverAnchorRect	Rect	Pass this as `fromRect` prop of `Popover` component

`Rect`

Rect is an object with the following properties: {x: number, y: number, width: number, height: number}

Using without `PopoverController`

In this case you have to handle refs, measure UI handle and manage popover visibility manually:

1import React from 'react';
2import {
3  findNodeHandle,
4  NativeModules,
5  StyleSheet,
6  Text,
7  View,
8} from 'react-native';
9import Button from './Button';
10import Popover from './popover';
11
12const styles = StyleSheet.create({
13  app: {
14    ...StyleSheet.absoluteFillObject,
15    padding: 10,
16    backgroundColor: '#c2ffd2',
17    alignItems: 'center',
18  },
19});
20
21export default class App2 extends React.Component {
22  state = {
23    showPopover: false,
24    popoverAnchor: { x: 0, y: 0, width: 0, height: 0 },
25  };
26
27  setButton = (e) => {
28    const handle = findNodeHandle(this.button);
29    if (handle) {
30      NativeModules.UIManager.measure(handle, (x0, y0, width, height, x, y) => {
31        this.setState({ popoverAnchor: { x, y, width, height } });
32      });
33    }
34  };
35
36  openPopover = () => {
37    this.setState({ showPopover: true });
38  };
39
40  closePopover = () => this.setState({ showPopover: false });
41
42  render() {
43    return (
44      <View style={styles.app}>
45        <Button
46          ref={(r) => {
47            this.button = r;
48          }}
49          icon="arrow-up"
50          onPress={this.openPopover}
51          onLayout={this.setButton}
52        />
53        <Popover
54          visible={this.state.showPopover}
55          fromRect={this.state.popoverAnchor}
56          onClose={this.closePopover}
57          placement="bottom">
58          <Text>Hi</Text>
59        </Popover>
60      </View>
61    );
62  }
63}

Contributing

If you want to add some features, feel free to submit PR.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @react-native-oh-tpl/react-native-modal-popover

Other packages similar to @react-native-oh-tpl/react-native-modal-popover

@react-native-oh-tpl/react-native-modal-popover

Installations

Developer Guide

Yes

CommonJS

20.11.0

10.2.4

Pull Requests

2

53

47

4

Issues

23

54

31

Releases

Languages

Developer

doomsower

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-native-modal-popover

About this module

Requirements

Install

Usage

Using hook

Using PopoverController

Props

Popover

PopoverController and usePopover hook

PopoverControllerRenderProps:

Rect

Using without PopoverController

Contributing

10

10

9

1

0

0

0

0

0

0

0

0

0

2.5

/10

`Popover`

`PopoverController` and `usePopover` hook

`PopoverControllerRenderProps`:

`Rect`

Using without `PopoverController`