React Native Popover View

https://github.com/steffeydev/react-native-popover-view
Admin
A well-tested, adaptable, and lightweight popover component for React Native with support for iOS,...
Tokens:31,715
Snippets:190
Trust Score:8.8
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install react-native-popover-view with npm or yarn

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

Install the react-native-popover-view package using either npm or yarn. Choose one command based on your package manager.

```shell
npm i react-native-popover-view
```

```shell
yarn add react-native-popover-view
```

--------------------------------

### Custom arrow size and hidden arrow example

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Size.md

JSX example showing how to set a custom arrow size and hide the arrow entirely using the arrowSize prop on Popover.

```jsx
import React from 'react';
import Popover from 'react-native-popover-view';

// Custom arrow (wider base, deeper triangle)
<Popover
  arrowSize={{ width: 24, height: 12 }}
  from={<TouchableOpacity><Text>Open</Text></TouchableOpacity>}>
  <Text>Popover content</Text>
</Popover>

// No arrow at all
<Popover
  arrowSize={{ width: 0, height: 0 }}
  offset={4}
  from={<TouchableOpacity><Text>Open</Text></TouchableOpacity>}>
  <Text>Popover content</Text>
</Popover>
```

--------------------------------

### Programmatic comparison with Size.equals

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Size.md

JavaScript example creating Size instances and using equals to compare them, showing that rounding makes 8 and 8.4 equal.

```js
import { Size } from 'react-native-popover-view';

const a = new Size(16, 8);
const b = new Size(16, 8.4);
a.equals(b); // true — Math.round(8.4) === 8
```

--------------------------------

### Controlled Popover with manual dismiss and configuration

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

A controlled Popover example demonstrating manual visibility management, custom placement, and advanced configuration options.

```jsx
import React, { useState } from 'react';
import Popover, { PopoverMode, PopoverPlacement } from 'react-native-popover-view';

function App() {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <Popover
      mode={PopoverMode.TOOLTIP}
      placement={PopoverPlacement.TOP}
      isVisible={showPopover}
      onRequestClose={() => setShowPopover(false)}
      arrowSize={{ width: 0, height: 0 }}
      offset={4}
      animationConfig={{ duration: 600 }}
      displayAreaInsets={{ top: 20, bottom: 20 }}
      from={(
        <TouchableOpacity onPress={() => setShowPopover(true)}>
          <Text>Press here to open popover!</Text>
        </TouchableOpacity>
      )}>
      <Text>This is the contents of the popover</Text>
    </Popover>
  );
}
```

--------------------------------

### requestClose() with onRequestClose cleanup

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

Example showing how to combine requestClose with the onRequestClose prop to execute custom cleanup logic.

```jsx
<Popover
  ref={popoverRef}
  onRequestClose={() => { console.log('closing'); }}
  from={<TouchableOpacity><Text>Open</Text></TouchableOpacity>}
>
  <TouchableOpacity onPress={() => popoverRef.current.requestClose()}>
    <Text>Close</Text>
  </TouchableOpacity>
</Popover>
```

--------------------------------

### Anchored popover with plain object

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Example of using a plain object as the from prop, which is normalized to a Rect internally.

```JSX
import React, { useState } from 'react';
import Popover from 'react-native-popover-view';

function App() {
  const [showPopover, setShowPopover] = useState(false);
  return (
    <Popover
      from={{ x: 5, y: 100, width: 20, height: 40 }}
      isVisible={showPopover}
      onRequestClose={() => setShowPopover(false)}>
      <Text>Anchored to a plain rect object</Text>
    </Popover>
  );
}
```

--------------------------------

### Anchoring a popover to a point via from prop

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Point.md

Example using the from prop with a plain { x, y } object to anchor a popover at a specific coordinate. The Popover normalizes this into a zero-sized Rect.

```jsx
import React, { useState } from 'react';
import Popover from 'react-native-popover-view';

function App() {
  const [showPopover, setShowPopover] = useState(false);
  return (
    <>
      <TouchableOpacity onPress={() => setShowPopover(true)}>
        <Text>Open popover</Text>
      </TouchableOpacity>
      <Popover
        from={{ x: 100, y: 250 }}
        isVisible={showPopover}
        onRequestClose={() => setShowPopover(false)}>
        <Text>Anchored to (100, 250)</Text>
      </Popover>
    </>
  );
}
```

--------------------------------

### Anchored popover from a rectangle

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Example of using a Rect instance as the from prop for a Popover component.

```JSX
import React, { useState } from 'react';
import Popover, { Rect } from 'react-native-popover-view';

function App() {
  const [showPopover, setShowPopover] = useState(false);
  return (
    <>
      <TouchableOpacity onPress={() => setShowPopover(true)}>
        <Text>Press here to open popover!</Text>
      </TouchableOpacity>
      <Popover
        from={new Rect(5, 100, 20, 40)}
        isVisible={showPopover}
        onRequestClose={() => setShowPopover(false)}>
        <Text>This popover is pinned to the edges of the rect</Text>
      </Popover>
    </>
  );
}
```

--------------------------------

### requestClose() basic usage

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

Example of calling requestClose through a ref to close the popover from within its content.

```jsx
import React, { useRef } from 'react';
import Popover from 'react-native-popover-view';

function App() {
  const popoverRef = useRef();
  return (
    <Popover
      ref={popoverRef}
      from={(
        <TouchableOpacity>
          <Text>Press here to open popover!</Text>
        </TouchableOpacity>
      )}>
      <TouchableOpacity onPress={() => popoverRef.current.requestClose()}>
        <Text>Tap to close me</Text>
      </TouchableOpacity>
    </Popover>
  );
}
```

--------------------------------

### Popover anchored to a coordinate point

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

An example of anchoring a Popover to a specific coordinate point instead of a UI element.

```jsx
<Popover
  from={{ x: 100, y: 200 }}
  isVisible={showPopover}
  onRequestClose={() => setShowPopover(false)}>
  <Text>Anchored to a point</Text>
</Popover>
```

--------------------------------

### Show popover with manual dismiss using isVisible and onRequestClose

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

Control visibility manually with `isVisible` and `onRequestClose`. `onRequestClose` is called when the user taps outside the popover. Omit `onRequestClose` to force dismissal via a button inside the popover. This example auto-dismisses after 2 seconds.

```jsx
import React, { useState, useEffect } from 'react';
import Popover from 'react-native-popover-view';

function App() {
  const [showPopover, setShowPopover] = useState(false);

  useEffect(() => {
    setTimeout(() => setShowPopover(false), 2000);
  }, []);

  return (
    <Popover
      isVisible={showPopover}
      onRequestClose={() => setShowPopover(false)}
      from={(
        <TouchableOpacity onPress={() => setShowPopover(true)}>
          <Text>Press here to open popover!</Text>
        </TouchableOpacity>
      )}>
      <Text>This popover will be dismissed automatically after 2 seconds</Text>
    </Popover>
  );
}
```

--------------------------------

### Uncontrolled Popover anchored to a Touchable

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

An example of an uncontrolled Popover component that anchors to a Touchable element.

```jsx
import React from 'react';
import Popover from 'react-native-popover-view';

function App() {
  return (
    <Popover
      from={(
        <TouchableOpacity>
          <Text>Press here to open popover!</Text>
        </TouchableOpacity>
      )}>
      <Text>This is the contents of the popover</Text>
    </Popover>
  );
}
```

--------------------------------

### Size Constructor

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Size.md

Creates a new Size instance with width and height dimensions. Both parameters are required numbers.

```APIDOC
## Size Constructor

### Description
Creates a new Size instance with the given width and height values.

### Signature
constructor(width: number, height: number)

### Parameters
- **width** (number) - Required - Horizontal extent. For an arrow, this is the length of the base of the isosceles triangle (the edge touching the popover).
- **height** (number) - Required - Vertical extent. For an arrow, this is the distance from the popover to the source view, regardless of placement.

### Returns
A new Size instance with public mutable fields width and height.

### Example
```js
import { Size } from 'react-native-popover-view';
const size = new Size(16, 8);
```
```

--------------------------------

### constructor(x: number, y: number)

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Point.md

Creates a new Point instance with the given x and y coordinates. Both parameters are required numbers.

```APIDOC
## `constructor(x: number, y: number)`

### Description
Creates a new Point instance with the given horizontal (x) and vertical (y) coordinates. The fields are public and mutable.

### Parameters
- **x** (number) - Required - Horizontal coordinate.
- **y** (number) - Required - Vertical coordinate.

### Returns
A new Point instance with public mutable fields `x` and `y`.

### Example
```js
import { Point } from 'react-native-popover-view/dist/Types';

const point = new Point(100, 250);
```
```

--------------------------------

### Public package entry point

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/overview.md

The contents of src/index.ts, which serves as the primary entry point for the package.

```ts
export { default } from './Popover';
export { Placement as PopoverPlacement, Mode as PopoverMode } from './Types';
export { Rect, Size } from './Types';
```

--------------------------------

### constructor(x: number, y: number, width: number, height: number)

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Creates a new Rect instance with the given x, y, width, and height. The fields are public and mutable.

```APIDOC
## constructor(x: number, y: number, width: number, height: number)

### Description
Creates a new Rect instance with the given x, y, width, and height. The fields are public and mutable.

### Parameters
- **x** (number) - Required - Left edge of the rectangle.
- **y** (number) - Required - Top edge of the rectangle.
- **width** (number) - Required - Rectangle width. A Rect with width: 0 is valid and is treated as a point anchor (x, y) by Popover.
- **height** (number) - Required - Rectangle height. A Rect with height: 0 is valid and is treated as a point anchor.

### Returns
A new Rect instance with public mutable fields x, y, width, height.
```

--------------------------------

### Size constructor signature

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Size.md

Shows the constructor signature for Size, taking width and height numbers.

```ts
constructor(width: number, height: number)
```

--------------------------------

### Direct Point construction and equals comparison

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Point.md

Shows direct construction of Point instances and the equals method rounding behavior: 250.4 and 250.5 both round to 250, so equals returns true.

```js
import { Point } from 'react-native-popover-view/dist/Types';

const a = new Point(100, 250.4);
const b = new Point(100, 250.5);
a.equals(b); // true — Math.round(250.4) === Math.round(250.5) === 250
```

--------------------------------

### Size equals method signature

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Size.md

Shows the equals method signature for Size, comparing with another Size.

```ts
equals(b: Size): boolean
```

--------------------------------

### Point constructor signature

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Point.md

Constructor signature for Point, taking x and y coordinates.

```ts
constructor(x: number, y: number)
```

--------------------------------

### Comparison behavior of equals and clone

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Shows how equals rounds fields and clone creates a new Rect with the same values.

```JavaScript
const a = new Rect(0.4, 1, 10, 10);
const b = new Rect(0.5, 1, 10, 10);
a.equals(b); // true — rounded fields, 0.4 and 0.5 both round to 0
Rect.clone(a); // new Rect(0.4, 1, 10, 10)
```

--------------------------------

### Import Size from react-native-popover-view

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Size.md

Imports the Size class from the package entry point.

```ts
import { Size } from 'react-native-popover-view';
```

--------------------------------

### Import Rect from react-native-popover-view

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Import the Rect class from the package entry point.

```TypeScript
import { Rect } from 'react-native-popover-view';
```

--------------------------------

### Use class component with ref for popover

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

Use this when you are using class components instead of functional components and hooks. It shows how to use a ref with the from prop, which is slightly different when using class components.

```jsx
import React, { createRef } from 'react';
import Popover from 'react-native-popover-view';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.touchable = createRef();
    this.state = {
      showPopover: false
    }
  }

  render() {
    return (
      <>
        <TouchableOpacity ref={this.touchable} onPress={() => this.setState({ showPopover: true })}>
          <Text>Press here to open popover!</Text>
        </TouchableOpacity>
        <Popover
          from={this.touchable}
          isVisible={this.state.showPopover}
          onRequestClose={() => this.setState({ showPopover: false })}>
          <Text>This is the contents of the popover</Text>
        </Popover>
      </>
    );
  }
}
```

--------------------------------

### Point equals method signature

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Point.md

Method signature for equals, which compares two Point instances after rounding.

```ts
equals(b: Point): boolean
```

--------------------------------

### Placement (PopoverPlacement)

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Enum defining possible popover placements. It is re-exported as PopoverPlacement and accepted by PopoverProps['placement'] and other internal types.

```APIDOC
## Placement (PopoverPlacement)

### Description
Enum defining possible popover placements. It is re-exported as PopoverPlacement and accepted by PopoverProps['placement'] and other internal types.

### Members
- TOP (value: 'top') - Popover rendered above the source (arrow at the bottom edge of the popover).
- RIGHT (value: 'right') - Popover rendered to the right of the source.
- BOTTOM (value: 'bottom') - Popover rendered below the source.
- LEFT (value: 'left') - Popover rendered to the left of the source.
- AUTO (value: 'auto') - Best-fit placement computed from the available space (calculateBestPlacements ranks sides by remaining extraSpace).
- FLOATING (value: 'floating') - Popover centered on the display area, unanchored, no arrow.
- CENTER (value: 'center') - Deprecated. Popover converts it to FLOATING before rendering.

### Source Definition
```ts
export enum Placement {
  TOP = 'top',
  RIGHT = 'right',
  BOTTOM = 'bottom',
  LEFT = 'left',
  AUTO = 'auto',
  FLOATING = 'floating',
  // deprecated
  CENTER = 'center'
}
```

### Accepted By
- PopoverProps['placement'] (Placement | Array<Placement>)
- PublicPopoverProps['placement']
- ComputeGeometryProps['placement']
- Geometry['placement']
- ArrowProps['placement']
- getArrowSize(placement, ...) in src/Utility.ts

When an array is passed, Popover/computeGeometry picks the first member that fits.
```

--------------------------------

### Show popover from a predetermined Rect position

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

Use this when you know the exact screen coordinates for the popover anchor. Create a Rect(x, y, width, height) object and pass it to the from prop. Note that Rect(x, y, 0, 0) is equivalent to showing from the point (x, y).

```jsx
import React, { useState } from 'react';
import Popover, { Rect } from 'react-native-popover-view';

function App() {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <>
      <TouchableOpacity onPress={() => setShowPopover(true)}>
        <Text>Press here to open popover!</Text>
      </TouchableOpacity>
      <Popover from={new Rect(5, 100, 20, 40)} isVisible={showPopover} onRequestClose={() => setShowPopover(false)}>
        <Text>This is the contents of the popover</Text>
      </Popover>
    </>
  );
}
```

--------------------------------

### Show popover as a tooltip with PopoverMode.TOOLTIP

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

Use this to show a tooltip without dimming the background. Set mode={PopoverMode.TOOLTIP} and control visibility manually; onRequestClose will never be called in this mode.

```jsx
import React, { useRef, useState } from 'react';
import Popover, { PopoverMode, PopoverPlacement } from 'react-native-popover-view';

function App() {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <Popover
      mode={PopoverMode.TOOLTIP}
      placement={PopoverPlacement.TOP}
      isVisible={showPopover}
      from={(
        <TouchableOpacity onPress={() => setShowPopover(true)}>
          <Text>Press here to open popover!</Text>
        </TouchableOpacity>
      )}>
      <>
        <Text>This is the contents of the popover</Text>
        <TouchableOpacity onPress={() => setShowPopover(false)}>
          <Text>Dismiss</Text>
        </TouchableOpacity>
      </>
    </Popover>
  );
}
```

--------------------------------

### Rect constructor signature

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Constructor signature for Rect, taking x, y, width, height as numbers.

```TypeScript
constructor(x: number, y: number, width: number, height: number)
```

--------------------------------

### Show popover from an element with sourceRef and showPopover

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

Advanced usage: pass a function that returns any React element. Use `sourceRef` to anchor the popover to a specific element and `showPopover` to control when it appears. Here the popover originates from the text inside the Touchable and only shows on long press.

```jsx
import React from 'react';
import Popover from 'react-native-popover-view';

function App() {
  return (
    <Popover
      from={(sourceRef, showPopover) => (
        <View>
          <TouchableOpacity onLongPress={showPopover}>
            <Text ref={sourceRef}>Press here to open popover!</Text>
          </TouchableOpacity>
        </View>
      )}>
      <Text>This is the contents of the popover</Text>
    </Popover>
  );
}
```

--------------------------------

### Size class definition (src/Types.ts:76)

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Size.md

Defines the Size class with width and height fields, a constructor, and an equals method that compares rounded values.

```ts
// src/Types.ts:76
export class Size {
  width: number;
  height: number;
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  equals(b: Size): boolean {
    return Math.round(this.width) === Math.round(b.width) &&
      Math.round(this.height) === Math.round(b.height);
  }
}
```

--------------------------------

### Size.equals(b: Size): boolean

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Size.md

Compares two Size instances for equality after rounding both dimensions with Math.round. Returns true if both width and height match after rounding.

```APIDOC
## Size.equals(b: Size): boolean

### Description
Returns true when both dimensions match after rounding with Math.round.

### Signature
equals(b: Size): boolean

### Parameters
- **b** (Size) - Required - The Size instance to compare against.

### Returns
boolean - true if both width and height match after rounding, false otherwise.

### Example
```js
import { Size } from 'react-native-popover-view';
const a = new Size(16, 8);
const b = new Size(16, 8.4);
a.equals(b); // true — Math.round(8.4) === 8
```
```

--------------------------------

### Import Popover from react-native-popover-view

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

Imports the default Popover component from the package.

```typescript
import Popover from 'react-native-popover-view';
```

--------------------------------

### Show popover from a ref to an element

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

Pass a normal ref to the `from` prop when the Popover and Touchable are in completely different parts of the node hierarchy. Use `isVisible` and `onRequestClose` to control visibility.

```jsx
import React, { useRef, useState } from 'react';
import Popover from 'react-native-popover-view';

function App() {
  const touchable = useRef();
  const [showPopover, setShowPopover] = useState(false);

  return (
    <>
      <TouchableOpacity ref={touchable} onPress={() => setShowPopover(true)}>
        <Text>Press here to open popover!</Text>
      </TouchableOpacity>
      <Popover from={touchable} isVisible={showPopover} onRequestClose={() => setShowPopover(false)}>
        <Text>This is the contents of the popover</Text>
      </Popover>
    </>
  );
}
```

--------------------------------

### equals method signature

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Signature for the equals method that compares two Rect instances.

```TypeScript
equals(b: Rect): boolean
```

--------------------------------

### Initial state of Popover

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

The initial state object with isVisible set to false.

```typescript
state = {
  isVisible: false
}
```

--------------------------------

### Mode enum (PopoverMode)

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Defines the rendering modes for the popover. JS_MODAL renders an in-tree overlay, RN_MODAL uses a native modal, and TOOLTIP renders without a dimmed background.

```APIDOC
## Mode (PopoverMode)

### Description
Enum that defines the rendering mode of the popover.

### Members
- **JS_MODAL** (`'js-modal'`) - Renders an in-tree absolute-fill overlay (JSModalPopover). Background shown, taps outside trigger onRequestClose. Supports nested popovers.
- **RN_MODAL** (`'rn-modal'`) - Default. Renders inside a native RN <Modal>, guaranteed to sit above other views. Only one may show at a time (module-level isShowingInModal guard).
- **TOOLTIP** (`'tooltip'`) - In-tree overlay without the dimmed background; onRequestClose is never called. Visibility must be managed manually.

### Usage
Accepted by PublicPopoverProps['mode'] only. Note that PopoverProps does not declare mode; it is added by PublicPopoverProps.
```

--------------------------------

### Popover Component Props

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

The Popover component accepts a set of props that control its visibility, placement, appearance, and callbacks. These props are passed as constructor parameters when creating a Popover instance.

```APIDOC
## Popover Component Props

### Description
Configures the Popover component's behavior and appearance. All props are optional unless marked required.

### Parameters

#### children
- **Type**: ReactNode
- **Required**: no
- **Default**: —
- **Description**: Content rendered inside the popover.

#### isVisible
- **Type**: boolean
- **Required**: no
- **Default**: false (state)
- **Description**: Controlled visibility. When undefined, Popover manages visibility itself from the from element's onPress (or the openPopover callback). When supplied, it takes precedence over the internal state.

#### mode
- **Type**: Mode
- **Required**: no
- **Default**: Mode.RN_MODAL
- **Description**: 'rn-modal' (native Modal wrapper), 'js-modal' (in-tree overlay), 'tooltip' (js-modal without background; onRequestClose is never called).

#### from
- **Type**: Rect | RefObject<Component> | ((sourceRef, openPopover) => ReactNode) | ReactNode | Point
- **Required**: no
- **Default**: null
- **Description**: The popover source/anchor. See from resolution below. When omitted the popover floats centered on the screen.

#### placement
- **Type**: Placement | Array<Placement>
- **Required**: no
- **Default**: Placement.AUTO ('auto')
- **Description**: Where to place the popover relative to the source. Placement.CENTER ('center') is deprecated and internally converted to Placement.FLOATING. When an array is passed, the first placement that fits is selected.

#### animationConfig
- **Type**: Partial<Animated.TimingAnimationConfig>
- **Required**: no
- **Default**: undefined
- **Description**: Overrides for every Animated.timing config (duration defaults to 300, useNativeDriver: !isWeb). Merged as { duration: 300, easing, useNativeDriver: !isWeb, ...this.props.animationConfig }.

#### offset
- **Type**: number
- **Required**: no
- **Default**: undefined (0)
- **Description**: Shifts the popover away from the source along the chosen placement axis (applied as fromRect.y -= offset for top, += for bottom, x -= for left, += for right). Does not apply to floating placement.

#### displayArea
- **Type**: Pick<Rect, 'x' | 'y' | 'width' | 'height'>
- **Required**: no
- **Default**: window bounds / parent bounds
- **Description**: Rectangular area the popover may occupy. Internally converted with new Rect(displayArea.x, displayArea.y, displayArea.width, displayArea.height).

#### displayAreaInsets
- **Type**: Insets
- **Required**: no
- **Default**: undefined
- **Description**: Shrinks the display area by left/right/top/bottom insets (applied in AdaptivePopover.getDisplayArea).

#### popoverStyle
- **Type**: StyleProp<ViewStyle>
- **Required**: no
- **Default**: {}
- **Description**: Style of the popover content view. borderRadius (default 3), backgroundColor (default white), and shadow props (shadowOffset, shadowColor, shadowOpacity, shadowRadius, elevation) are extracted and applied specially.

#### popoverShift
- **Type**: { x?: number, y?: number }
- **Required**: no
- **Default**: undefined
- **Description**: Multiplier in -1..1 shifting the floating popover within the display area (only applied for floating placement).

#### backgroundStyle
- **Type**: StyleProp<ViewStyle>
- **Required**: no
- **Default**: {}
- **Description**: Style of the dimming background (default rgba(0, 0, 0, 0.5)).

#### arrowSize
- **Type**: Pick<Size, 'width' | 'height'>
- **Required**: no
- **Default**: new Size(16, 8)
- **Description**: Arrow dimensions ({ width: 0, height: 0 } hides the arrow). Converted with new Size(arrowSize.width, arrowSize.height).

#### arrowShift
- **Type**: number
- **Required**: no
- **Default**: undefined
- **Description**: Multiplier in -1..1 shifting the arrow along the source edge (anchorPoint += arrowShift * 0.5 * fromRect.width/height).

#### statusBarTranslucent
- **Type**: boolean
- **Required**: no
- **Default**: true (Android, rn-modal only)
- **Description**: Passed through to the RN Modal statusBarTranslucent prop.

#### onOpenStart
- **Type**: () => void
- **Required**: no
- **Default**: —
- **Description**: Fired (via setTimeout) when the open animation starts.

#### onOpenComplete
- **Type**: () => void
- **Required**: no
- **Default**: —
- **Description**: Fired (via setTimeout) when the open animation completes.

#### onRequestClose
- **Type**: () => void
- **Required**: no
- **Default**: —
- **Description**: Fired when the user taps outside the popover (background) or presses Android back. In Popover, ALSO triggered by the public requestClose() method. Never called in tooltip mode.

#### onCloseStart
- **Type**: () => void
- **Required**: no
- **Default**: —
- **Description**: Fired (via setTimeout) when the close animation starts.

#### onCloseComplete
- **Type**: () => void
- **Required**: no
- **Default**: —
- **Description**: Fired (via setTimeout) when the close animation completes (RN-modal fires it 50 ms after the Modal unmounts).

#### onPositionChange
- **Type**: () => void
- **Required**: no
- **Default**: —
- **Description**: Fired after the popover animates to a new position.

#### debug
- **Type**: boolean
- **Required**: no
- **Default**: false
- **Description**: Enables console.log debug output (also gated by the internal DEBUG constant).

#### testID
- **Type**: ViewProps['testID']
- **Required**: no
- **Default**: —
- **Description**: Test identifier.

### Static Defaults

```ts
static defaultProps: Partial<PublicPopoverProps> = {
  mode: Mode.RN_MODAL,
  placement: Placement.AUTO,
  statusBarTranslucent: DEFAULT_STATUS_BAR_TRANSLUCENT,
  popoverStyle: {},
  arrowSize: DEFAULT_ARROW_SIZE,
  backgroundStyle: {},
  debug: false
}
```

### Legacy propTypes

A legacy static propTypes object (lines 28–101) provides runtime prop validation (e.g. from accepts Rect, function, node, or a { current } shape; placement accepts a single enum value or an array).
```

--------------------------------

### static clone(rect: Rect): Rect

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Creates a new Rect with the same x, y, width, and height as the given rect. Used internally to avoid mutating the caller's rect.

```APIDOC
## static clone(rect: Rect): Rect

### Description
Returns a new Rect with the same x, y, width, and height. Used internally by computeGeometry to avoid mutating the caller's rect.

### Parameters
- **rect** (Rect) - Required - The Rect to clone.

### Returns
A new Rect instance with the same field values.
```

--------------------------------

### Close popover programmatically with requestClose

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

Alternative approach: let the Popover handle opening from an element but close it programmatically using the exposed `requestClose` method via a ref.

```jsx
import React, { useRef } from 'react';
import Popover from 'react-native-popover-view';

function App() {
  const popoverRef = useRef();

  return (
    <Popover
      ref={popoverRef}
      from={(
        <TouchableOpacity>
          <Text>Press here to open popover!</Text>
        </TouchableOpacity>
      )}>
      <TouchableOpacity onPress={() => popoverRef.current.requestClose()}>
        <Text>Tap to close me</Text>
      </TouchableOpacity>
    </Popover>
  );
}
```

--------------------------------

### static clone method signature

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Signature for the static clone method that creates a copy of a Rect.

```TypeScript
static clone(rect: Rect): Rect
```

--------------------------------

### Import Point from dist/Types

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Point.md

Deep import required because Point is not re-exported from the package entry point.

```ts
import { Point } from 'react-native-popover-view/dist/Types';
```

--------------------------------

### Popover class constructor

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

The Popover component is instantiated with props of type PublicPopoverProps. It has no custom constructor and initializes state with isVisible set to false.

```APIDOC
## Popover class constructor

### Description
Constructs a new Popover component instance with the given props. The component renders a popover anchored to a source element, ref, rect, point, or the center of the screen.

### Constructor Parameters
- **props** (PublicPopoverProps) - Required - The props for the Popover component, including all members of PopoverProps plus displayArea, arrowSize, mode, from, and testID.

### Initial State
- **isVisible** (boolean) - Initialized to false.

### Example
```ts
import Popover from 'react-native-popover-view';

const popover = <Popover from={someRef} />;
```
```

--------------------------------

### Mode enum (PopoverMode)

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Defines the three popover rendering modes. JS_MODAL renders an in-tree overlay, RN_MODAL uses a native modal (default), and TOOLTIP renders without a dimmed background. Accepted by PublicPopoverProps['mode'].

```ts
// src/Types.ts:17
export enum Mode {
  JS_MODAL = 'js-modal',
  RN_MODAL = 'rn-modal',
  TOOLTIP = 'tooltip'
}
```

--------------------------------

### Size class definition

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Defines a size with width and height. Used for arrowSize in PopoverProps and for forcedContentSize in Geometry. The equals method compares two Size instances.

```typescript
// src/Types.ts:76
export class Size {
  width: number;
  height: number;
  constructor(width: number, height: number);
  equals(b: Size): boolean;
}
```

--------------------------------

### Point class definition

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Defines a 2D point with x and y coordinates. Includes a constructor and an equals method for comparison. Used as the 'from' prop in PublicPopoverProps and returned by BasePopover.getTranslateOrigin().

```typescript
// src/Types.ts:64
export class Point {
  x: number;
  y: number;
  constructor(x: number, y: number);
  equals(b: Point): boolean;
}
```

--------------------------------

### requestClose()

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

Closes the popover programmatically by invoking the `onRequestClose` prop (if provided) and setting the internal `isVisible` state to false. This only works when the popover visibility is uncontrolled.

```APIDOC
## requestClose()

### Description
Closes the popover programmatically. Invokes the `onRequestClose` prop (if provided) and sets the internal `isVisible` state to `false`. This only works when the popover visibility is uncontrolled (`isVisible` prop undefined); with a controlled `isVisible` prop the state update has no effect and the parent must flip `isVisible` itself.

### Method
requestClose()

### Parameters
None

### Returns
void

### Example
```jsx
import React, { useRef } from 'react';
import Popover from 'react-native-popover-view';

function App() {
  const popoverRef = useRef();
  return (
    <Popover
      ref={popoverRef}
      from={(
        <TouchableOpacity>
          <Text>Press here to open popover!</Text>
        </TouchableOpacity>
      )}>
      <TouchableOpacity onPress={() => popoverRef.current.requestClose()}>
        <Text>Tap to close me</Text>
      </TouchableOpacity>
    </Popover>
  );
}
```

### Example with onRequestClose
```jsx
<Popover
  ref={popoverRef}
  onRequestClose={() => { console.log('closing'); }}
  from={<TouchableOpacity><Text>Open</Text></TouchableOpacity>}
>
  <TouchableOpacity onPress={() => popoverRef.current.requestClose()}>
    <Text>Close</Text>
  </TouchableOpacity>
</Popover>
```
```

--------------------------------

### Popover static defaultProps

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

The default configuration values for the Popover component as defined in src/Popover.tsx.

```ts
static defaultProps: Partial<PublicPopoverProps> = {
  mode: Mode.RN_MODAL,
  placement: Placement.AUTO,
  statusBarTranslucent: DEFAULT_STATUS_BAR_TRANSLUCENT,
  popoverStyle: {},
  arrowSize: DEFAULT_ARROW_SIZE,
  backgroundStyle: {},
  debug: false
}
```

--------------------------------

### PopoverProps

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Configuration type for the Popover component. It defines all props that control the popover's content, placement, styling, animation, and lifecycle callbacks.

```APIDOC
## PopoverProps

### Description
Configuration type for the Popover component. It defines all props that control the popover's content, placement, styling, animation, and lifecycle callbacks.

### Fields
- **children** (ReactNode) - Optional - Popover content.
- **isVisible** (boolean) - Optional - Controlled visibility; when undefined, `Popover` manages it. Default: internal state `false`.
- **placement** (Placement | Array<Placement>) - Optional - Placement preference(s). Default: `Placement.AUTO`.
- **animationConfig** (Partial<Animated.TimingAnimationConfig>) - Optional - Overrides for `Animated.timing` (duration 300, `useNativeDriver: !isWeb` defaults). Default: `undefined`.
- **offset** (number) - Optional - Shift away from the source along the placement axis. Default: `undefined`.
- **displayArea** (Rect) - Optional - Permitted popover region. Default: window/parent bounds.
- **displayAreaInsets** (Insets) - Optional - Insets applied to the display area. Default: `undefined`.
- **popoverStyle** (StyleProp<ViewStyle>) - Optional - Popover content style; `borderRadius`, `backgroundColor`, shadow props extracted. Default: `{}`.
- **popoverShift** ({ x?: number, y?: number }) - Optional - `-1..1` multiplier shifting a floating popover. Default: `undefined`.
- **backgroundStyle** (StyleProp<ViewStyle>) - Optional - Dimming background style (default `rgba(0,0,0,0.5)`). Default: `{}`.
- **arrowShift** (number) - Optional - `-1..1` multiplier shifting the arrow along the source edge. Default: `undefined`.
- **arrowSize** (Size) - Optional - Arrow dimensions. Default: `new Size(16, 8)`.
- **statusBarTranslucent** (boolean) - Optional - Android rn-modal only; passed to RN `Modal`. Default: `true`.
- **onOpenStart** (() => void) - Optional - Fired when the open animation starts.
- **onOpenComplete** (() => void) - Optional - Fired when the open animation ends.
- **onRequestClose** (() => void) - Optional - Fired on background tap / Android back / `requestClose()`.
- **onCloseStart** (() => void) - Optional - Fired when the close animation starts.
- **onCloseComplete** (() => void) - Optional - Fired when the close animation ends.
- **onPositionChange** (() => void) - Optional - Fired after animating to a new position.
- **debug** (boolean) - Optional - Debug logging toggle. Default: `false`.

### Accepted By
- `PublicPopoverProps` (via `extends Omit<PopoverProps, 'displayArea' | 'arrowSize'>`), and the internal `BasePopoverProps`, `AdaptivePopoverProps` (`PopoverProps & { fromRect?, fromRef?, displayArea?, getDisplayAreaOffset, showBackground? }`), `RNModalPopoverProps`, `JSModalPopoverProps`, `ComputeGeometryProps`.
```

--------------------------------

### requestClose() method definition

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

The internal implementation of the requestClose method in Popover.tsx.

```ts
// src/Popover.tsx:117
requestClose(): void {
  if (this.props.onRequestClose) this.props.onRequestClose();
  this.setState({
    isVisible: false
  });
}
```

--------------------------------

### Popover class declaration with line number

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Popover.md

The class declaration as it appears at line 27 of src/Popover.tsx.

```typescript
// src/Popover.tsx:27
export default class Popover extends Component<PublicPopoverProps, PublicPopoverState> {
```

--------------------------------

### ModalPopoverState

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Internal state interface for modal popover components. It contains a single boolean field 'visible' that controls whether the modal wrapper renders its overlay.

```APIDOC
## ModalPopoverState

### Description
Internal state interface for modal popover components. It contains a single boolean field 'visible' that controls whether the modal wrapper renders its overlay.

### Fields
- **visible** (boolean) - Required - Whether the modal wrapper renders its overlay.

### Used By
- `RNModalPopover` and `JSModalPopover` component state (`Component<…, ModalPopoverState>`). Internal.
```

--------------------------------

### Geometry class definition (src/Geometry.ts)

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Internal data class representing computed popover geometry. Contains popover origin, anchor point, placement, forced content size, and per-axis overflow flags. Not re-exported; produced by computeGeometry and consumed by BasePopover.

```typescript
export class Geometry {
  popoverOrigin: Point;
  anchorPoint: Point;
  placement: Placement;
  forcedContentSize: Size;
  viewLargerThanDisplayArea: {
    width: boolean,
    height: boolean
  }
  constructor({ popoverOrigin, anchorPoint, placement, forcedContentSize, viewLargerThanDisplayArea }: {
    popoverOrigin: Point;
    anchorPoint: Point;
    placement: Placement;
    forcedContentSize: Size;
    viewLargerThanDisplayArea: { width: boolean, height: boolean };
  });
  static equals(a: Geometry, b: Geometry): boolean;
}
```

--------------------------------

### Show popover without an anchor (floating)

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

Use this to display a popover that is not anchored to any element. Omit the from prop entirely; the popover will stay centered on the screen, even when the device is rotated.

```jsx
import React, { useState } from 'react';
import Popover from 'react-native-popover-view';

function App() {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <>
      <TouchableOpacity onPress={() => setShowPopover(true)}>
        <Text>Press here to open popover!</Text>
      </TouchableOpacity>
      <Popover isVisible={showPopover} onRequestClose={() => setShowPopover(false)}>
        <Text>This popover will stay centered on the screen, even when the device is rotated!</Text>
      </Popover>
    </>
  );
}
```

--------------------------------

### equals(b: Point): boolean

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Point.md

Compares this Point with another Point and returns true if both coordinates match after rounding with Math.round. This allows for tolerance of minor floating-point differences.

```APIDOC
## `equals(b: Point): boolean`

### Description
Returns true when both coordinates match after rounding with `Math.round`. Useful for comparing points that may differ by small floating-point values.

### Parameters
- **b** (Point) - Required - The other Point to compare against.

### Returns
- **boolean** - `true` if both rounded x and y coordinates are equal, otherwise `false`.

### Example
```js
import { Point } from 'react-native-popover-view/dist/Types';

const a = new Point(100, 250.4);
const b = new Point(100, 250.5);
a.equals(b); // true — Math.round(250.4) === Math.round(250.5) === 250
```
```

--------------------------------

### waitForChange timeout implementation

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/errors.md

The waitForChange function polls for rect changes and throws an error if the condition is not met within 20 iterations (2 seconds).

```ts
// src/Utility.ts:23
export async function waitForChange(
  getFirst: () => Promise<Rect>,
  getSecond: () => Promise<Rect>
): Promise<void> {
  // Failsafe so that the interval doesn't run forever
  let count = 0;
  let first, second;
  do {
    first = await getFirst();
    second = await getSecond();
    await new Promise(resolve => {
      setTimeout(resolve, 100);
    });
    count++;
    if (count++ > 20) {
      throw new Error('waitForChange - Timed out waiting for change (waited 2 seconds)');
    }
  } while (first.equals(second));
}
```

--------------------------------

### Placement enum (PopoverPlacement)

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Defines the placement options for the popover. The CENTER member is deprecated and is converted to FLOATING by the Popover component before rendering.

```ts
// src/Types.ts:5
export enum Placement {
  TOP = 'top',
  RIGHT = 'right',
  BOTTOM = 'bottom',
  LEFT = 'left',
  AUTO = 'auto',
  FLOATING = 'floating',
  // deprecated
  CENTER = 'center'
}
```

--------------------------------

### equals(b: Rect): boolean

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/api-reference/Rect.md

Compares this Rect to another Rect and returns true if all fields match after rounding with Math.round. This allows rects from native measurements to compare equal to integer computations.

```APIDOC
## equals(b: Rect): boolean

### Description
Returns true when every field matches after rounding with Math.round. Rounded comparison makes rects produced by native layout measurements (which can be fractional) compare equal to integer computations.

### Parameters
- **b** (Rect) - Required - The Rect to compare against.

### Returns
boolean - true if all fields match after rounding, false otherwise.
```

--------------------------------

### Error when passing functional component to `from` prop

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/README.md

This error occurs when passing a functional component to the Popover's `from` prop because Popover uses a ref to locate the component. Use React.forwardRef to forward the ref to the underlying component.

```text
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
```

--------------------------------

### PopoverProps type

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Defines the public configuration props for the popover component. Includes placement, animation, styling, and lifecycle callbacks. Accepted by `PublicPopoverProps` and internal prop types like `BasePopoverProps` and `AdaptivePopoverProps`.

```ts
// src/Types.ts:34
export type PopoverProps = {
  children?: ReactNode;
  isVisible?: boolean;

  // config
  placement?: Placement | Array<Placement>;
  animationConfig?: Partial<Animated.TimingAnimationConfig>;
  offset?: number;
  displayArea?: Rect;
  displayAreaInsets?: Insets;

  // style
  popoverStyle?: StyleProp<ViewStyle>;
  popoverShift?: { x?: number, y?: number };
  backgroundStyle?: StyleProp<ViewStyle>;
  arrowShift?: number;
  arrowSize?: Size;
  statusBarTranslucent?: boolean;

  // lifecycle
  onOpenStart?: () => void;
  onOpenComplete?: () => void;
  onRequestClose?: () => void;
  onCloseStart?: () => void;
  onCloseComplete?: () => void;
  onPositionChange?: () => void;

  debug?: boolean;
}
```

--------------------------------

### Insets type

Source: https://github.com/steffeydev/react-native-popover-view/blob/master/_autodocs/types.md

Defines the Insets type used for displayAreaInsets. Each field is optional and defaults to 0 when missing. Applied in AdaptivePopover.getDisplayArea() to shrink the display area.

```ts
// src/Types.ts:23
export type Insets = {
  left?: number;
  right?: number;
  bottom?: number;
  top?: number;
}
```
Tokens:
Raw