Skip to main content
Your view renders inside the host’s surface, on its terms: a theme to match, a bounded height to fit, edges to keep clear of device chrome. useLayout reports those constraints so the view can style and size itself to the space the host actually gives it.

​
Example

The carousel matches the host’s light or dark theme, fits its scroll area to the height the host offers, and keeps content clear of notches and home indicators. 
import { useLayout } from "skybridge/web";

function Carousel({ products }: { products: Product[] }) {
  const { theme, maxHeight, safeArea } = useLayout();
  const isDark = theme === "dark";

  return (
    <div
      style={{
        backgroundColor: isDark ? "#1a1a1a" : "#ffffff",
        color: isDark ? "#ffffff" : "#111111",
        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} dark={isDark} />
      ))}
    </div>
  );
}

​
Returns

useLayout returns the host’s current layout for the view.

​
theme

theme: Theme;
The host’s active color theme, "light" or "dark". Mirror it in the view’s styling for a native feel. It updates when the user toggles the host theme.

​
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 locale and device capabilities of the host

useRequestSize

Ask the host to resize the view

Design for the Host

Adapt the view to the host’s surface