Settings

What It Does

@kit/settings powers mobile settings rendering through:

• declarative UI config (settings.ui.config.tsx),
• typed shared schema (settingsSchemas),
• route-driven rendering with SettingsNavigation and SettingsPages.

When To Use

• You need account/security/settings screens in the mobile app.
• You want schema-driven forms instead of hand-built React Native forms.
• You want shared settings schema consistency with dashboard/server flows.

Prerequisites

• apps/mobile/config/settings.ui.config.tsx defined.
• @kit/shared/config/settings.schema.config available.
• TRPC client wiring in mobile app providers/layout.

Flow Overview

• settings-menu.tsx renders grouped navigation entries.
• settings/[...settings]/index.tsx renders page content by URL params.
• use-settings-ui-config.ts applies filters to UI config before rendering.

How To Use

Expand
Copy to Clipboardimport { parseUISettingConfig } from '@kit/settings/ui-config';
import { settingsSchemas } from '@kit/shared/config/settings.schema.config';
 
export const EXTRA_INPUTS = {
  user_media: UserSettingMedia,
};
 
export const settingsUI = parseUISettingConfig<typeof settingsSchemas.schema, typeof EXTRA_INPUTS>({
  ui: [
    {
      group: 'index',
      label: 'About you',
      settingsPages: [
        {
          slug: 'index',
          title: 'Profile',
          settings: [/* forms, wrappers, custom UI blocks */],
        },
        {
          slug: 'security',
          title: 'Security',
          settings: [/* AuthProviderZone, SessionZoneComponent */],
        },
      ],
    },
  ],
});
Expand

Copy to Clipboard<SettingsNavigation uiConfig={settingsUiConfig.ui} basePath={'/screens/settings'} />

Expand
Copy to Clipboardimport { SettingsPages } from '@kit/settings/native/ui';
import { CurrentSettingsProvider } from '@kit/settings/shared';
import { useApplyFilter } from '@kit/utils/filters';
 
const filteredSettingsSchema = useApplyFilter('get_settings_schema', settingsSchemas);
const extraInputs = useApplyFilter('get_settings_extra_inputs', EXTRA_INPUTS);
 
<CurrentSettingsProvider>
  <SettingsPages
    clientTrpc={clientTrpc}
    settingsUI={settingsUiConfig}
    settingsSchemas={filteredSettingsSchema}
    inputs={extraInputs}
    params={{ settings: params }}
    Wrapper={Wrapper}
  />
</CurrentSettingsProvider>
Expand

Inputs API (Mobile)

Filter API

Mobile settings pages are composed from client filters, while the backing settings API schema/providers are composed with server filters on the web API app.

MCP Context

Expand
Copy to Clipboardcapability: settings_mobile_ui
entrypoints:
  - apps/mobile/config/settings.ui.config.tsx
  - apps/mobile/app/(app)/screens/settings-menu.tsx
  - apps/mobile/app/(app)/screens/settings/[...settings]/index.tsx
  - apps/mobile/hooks/use-settings-ui-config.ts
  - apps/mobile/hooks/use-filters.ts
  - kit/organization/src/native/filters/use-filters/use-settings-filters.tsx
  - apps/dashboard/lib/init-server-filters.ts
  - kit/organization/src/www/filters/server-filters.ts
inputs:
  - settings_ui_config
  - settings_route_params
  - extra_input_components
outputs:
  - native_settings_navigation_and_forms
constraints:
  - settings slugs must match navigation routes
  - settings schema keys used in forms must exist in effective settings schema
side_effects:
  - updates user/organization settings via settings API routes
Expand

Agent Recipe

1. Add/adjust settings page nodes in settings.ui.config.tsx.
2. Ensure required schema keys exist in shared settings schema.
3. Verify navigation path (/screens/settings/...) and settings params resolve correctly.

Troubleshooting

• If a page is missing, verify slug exists in settingsUI and navigation base path is correct.
• If a field fails silently, verify its schema key exists and its input type is registered.
• If settings content is stale, verify filters are initialized before settings pages render.

Related

• Settings API Interest
• Web Settings
• Authentication User Settings