Local Preferences
Local Preferences
Local preferences, such as theme selection, language settings, or notification toggles, are commonly stored on-device to persist a user’s personalized settings between app sessions.
Storing Simple Preferences
javascript
await AsyncStorage.setItem('theme', 'dark');
await AsyncStorage.setItem('notificationsEnabled', 'true');
Building a Preferences Hook
javascript
function usePreference(key, defaultValue) {
const [value, setValue] = useState(defaultValue);
useEffect(() => {
AsyncStorage.getItem(key).then((stored) => {
if (stored !== null) setValue(JSON.parse(stored));
});
}, [key]);
const updateValue = async (newValue) => {
setValue(newValue);
await AsyncStorage.setItem(key, JSON.stringify(newValue));
};
return [value, updateValue];
}
Using the Preferences Hook
javascript
const [notificationsEnabled, setNotificationsEnabled] = usePreference('notifications', true);
Combining Preferences with Context
For app-wide preferences like theme or language, wrapping preference logic in a Context Provider allows any component in the app to easily read and update the shared setting.
Storing Preferences with MMKV for Performance
For apps with frequently changing preferences, MMKV offers a faster alternative to AsyncStorage due to its synchronous, native storage implementation.
Resetting Preferences to Defaults
javascript
async function resetPreferences() {
await AsyncStorage.multiRemove(['theme', 'notifications', 'language']);
}
Conclusion
Storing local preferences properly, ideally through a reusable hook or Context Provider, allows React Native applications to deliver a personalized experience that persists across app sessions.
