React Native
Persistent theme
Learn persistent theme with AsyncStorage.
Persistent theme
A persistent theme keeps the user's chosen theme even after closing and reopening the app. For this, the preference is written to AsyncStorage and read from it on launch. This way the user sees the last chosen theme on every launch.
To save: AsyncStorage.setItem('theme', theme.name). To read: an effect calls AsyncStorage.getItem('theme') on launch; when the value comes back, setTheme applies it.
Loading on launch
To load the theme on launch, useEffect is used. On mount, AsyncStorage.getItem('theme') is called; the returned value is applied with setTheme. This effect runs only once. This makes the preference ready at launch.
When the user changes the theme, you save the new value with AsyncStorage.setItem. So the next launch restores the last preference.
Exercise Save the theme on change
Add a useEffect that calls AsyncStorage.setItem('theme', theme.name) whenever theme changes. Put theme in the dependency array. The theme state and the AsyncStorage import are defined.
Show example solution
import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
const light = { name: 'light', background: '#fff' };
const dark = { name: 'dark', background: '#000' };
export default function App() {
const [theme, setTheme] = useState(light);
useEffect(() => {
AsyncStorage.setItem('theme', theme.name);
}, [theme]);
return <View style={{ backgroundColor: theme.background }} />;
}
Test yourself
-
AsyncStorage import
import ____ from '@react-native-async-storage/async-storage';
Show answer
import AsyncStorage from '@react-native-async-storage/async-storage';
-
Match the persistent theme concepts
- AsyncStorage
- Storage
- setItem
- Saves
- getItem
- Reads
- theme
- Preference value
-
What does a persistent theme provide?
- Faster rendering
- Keeping the preference
- Color generation
- Navigation
Show answer
Keeping the preference — A persistent theme keeps the preference even after closing.
Next lesson: Summary - Theme
