Settings screen

Installation

$ npx shadcn@latest add @goodui-native-pro/settings-screen

Then run npx expo install --fix so react-native-svg match your Expo SDK. Files land in components/goodui-native/settings-screen.

Pro screens install from the license-gated @goodui-native-pro registry. Setup: Pro access.

• •Wrap the app in GestureHandlerRootView and ThemeProvider (the alert renders in its overlay layer).

Usage

// app/(tabs)/settings.tsx
import { Stack, router } from "expo-router";
import { SettingsScreen } from "@/components/goodui-native/settings-screen/settings-screen";
import { api, useAccount } from "@/lib/account";
import { useColorSchemeSetting } from "@/lib/theme"; // your store behind ThemeProvider colorScheme

export default function SettingsRoute() {
  const account = useAccount();
  const [appearance, setAppearance] = useColorSchemeSetting();
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <SettingsScreen
        account={{ name: account.name, email: account.email, avatar: account.photoUrl, plan: account.plan }}
        appearance={appearance}
        onAppearanceChange={setAppearance}
        notifications={account.notifications}
        onNotificationChange={(key, value) => api.updateNotifications({ [key]: value })}
        privateAccount={account.isPrivate}
        onPrivateAccountChange={(value) => api.updatePrivacy({ isPrivate: value })}
        cacheSize={account.cacheMegabytes}
        onClearCache={() => api.clearCache()}
        onNavigate={(route) => router.push(`/settings/${route}`)}
        onSignOut={async () => {
          await api.signOut();
          router.replace("/sign-in");
        }}
      />
    </>
  );
}

When to use

Examples

<SettingsScreen />

const [scheme, setScheme] = useState<"light" | "dark" | "system">("system");

<ThemeProvider colorScheme={scheme}>
  <SettingsScreen appearance={scheme} onAppearanceChange={setScheme} />
</ThemeProvider>

API reference

Motion and haptics

• •Clearing the cache: the row spins, then the size rolls down digit by digit to zero.
• •The large title collapses into the bar as you scroll; the appearance highlight stretches between segments and can be dragged.
• •Switches squash and stretch as they flip and flip back with a shake if their promise rejects.
• •Sign out: the alert springs in, keeps a spinner on Sign out while it runs and shakes on failure.
• •Reduced motion: the size changes in place, the title cross-fades without moving, the highlight moves without stretching and the alert fades.

• •Haptic: toggle-on or toggle-off on a switch flip, select on an appearance change, error when a switch's promise rejects
• •Haptic: error when Clear cache rejects
• •Haptic: success or error when the sign out promise settles (AlertDialog)

• •Switches, the segment highlight, the digit roll and the title collapse run on the UI thread.
• •Rows are plain views; the whole screen renders once and only rows whose state changes update.

Accessibility

• •Section headers are headers; navigation rows are buttons named by their title and value; switch rows hand the title to the switch.
• •Appearance is a tab list named 'Appearance' with the selected option marked.
• •The cache row reads 'Cache, 248.6 MB' on native; on the web its visible text names it. 'Cache cleared' is announced when the size reaches zero.
• •Clear cache reports busy while it runs and is disabled at zero.
• •Sign out opens an alert dialog that needs an answer: Cancel or Sign out, with the error announced if signing out fails.

Notes for AI

Related