App control

On mobile and desktop, the shell draws a native header above your page. You can change its title and colors, add an action button, hide it, or close the app.

import { useEffect } from 'react';
import { useAppControl, useHeaderAction } from '@cskn/sdk';

function CartScreen() {
  const { setHeader } = useAppControl();

  useEffect(() => {
    setHeader({
      title: 'Cart',
      backgroundColor: '#1e293b',
      textColor: '#ffffff',
      action: { icon: 'share-outline', id: 'share' },
    });
  }, [setHeader]);

  useHeaderAction((id) => {
    if (id === 'share') openShareSheet();
  });

  return <CartItems />;
}

If your app also runs in a browser, use NativeHeader from @cskn/ui. It sets the native header in a shell and draws an in-page header everywhere else.

setHeader

Only the fields you pass change; the rest keep their current value. The configuration belongs to your app and is reset when it closes.

string

Header title. Defaults to the app’s name.

string

Header background. Defaults to the shell’s theme.

string

Color of the title, the back and close chevrons, and the action icon.

{ icon: string; id?: string } | null

The button on the right. icon is an Ionicons name such as share-outline; unknown names show an ellipsis. id comes back in useHeaderAction. Pass null to remove the button.

The back button is automatic: when the WebView has history to go back to, the shell shows a back chevron on the left and navigates back on tap.

Other controls

Hook / function	Effect
`showHeader(false)` / `showHeader(true)`	Hide or show the native header. It is shown by default after the page loads.
`closeApp()`	Close the mini app and return to the shell.
`useHeaderAction(handler)` / `onHeaderAction(cb)`	Called with the action’s `id` when it is tapped. `onHeaderAction` returns an unsubscribe function.

Off-shell, all of these are no-ops.

Overview

Platform API

Native features

Profile integration

Reference

setHeader

Other controls

​setHeader

​Other controls

setHeader

Other controls