Sheets, dialogs, menus, and popovers are overlays

You open a ticket that says add a confirmation. By noon it is a modal. By Friday it is a bottom sheet because the form grew. The overlays on that screen keep changing names while the job stays put.

A sheet and a modal interrupt the same way

The screen underneath is still there. Focus moves up. Dismiss has to work. That is true for a React Native modal, a dialog, and a bottom sheet. The chrome changes. The job does not.

I used to file them apart because the APIs look different. Modal is a built-in. A sheet is usually a library with a snap point and a drag handle. A React Native dialog often sits centered with a scrim. Once you watch enough of them side by side, the shared problem is obvious: temporary focus above the current route, without losing the route.

Menus are overlays with a different trigger

A long-press context menu. A dropdown menu under a chevron. A plain menu anchored to a button. A React Native popover that points at a control. None of those replace the screen. They borrow a corner of it, then leave.

That is why I keep menu, context-menu, dropdown-menu, and popover next to modal and dialog instead of dumping them into a generic inputs pile. The person hunting for a popover is usually solving the same interruption problem as the person hunting for a sheet. Different trigger. Same family.

The keyboard does not care what you named it

Put a form inside a bottom sheet and you inherit the keyboard fight. Put the same form inside a dialog and you inherit it again. The sheet library and the modal presentation both have to clear the IME, keep the focused field visible, and dismiss cleanly when the user taps outside.

If you only search modal, you miss the sheet that already solved the keyboard. If you only search bottom sheet, you miss the dialog that already handled nested dismiss. The name you used in the ticket is a poor search key for the motion you need.

Scattering them breaks the shelf

I tried keeping modal in one corner and sheets somewhere else. Search got worse. You remember a card that rose from the bottom with a handle, or a small menu that clung to a toolbar. You do not remember whether the author tagged it modal, menu, or popover.

So I group them. Bottom-sheet, context-menu, dialog, dropdown-menu, menu, modal, popover — one pile of React Native overlays. Role first. Noun second. When someone asks for a confirmation surface, I want every honest interrupt in one place, not seven facets that pretend they are unrelated.

Finding the right interrupt is still the hard part

You already know you need something above the screen. The second problem is remembering which preview had the snap feel, or the menu that did not fight the tab bar. You remember the motion. You do not remember the package name.

Video helps the memory. One group helps the search. That is the whole reason this job family sits together instead of as a scatter of lonely facets.

This is the shelf

Everything I keep for that job lives in the Overlays group. New sheets, dialogs, menus, and popovers land there whenever I find them.