React-native-relative-popup NPM

react-native-relative-popup

A popup component that sticks to an element and stays on top of everything.

Span a popup to the app root using the amazing library @gorhom/portal
Popup position will be relative to its parent component's bounds and will try to stay in the viewport
Fully customizable content
Built with Typescript

Demo

Expo Snack @jotform/react-native-relative-popup

Usage

yarn add react-native-relative-popup

PopupProvider

Wrap your app with PopupProvider

import { PopupProvider } from 'react-native-relative-popup';

export default () => (
  <PopupProvider>
    {/* Rest of your app */}
    {/* Popups will be teleported to here */}
  </PopupProvider>
);

Popup

Create a popup

import Popup from 'react-native-relative-popup';

export default () => {
  const [open, setOpen] = useState(false);

  return (
    <TouchableOpacity onPress={() => setOpen(true)}>
      <Text>Button</Text>

      <Popup isOpen={open} onClose={() => setOpen(false)}>
        <Text>Popup Content</Text>
      </Popup>
    </TouchableOpacity>
  );
};

Prop	Type	Mandatory	Default Value	Description
isOpen	boolean	Yes	false	Should be popup shown?
children	node or func	Yes	null	Popup content. Can be a function which has popup position parameters
position	'top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center'	No	'bottom-right'	Position of the popup
horizontalSpacing	number	No	0	Horizontal spacing of the popup from the relative element
verticalSpacing	number	No	0	Vertical spacing of the popup from the relative element
safeAreaInsets	EdgeInsets	No	0	Safe area insets to use in positioning calculations.
onClose	function	No	null	A callback that fired when user presses outside of the popup

Usage

import React, { useState } from 'react';
import Popup from 'react-native-relative-popup';

export default () => {
  const [open, setOpen] = useState(false);

  return (
    <TouchableOpacity onPress={() => setOpen(true)}>
      <Text>Button</Text>

      <Popup isOpen={open} onClose={() => setOpen(false)}>
        <Text>Popup Content</Text>
      </Popup>
    </TouchableOpacity>
  );
};