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-popupPopupProvider
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>
);
};Built With ❤️
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT