Docs
Features
PreviousNext

Settings

Manage your application settings with ease.

The @kit/settings package is a type-safe settings management system designed to simplify the development of settings pages. It provides a declarative approach to define, store, and render settings with built-in support for multiple storage providers, form validation, and UI rendering.

The settings configuration is made of 3 objects from :

  • a UI config object that control the ui (in the apps/mobile/config/settings.ui.config.ts => app scope)
  • a schema config object that define zod schemas used for type checking (in the kit/shared/src/config/settings.schema.config.ts => repo scope)
  • a server config object that contains the database controllers (in the kit/shared/src/config/settings.server.config.ts => repo scope)

Setup

You can see how to setup the model logic from the web documentation, the following will show you how to setup the native code only.

Add the settings route

app/(app)/screens/settings/[...settings]/index.tsx
import { SettingsPages } from '@kit/settings/native/ui';
import { CurrentSettingsProvider, useCurrentSettings } from '@kit/settings/shared';
// other imports ...
 
export default function SettingsPage() {
    const { settings } = useLocalSearchParams<{
        settings: string[];
    }>();
 
    return <SettingsPagesFromParams settings={settings} />;
}
 
export const EXTRA_INPUTS = {
    organization_media: OrganizationSettingMedia,
    question_select: QuestionSelectInput,
};
 
const Wrapper: SettingWrapperComponent = ({ className, header, children }) => {
    return (
        <View className={cn('flex gap-4 px-4 py-4', className)}>
            {header && <View className="flex gap-2">{header}</View>}
            {children}
        </View>
    );
};
 
const InternalSettingsPagesFromParams = ({ settings }: { settings: string[] }) => {
    const { clientTrpc } = useCtxTrpc();
    const { config } = useCurrentSettings();
 
    return (
        <View className="bg-background flex-1">
            <ThemedScroller className="px-2">
                <SettingsPages
                    inputs={EXTRA_INPUTS}
                    clientTrpc={clientTrpc}
                    settingsUI={settingsUI as unknown as ReturnType<typeof parseUISettingConfig>}
                    settingsSchemas={settingsSchemas}
                    Wrapper={Wrapper}
                    params={{ settings }}
                />
            </ThemedScroller>
        </View>
    );
};
 
export const SettingsPagesFromParams = ({ settings }: { settings: string[] }) => {
    return (
        <CurrentSettingsProvider>
            <InternalSettingsPagesFromParams settings={settings} />
        </CurrentSettingsProvider>
    );
};

Render settings navigation

app/(app)/screens/settings/index.tsx
import { SettingsNavigation } from '@kit/settings/native/ui';
// other imports ...
 
export default function SettingsMenu() {
    return (
        <View className="bg-background flex-1">
            <ThemedScroller className="px-0">
                <Section
                    titleSize="3xl"
                    className="px-6 pt-4 pb-10"
                    title="Settings"
                    subtitle="Manage your account settings"
                />
 
                <View className="flex-1 px-6">
                    <SettingsNavigation uiConfig={settingsUI.ui} basePath={'/screens/settings'} />
                </View>
            </ThemedScroller>
        </View>
    );
}

Inputs

By default, we add the following inputs to the QuickForm component :

  • user_media: UserSettingMedia to manage user media
  • organization_media: OrganizationSettingMedia to manage organization media

Check the Media Manager page to learn more about the user_media and organization_media inputs.

Translations

Boost accessibility and reach a wider audience by translating your app into multiple languages.

Interest

Why the settings package is so powerful.

How is this guide?

Last updated on 1/18/2026