expo-catalyst

Mac Catalyst window chrome and native project wiring for Expo apps.

Install

Add the config plugin to your Expo config:

export default {
  expo: {
    plugins: [
      [
        "expo-catalyst",
        {
          toolbarStyle: "unified",
          titleVisibility: "hidden",
        },
      ],
    ],
  },
};

CLI

expo-catalyst prebuild
expo-catalyst run:catalyst
expo-catalyst run:catalyst --clean

expo-catalyst run:catalyst reuses the existing Catalyst app build when native inputs have not changed. It rebuilds when files under ios/ or Expo config files like app.json, app.config.*, or package.json change.

The CLI injects this script into the app package when needed:

{
  "scripts": {
    "catalyst": "expo-catalyst run:catalyst"
  }
}

API

import { Toolbar, Window, navigation, useNavigation, useToolbar } from "expo-catalyst";

Toolbar items can be configured through the direct API, hooks, or the declarative component API.

<Window title="Issues" toolbarStyle="unified" titleVisibility="visible" />

<Toolbar>
  <Toolbar.Button
    id="create-issue"
    icon="plus.circle"
    label="Create issue"
    onPress={() => createIssue()}
  />
  <Toolbar.FlexSpace id="spacer" />
  <Toolbar.Menu
    id="type-filter"
    icon="line.3.horizontal.decrease.circle"
    label="All Types"
    items={[
      { id: "all", label: "All Types", onPress: () => setType("all") },
      { id: "feature", label: "Feature", onPress: () => setType("feature") },
      { id: "bug", label: "Bug", onPress: () => setType("bug") },
    ]}
  />
</Toolbar>

Supported toolbar item kinds:

• button
• space
• flexibleSpace
• menu
• group