> ## Documentation Index
> Fetch the complete documentation index at: https://super-calendar.afonsojramos.me/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native on the web

> Run the React Native package in the browser with react-native-web.

There are two ways to put the calendar in a browser:

* **[`@super-calendar/dom`](/guides/dom)** is a pure react-dom renderer with no
  React Native in the tree. Choose it for web-only or web-first apps.
* **`@super-calendar/native` on react-native-web** runs the same React Native
  code in the browser. Choose it when you already ship a native app and want one
  codebase. The rest of this page covers that path.

The native package runs on
[react-native-web](https://necolas.github.io/react-native-web/); its
dependencies (Legend List v3, Reanimated, Gesture Handler) all support the web.
See it running on the [live demo](/demo).

## Add the web peers

```bash theme={null}
npx expo install react-dom react-native-web @expo/metro-runtime
```

The runnable [`examples/native`](https://github.com/afonsojramos/super-calendar/tree/main/examples/native)
builds with `expo start --web`.

## Gestures on the web

All modes render and navigate. The touch gestures are remapped:

| Touch (native)            | Web                                      |
| ------------------------- | ---------------------------------------- |
| Horizontal swipe paging   | **←** / **→** arrow keys                 |
| Pinch-to-zoom (week/day)  | **Ctrl/Cmd + scroll**                    |
| Long-press to drag/create | **Click-drag** (after a small threshold) |

Because dragging starts after a small click-drag on the web, a plain click still
selects an event and a right-click still opens a context menu. Dragging empty
space creates an event (scroll with the wheel); press **Escape** to cancel a
sweep.

Keyboard focus (**Tab**) moves through events only. Empty day cells and time-grid
columns are deliberately not tab stops, so focus doesn't stop on every blank day,
matching the [react-dom renderer](/guides/dom). The month-grid date picker
(rendered without events) stays fully day-navigable for selection.

## Portaling overlays

<Warning>
  If a `renderEvent` wraps events in a portaling overlay (a context menu, popover, etc.) from a UI
  library, portal it into your app's React root, **not** `document.body`.
</Warning>

react-native-web registers React's event delegation on the root element (`#root`
under Expo), so an overlay mounted outside it renders correctly but its click
handlers never fire. Most libraries take a `container` prop for this — point it
at `#root`. The example's context menu does exactly this:

```tsx theme={null}
const [container, setContainer] = useState<HTMLElement | null>(null);
useEffect(() => setContainer(document.getElementById("root")), []);
// ...
<Menu.Portal container={container}>{/* menu */}</Menu.Portal>;
```