How to create a popup menu in react native

Popup menu has become an essential part of mobile apps UI, in this article, I will guide you through the process of building popup menu components that you can use in both Android and IOS.

There is a lot of packages that you can use, but if you are facing a limitation(UI/positioning/animation/ etc..) or just want to improve your react-native skills this article is for you.

I’ll cover the most important parts of building a popup menu:
- How to let the menu popup appear on top of the screen
- Create the menu and MenuItem component to make it reusable
- Calculate the meu popup positioning.

Step1: two different approaches to display a popup menu

The Popup menu should display on top of the element that triggered the menu in other words on top of the screen, so to avoid the inherited styles from the parent and the zIndex issue there are two different approaches to solve this CSS issue.

• Modal: This approach is straightforward, pressing the trigger(by the trigger I mean the button that is responsible for opening the menu popup) will open a react native modal with the menu inside it, the modal will have a transparent background and you can easily control where to display the menu.
  But we have one downside, opening the modal while the keyboard is up will lead to closing the keyboard on both Platforms, which is not ideal.
• React Portal: Portals will solve this CSS issue by breaking the menu component from its parent and rendering it at the root level of the app.
  we’ll use this react-native-portal package to achieve that.

In our case we’ll use the React portals inside our root component like this:

Step 2: Create the components and the props

• Menu component that will hold the trigger and be responsible for calculating the popup position.
• MenuItem component will include pop-up options and actions.

If you’re confused just hold on, the picture will be more clear as we jump to the code

As we are just initializing the components, the menu will display a red background color on the entire screen, while displaying the MenuItem at the top(we’ll position the items later).

Now let’s use our components:

Now we have the main functionalities,
1 - The user clicks on the trigger
2- Menu pop-up appears on top
3- After the user clicks on the screen or the item the menu will be closed.

check how it looks https://youtu.be/gMs1bfngo4w

Step3: measure the position of the menu

For calculating the menu position we’ll need:
- Layout dimensions
- Menu dimensions
- Trigger dimensions
- Keyboard Height

Not like the layout and the keyboard, the menu and trigger dimensions are dynamic that’s why we’ll be using the Refs to measure their dimensions, so let’s do that first.

We had already attached the refs when initializing the menu component.
In the above, I used `measureInWindow` in order to get the view position in the window, you can read more about it here.

For the keyboard height, we’ll add a custom hook to calculate it

then we can use it in our menu component like this

const {keyboardHeight} = useKeyboardHeight()

Just hold on we are almost there, now we will just add the calculation to position our menu.

Hereafter doing the calculation inside React.useMemo (no need to go through the details) the menuPositionStyles will holds the top and left that the menu should display.

We then pass the menuPositionStyles to the View that wraps the menuItems childrens.

There is one more important trick that we need to add, now the menu will jump on the screen and that’s because the calculation takes a bit of time to complete. To fix that we need to add this in the activeSection style

opacity: modalDimensions.width !== 0 && triggerDimensions.left !== 0 ? 1 : 0,

This way the menu will be hidden until the calculation finishes and the jump will disappear.

Thanks for reading 📚

I hope this article helps you build your custom menu popup.

Check the code on Github.

Github | Twitter ✈️