React Native Academy · Lektion

Einen persistenten Einstellungsbildschirm erstellen

Einen persistenten Einstellungsbildschirm erstellen ist eine kostenlose React Native Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Native Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

What a Persistent Settings Screen Does

A persistent settings screen lets users configure app preferences — such as dark mode, notification preferences, or language — and have those preferences survive app restarts. The settings are saved to AsyncStorage when changed and loaded back on startup. This is one of the most common patterns in any production React Native app.

Defining the Settings State

Start by defining a TypeScript interface for your settings object and a DEFAULT_SETTINGS constant used when no saved settings exist (first launch). Keeping defaults in a constant makes it easy to fall back safely and to reference the initial shape in type guards and migration logic.

interface Settings {
  darkMode: boolean;
  notificationsEnabled: boolean;
  fontSize: 'small' | 'medium' | 'large';
}

const DEFAULT_SETTINGS: Settings = {
  darkMode: false,
  notificationsEnabled: true,
  fontSize: 'medium',
};

const SETTINGS_KEY = 'app_settings';

Loading Settings on Screen Mount

In a useEffect with an empty dependency array, read the settings from AsyncStorage, parse the JSON, and place the result in component state. Show an ActivityIndicator while loading so the user does not see a momentary flash of default values before the real settings appear.

const [settings, setSettings] = React.useState<Settings>(DEFAULT_SETTINGS);
const [loading, setLoading] = React.useState(true);

useEffect(() => {
  async function loadSettings() {
    const json = await AsyncStorage.getItem(SETTINGS_KEY);
    if (json) {
      setSettings({ ...DEFAULT_SETTINGS, ...JSON.parse(json) });
    }
    setLoading(false);
  }
  loadSettings();
}, []);

Saving Settings When They Change

Create a helper function that merges the new setting into the current settings object and writes the result to AsyncStorage. Call this function from each UI control's change handler so settings are saved immediately after every user interaction. There is no need for a separate 'Save' button for a settings screen.

async function updateSetting<K extends keyof Settings>(key: K, value: Settings[K]) {
  const updated = { ...settings, [key]: value };
  setSettings(updated);
  await AsyncStorage.setItem(SETTINGS_KEY, JSON.stringify(updated));
}

Rendering the Dark Mode Toggle

Use React Native's Switch component for boolean settings. Bind its value prop to the state and call updateSetting in onValueChange. The UI updates instantly via state while AsyncStorage saves in the background, giving a responsive feel without waiting for the write to complete.

<View style={styles.row}>
  <Text style={styles.label}>Dark Mode</Text>
  <Switch
    value={settings.darkMode}
    onValueChange={(value) => updateSetting('darkMode', value)}
    trackColor={{ false: '#ccc', true: '#6200ee' }}
    thumbColor={settings.darkMode ? '#fff' : '#f4f3f4'}
  />
</View>

Rendering a Notification Toggle

Add a second Switch row for the notifications setting following the same pattern. Reusing the same updateSetting helper keeps the code DRY — you only change the key argument to target a different setting. This pattern scales to any number of boolean settings without duplicating save logic.

<View style={styles.row}>
  <Text style={styles.label}>Notifications</Text>
  <Switch
    value={settings.notificationsEnabled}
    onValueChange={(value) => updateSetting('notificationsEnabled', value)}
  />
</View>

Font Size Picker with Pressable Options

For an enum setting like font size, render a row of Pressable buttons, one for each option. Highlight the currently selected option with a different background color. Tapping a button calls updateSetting with the new value. This creates a compact, accessible selection control without a full dropdown.

const fontSizes: Settings['fontSize'][] = ['small', 'medium', 'large'];

<View style={styles.row}>
  <Text style={styles.label}>Font Size</Text>
  <View style={styles.optionRow}>
    {fontSizes.map((size) => (
      <Pressable
        key={size}
        onPress={() => updateSetting('fontSize', size)}
        style={[
          styles.option,
          settings.fontSize === size && styles.optionSelected,
        ]}
      >
        <Text>{size}</Text>
      </Pressable>
    ))}
  </View>
</View>

Applying Settings Globally with Context

For dark mode to affect the entire app, the settings must be shared globally. Load settings at the app root (in App.tsx) and store them in a SettingsContext. Any screen that needs the current theme can read from context instead of loading from AsyncStorage every time. Only the root loads from storage once on startup.

// App.tsx
const [settings, setSettings] = React.useState<Settings>(DEFAULT_SETTINGS);

useEffect(() => {
  loadSettings().then(setSettings);
}, []);

return (
  <SettingsContext.Provider value={{ settings, updateSetting }}>
    <NavigationContainer theme={settings.darkMode ? DarkTheme : DefaultTheme}>
      <AppNavigator />
    </NavigationContainer>
  </SettingsContext.Provider>
);

Reset to Defaults Button

Add a 'Reset to Defaults' button at the bottom of the settings screen. When tapped, it calls AsyncStorage.removeItem to erase the saved settings and resets the local state to DEFAULT_SETTINGS. Confirm the action with an Alert before applying the reset, as it is a potentially destructive operation.

function handleReset() {
  Alert.alert('Reset Settings', 'Restore all settings to their defaults?', [
    { text: 'Cancel', style: 'cancel' },
    {
      text: 'Reset',
      style: 'destructive',
      onPress: async () => {
        await AsyncStorage.removeItem(SETTINGS_KEY);
        setSettings(DEFAULT_SETTINGS);
      },
    },
  ]);
}

Testing Persistence Across Restarts

To verify your settings actually persist, change a setting, close the app completely (not just background it), reopen it, and check that the changed value is shown. In Expo Go you can test this with a force-close. In a development build, shake the device to access the dev menu and reload to simulate a fresh start while keeping AsyncStorage data.

Complete Settings Screen Structure

Here is the full structure of a settings screen combining all the patterns from this lesson. The screen loads settings on mount, renders toggles and pickers that call updateSetting, applies styles that honor the dark mode setting, and includes a reset button at the bottom. This template can be customized for any app's specific preferences.

export default function SettingsScreen() {
  const [settings, setSettings] = React.useState<Settings>(DEFAULT_SETTINGS);
  const [loading, setLoading] = React.useState(true);

  useEffect(() => { loadSettings().then((s) => { setSettings(s); setLoading(false); }); }, []);

  if (loading) return <ActivityIndicator />;

  return (
    <ScrollView style={[styles.container, settings.darkMode && styles.dark]}>
      <SwitchRow label='Dark Mode' value={settings.darkMode}
        onChange={(v) => updateSetting('darkMode', v)} />
      <SwitchRow label='Notifications' value={settings.notificationsEnabled}
        onChange={(v) => updateSetting('notificationsEnabled', v)} />
      <FontSizeRow value={settings.fontSize}
        onChange={(v) => updateSetting('fontSize', v)} />
      <Button title='Reset to Defaults' onPress={handleReset} color='red' />
    </ScrollView>
  );
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: loading on mount with useEffect restores settings from AsyncStorage before the screen renders, a single updateSetting helper merges changes and writes to AsyncStorage for any settings key, and sharing settings via Context makes preferences like dark mode available throughout the entire app. Next up we explore clearing storage and migration strategies.

Häufig gestellte Fragen

Ist die Lektion „Einen persistenten Einstellungsbildschirm erstellen“ kostenlos?

Ja — der vollständige Text von „Einen persistenten Einstellungsbildschirm erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Native Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Einen persistenten Einstellungsbildschirm erstellen“?

Erstellen Sie einen Einstellungsbildschirm mit Umschaltern für Benachrichtigungen und Dark Mode, speichern Sie jede Einstellung in AsyncStorage und stellen Sie die Präferenzen beim App-Start wieder h… Du übst React Native Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Native Academy zu starten?

Keine Vorkenntnisse erforderlich. React Native Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Einen persistenten Einstellungsbildschirm erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Native Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Native Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Mit AsyncStorage lesen und schreiben
JSON-Objekte speichern und parsen
Einen persistenten Einstellungsbildschirm erstellen
Speicher leeren und Migrationsstrategien

← Zurück zu React Native Academy