Slick Anchored Popup For React Native

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:

Slick Anchored Popup For React Native

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

You Might Be Interested In:

Add Comment