DOCSEARCHbyAlgolia
Submit Docs

react-native-popover-view

repository·master·Indexed 20 days ago

https://github.com/steffeydev/react-native-popover-view

A lightweight, dependency-free, and highly customizable Popover component for React Native supporting iOS, Android, and Web. Version 6.1.0 features smooth animations using the native driver and supports multiple rendering modes including rn-modal, js-modal, and tooltip. It provides flexible anchoring via the 'from' prop, which accepts React elements, refs, functions, points, or rectangles, and allows for manual visibility control and custom placement directions.

Tokens
7K
Snippets
20
Records
29
Agent score
70%

What's inside react-native-popover-view

  1. Choose a Popover mode

    master

    The mode prop determines how the popover is rendered in the view hierarchy:

    • rn-modal (Default): Uses a native React Native Modal. It is guaranteed to appear on top of all other views. Limitation: Only one Modal can be shown at a time; not suitable for nested popovers.
    • js-modal: Renders the popover into the React component tree. Use this for nested popovers or when the anchor is already inside a native modal. Tapping outside triggers onRequestClose.
    • tooltip: Renders into the component tree without a background fade. Taps outside are not blocked, and onRequestClose is never called. The user must dismiss it manually.

    Important for js-modal and tooltip: Because these render in the component tree, the Popover component must be placed high up in the hierarchy (ideally near the root) to ensure it has enough space to render. If the parent view is the same size as the anchor, the popover may be clipped.

  2. Upgrade from 2.x to 3.0

    master

    Major changes in version 3.0:

    • Prop Consolidation: fromRect and fromView are consolidated into a single from prop.
    • from Prop Usage: You can now pass a Rect object or a Ref. All Refs must be created via React.createRef or React.useRef. All Rects must be plain objects.
    • New Modes: The from prop supports passing a React element for simpler usage.
    • Removal: fromDynamicRect has been removed.

  3. Use Safe Area Context with Popover

    master

    To prevent popovers from overlapping with device notches or system insets, use react-native-safe-area-context and pass the insets to the displayAreaInsets prop.

    import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Popover from 'react-native-popover-view';

function PopoverSafeWrapper(props) {
  const insets = useSafeAreaInsets();
  return (
    <Popover {...props} displayAreaInsets={insets} />
  );
}

  4. Upgrade from 4.x to 5.0

    master

    When upgrading from version 4.x to 5.0, note the following breaking changes and new features:

    • Arrow Customization: arrowStyle is replaced by arrowSize. The arrow now inherits backgroundColor from popoverStyle. To hide the arrow, pass arrowSize={{ width: 0, height: 0 }} instead of using a transparent background.
    • New Props: offset and popoverShift are now available.
    • Shadows: Using a shadow no longer requires popoverStyle to contain overflow: visible.
    • Deprecation: The Rect class is deprecated. Use a plain object instead: { x: number, y: number, width: number, height: number }.
    • Placement: Refactoring may affect content handling and placement; verify your UI after upgrading.

  5. Upgrade from 1.0 to 1.1

    master

    The react-navigation integration was moved to a separate repository.

    Action Required:

    1. Install the new package: react-navigation-popover.
    2. Change your import from: import { createPopoverStackNavigator } from 'react-native-popover-view' to: import createPopoverStackNavigator from 'react-navigation-popover'

  6. Upgrade from 1.x to 2.0

    master

    Breaking changes in version 2.0:

    • Renamed Prop: onClose is now onRequestClose.
    • New mode Prop: Replaces showInModal. Use mode={Popover.MODE.JS_MODAL} instead of showInModal={false}.
    • Renamed Callback: doneClosingCallback is now onCloseComplete.
    • Background Styling: showBackground is replaced by backgroundStyle. To hide the background, use backgroundStyle={{ backgroundColor: 'transparent' }} instead of showBackground={false}.
    • Offsets: verticalOffset may no longer be necessary; test your layouts.

  9. Troubleshoot Popover visibility and errors

    master

    Debugging

    Enable debug={true} to see detailed logs in the console to help diagnose why a popover might not be appearing.

    Android Ref Issues

    If passing a ref to from does not work on Android, add these props to the source component (the one being referenced):

    • renderToHardwareTextureAndroid={true}
    • collapsable={false}

    Functional Component Ref Errors

    If you see the error Warning: Function components cannot be given refs, it means your source component is a functional component that hasn't forwarded its ref.

    Solution: Wrap your functional component in React.forwardRef and forward the ref to the underlying view component.

  10. Manually control popover visibility

    master

    To control the popover's visibility yourself (e.g., for timed dismissals or custom logic), use the isVisible and onRequestClose props.

    • isVisible: A boolean controlling whether the popover is shown.
    • onRequestClose: A callback triggered when the user taps outside the popover. If you want to force the user to use a button inside the popover to close it, omit this prop.
    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>
  );
}

  11. Show popover with advanced anchor control

    master

    For advanced scenarios, pass a function to the from prop. This function receives two arguments:

    1. sourceRef: A ref that you should attach to the specific element you want to anchor the popover to.
    2. showPopover: A callback function to trigger the popover visibility.

    This allows you to decouple the trigger (e.g., a LongPress) from the anchor (e.g., a specific Text component).

    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>
  );
}

  12. Show popover from a simple element

    master

    The simplest way to use the Popover is to pass a Touchable component to the from prop. The popover will automatically open when the provided element is pressed.

    Note: If you pass an onPress or ref prop to the Touchable inside the from prop, it will be overwritten by the library.

    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>
  );
}