A slick popup element that expands towards the center of the screen from wherever the user presses down.
Features:
- Slick opening and closing animations that expand from user press location
- 4 positioning modes: ‘stick’, ‘center-x’, ‘center-y’, and ‘center’.
- Swipe to dismiss
- Intuitive API supporting any popup element.
- Written in typescript
Dependencies:
How to use it:
1. Install & import.
# Yarn $ yarn add @good-react-native/anchored-popup react-native-reanimated react-native-gesture-handler # NPM $ npm i @good-react-native/anchored-popup react-native-reanimated react-native-gesture-handler
// install gesture handler
function App() {
return (
<GestureHandlerRootView style={{flex: 1}}>
<RestOfApp />
</GestureHandlerRootView>
);
}
// install react-native-reanimated
// in babel.config.js
module.exports = {
plugins: ['react-native-reanimated/plugin'],
};
2. Wrap your app in the <AnchoredPopupProvider>.
function App() {
return (
<AnchoredPopupProvider>
<RestOfApp />
</AnchoredPopupProvider>
);
}
3. Create an anchored popup element.
<AnchoredPopupTouchableOpacity
popupElement={
<View>
<Text>...</Text>
</View>
}>
<Text>Trigger Button</Text>
</AnchoredPopupTouchableOpacity>
4. Available props for AnchoredPopupTouchableOpacity.
/**
* ReactNode or render function that will be shown whenever the popup is shown. Required.
*/
popupElement: ReactNode | ((vars: {
close: () => void;
}) => ReactNode);
/**
* Controls the animation time of all animations the component uses.
* @default 150 (ms)
*/
animationDuration?: number;
/**
* Color of the backdrop that is shown while the popup is open.
* @default 'rgba(0,0,0,0.07)''
*/
backgroundColor?: string;
/**
* Callback function called when the anchor changes. Useful if you want to synchronize other parts of your UI with
* the popup, although is not required (state is managed internally).
*/
onAnchorChange?: (v: AnchoredPopupAnchor | null) => void;
/**
* Sets the positioning behavior of the popup. Each behavior will open the popup towards the center of the screen, but each option
* varies slightly in how the final position is calculated.
* @default 'stick'
* @option
* 'stick'
* Renders the popup as far as possible towards the center screen while making sure the anchor is still inside the popup view.
* @option center-x
* 'center-x'
* Renders the popup horizontally in the screen, and renders vertically as far as possible towards the y center while making
* sure the anchor's y value is still inside the popup view.
* @option center-y
* 'center-y'
* Renders the popup vertically in the screen, and renders horizontally as far as possible towards the x center while making
* sure the anchor's x value is still inside the popup view.
* @option center
* 'center'
* Renders the popup in the center of the screen.
*/
mode?: AnchoredPopupMode;
/**
* Allows you to imperatively interact with the component (IE to close the component from the parent).
* Will be set to null when the component unmounts.
* @example
* ```ts
* const handle = usePopupHandle();
* function closePopup() {
* if(handle.current) handle.current.close();
* }
* return <AnchoredPopupTouchableOpacity handle={handle}/>;
* ```
*/
handle?: ReturnType<typeof usePopupHandle>;
/**
* If enabled, the popup will close when the backdrop is pressed.
* @default true
*/
closeOnBackdropPress?: boolean;
/**
* If enabled, the popup can be swiped away.
* @default true
*/
swipeToClose?: boolean;
/**
* Control which gestures open the popup.
* @default 'onPress'
* @option
* 'onPress'
* Opens the popup on the 'onPress'.
* @option
* 'onLongPress'
* Opens the popup on the 'onLongPress' event.
*/
openOnEvent?: 'onPress' | 'onLongPress';
Preview:
Download Details:
Author: iway1
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/iway1/react-native-anchored-popup
License: MIT
