useViewport

Your view renders inside the host’s surface, on its terms: a bounded height to fit and edges to keep clear of device chrome. useViewport reports those constraints so the view can size itself to the space the host actually gives it. It re-renders on every resize, so read the host theme from useUser instead.

Example

The carousel fits its scroll area to the height the host offers and keeps content clear of notches and home indicators.

import { useViewport } from "skybridge/web";

function Carousel({ products }: { products: Product[] }) {
  const { maxHeight, safeArea } = useViewport();

  return (
    <div
      style={{
        maxHeight,
        overflowY: "auto",
        paddingTop: safeArea.insets.top,
        paddingRight: safeArea.insets.right,
        paddingBottom: safeArea.insets.bottom,
        paddingLeft: safeArea.insets.left,
      }}
    >
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Returns

useViewport returns the host’s current viewport for the view, as a ViewportState.

`maxHeight`

maxHeight: number | undefined;

The maximum height in pixels the host gives the view. It is undefined when the host does not report a height limit. It updates as the host resizes the view’s container.

`safeArea`

safeArea: SafeArea;

The pixel insets the view should keep clear of host chrome and device cutouts (notches, rounded corners, home indicators). When the host reports no insets, every side is 0.

type SafeArea = {
  insets: SafeAreaInsets;
};

type SafeAreaInsets = {
  top: number;
  right: number;
  bottom: number;
  left: number;
};

useUser

Read the host’s theme, locale, and device capabilities

useRequestSize

Ask the host to resize the view

Design for the Host

Adapt the view to the host’s surface

Server

Auth

Identity Providers

Hooks

Utilities

Types

Low-level

Example

Returns

`maxHeight`

`safeArea`

useUser

useRequestSize

Design for the Host

​Example

​Returns

​maxHeight

​safeArea

useUser

useRequestSize

Design for the Host

Example

Returns

`maxHeight`

`safeArea`