Een persistent instellingenscherm bouwen
Maak een instellingenscherm met schakelaars voor meldingen en dark mode, sla elke instelling op in AsyncStorage en herstel de voorkeuren bij het starten van de app.
Een persistent instellingenscherm bouwen is een gratis React Native Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Wat een scherm met blijvende instellingen doet
Met een scherm met blijvende instellingen kunnen gebruikers appvoorkeuren instellen — zoals de donkere modus, meldingsvoorkeuren of de taal — en blijven die voorkeuren behouden nadat de app opnieuw is gestart. De instellingen worden bij wijzigingen opgeslagen in AsyncStorage en bij het opstarten weer geladen. Dit is een van de meest voorkomende patronen in elke React Native-app voor productiegebruik.
De status van de instellingen definiëren
Begin met het definiëren van een TypeScript-interface voor je instellingenobject en een constante DEFAULT_SETTINGS die wordt gebruikt wanneer er geen opgeslagen instellingen bestaan (bij de eerste start). Door standaardwaarden in een constante te bewaren, kun je veilig terugvallen op die waarden en de oorspronkelijke structuur eenvoudig gebruiken in typebewaking en migratielogica.
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';Instellingen laden bij het mounten van het scherm
Lees in een useEffect met een lege afhankelijkheidsarray de instellingen uit AsyncStorage, parse de JSON en plaats het resultaat in de status van de component. Toon tijdens het laden een ActivityIndicator, zodat de gebruiker niet kort de standaardwaarden ziet voordat de echte instellingen verschijnen.
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();
}, []);Instellingen opslaan wanneer ze veranderen
Maak een helperfunctie die de nieuwe instelling samenvoegt met het huidige instellingenobject en het resultaat naar AsyncStorage schrijft. Roep deze functie aan vanuit de wijzigingshandler van elk UI-besturingselement, zodat instellingen direct na elke interactie van de gebruiker worden opgeslagen. Voor een instellingenscherm is geen aparte knop 'Opslaan' nodig.
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));
}De schakelaar voor de donkere modus weergeven
Gebruik de Switch-component van React Native voor booleaanse instellingen. Koppel de prop value aan de status en roep updateSetting aan in onValueChange. De UI wordt direct bijgewerkt via de status, terwijl AsyncStorage op de achtergrond opslaat. Zo voelt de app responsief aan zonder te wachten tot het schrijven is voltooid.
<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>Een schakelaar voor meldingen weergeven
Voeg volgens hetzelfde patroon een tweede rij met een Switch toe voor de meldingsinstelling. Door dezelfde helper updateSetting opnieuw te gebruiken, blijft de code DRY — je hoeft alleen het argument voor de sleutel te wijzigen om een andere instelling te benaderen. Dit patroon kan worden uitgebreid naar elk aantal booleaanse instellingen zonder de opslaglogica te dupliceren.
<View style={styles.row}>
<Text style={styles.label}>Notifications</Text>
<Switch
value={settings.notificationsEnabled}
onValueChange={(value) => updateSetting('notificationsEnabled', value)}
/>
</View>Een lettergroottekiezer met opties in Pressable
Geef voor een enum-instelling zoals de lettergrootte een rij Pressable-knoppen weer, één voor elke optie. Markeer de momenteel geselecteerde optie met een andere achtergrondkleur. Wanneer je op een knop tikt, wordt updateSetting met de nieuwe waarde aangeroepen. Zo maak je een compacte, toegankelijke keuzebesturing zonder een volledig vervolgkeuzemenu.
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>Instellingen globaal toepassen met Context
Om de donkere modus in de hele app toe te passen, moeten de instellingen globaal worden gedeeld. Laad de instellingen bij de root van de app (in App.tsx) en sla ze op in een SettingsContext. Elk scherm dat het huidige thema nodig heeft, kan dit uit de context lezen in plaats van telkens uit AsyncStorage te laden. Alleen de root laadt de gegevens één keer bij het opstarten uit de opslag.
// 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>
);Knop voor terugzetten naar standaardwaarden
Voeg onderaan het instellingenscherm een knop 'Terugzetten naar standaardwaarden' toe. Wanneer erop wordt getikt, roept de knop AsyncStorage.removeItem aan om de opgeslagen instellingen te wissen en de lokale status terug te zetten naar DEFAULT_SETTINGS. Bevestig de actie met een Alert voordat je de reset uitvoert, omdat dit een mogelijk destructieve bewerking is.
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);
},
},
]);
}Persistentie na opnieuw starten testen
Om te controleren of je instellingen echt behouden blijven, wijzig je een instelling, sluit je de app volledig af (niet alleen naar de achtergrond), open je de app opnieuw en controleer je of de gewijzigde waarde wordt weergegeven. In Expo Go kun je dit testen door de app geforceerd te sluiten. In een ontwikkelbuild schud je het apparaat om het ontwikkelmenu te openen en laad je de app opnieuw om een nieuwe start te simuleren, terwijl de gegevens in AsyncStorage behouden blijven.
Volledige structuur van een instellingenscherm
Hier zie je de volledige structuur van een instellingenscherm waarin alle patronen uit deze les worden gecombineerd. Het scherm laadt de instellingen bij het mounten, geeft schakelaars en keuzeknoppen weer die updateSetting aanroepen, gebruikt stijlen die rekening houden met de instelling voor de donkere modus en bevat onderaan een resetknop. Je kunt dit sjabloon aanpassen aan de specifieke voorkeuren van elke app.
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>
);
}Korte controle
Test je begrip van de concepten voor mobiele ontwikkeling met React Native uit deze les.
Lesoverzicht
In deze les heb je geleerd dat laden bij het mounten met useEffect de instellingen uit AsyncStorage herstelt voordat het scherm wordt weergegeven, dat één updateSetting-helper wijzigingen samenvoegt en voor elke instellingssleutel naar AsyncStorage schrijft en dat instellingen delen via Context voorkeuren zoals de donkere modus in de hele app beschikbaar maakt. Hierna bekijken we hoe je opslag wist en migratiestrategieën toepast.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Een persistent instellingenscherm bouwen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Een persistent instellingenscherm bouwen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Een persistent instellingenscherm bouwen”?
Maak een instellingenscherm met schakelaars voor meldingen en dark mode, sla elke instelling op in AsyncStorage en herstel de voorkeuren bij het starten van de app. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Een persistent instellingenscherm bouwen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Lezen en schrijven met AsyncStorage
- JSON-objecten opslaan en parsen
- Een persistent instellingenscherm bouwen
- Opslag wissen en migratiestrategieën