Typed expo module to set and get variable synchronously to UserDefaults for iOS, SharedPreferences for Android and localStorage for the web
npm install expo-user-preferencesTyped expo module to set and get variable synchronously to UserDefaults for iOS, SharedPreferences for Android and localStorage for the web.
If you have to save theme, locale, etc and get it synchronously to setup your app this library is for you. If you want else to save big data like image please use available SecureStore or AsyncStore provide by expo.
`````
$ npx expo install expo-user-preferences
Create in your project a file preferences.ts for example that will contact User Preferences instance and past this content
``
import { UserPreferences } from "expo-user-preferences";
// ...
type Locale = "en" | "fr";
type Theme = "system" | "light" | "dark";
export const userPreferences = new UserPreferences({
locale: "en" as Locale,
theme: "system" as Theme,
// write all default user's preferences here 😌
});
``
``
import { usePreference } from "expo-user-preferences";
//...
const [localePreference] = usePreference(userPreferences, "locale");
return
``
``
const [localePreference, setLocalePreference] = usePreference(userPreferences, "locale");
title="Change locale to FR"
onPress={() => setLocalePreference("fr")}
/>
``
This is why usePreference accept third argument who can be default value.
For example to init theme of your app you can use
``
import { usePreference } from "expo-user-preferences";
import { useColorScheme } from "react-native";
// ...
const systemTheme = useColorScheme();
const [themePreference] = usePreference(
userPreferences,
"theme",
systemTheme,
);
// ...
``
``
// where you have create preferences.ts
import { userPreferences } from "preferences"
// ...
userPreferences.getValue("locale")
``
Note that getValue accept optional initialValue as second argument in case where any value is found in storage
````
userPreferences.setValue("locale", "fr")
You can also detect value change outside of a component with addListener
``
const listener = (locale) => console.log("new locale" + locale)
const index = userPreferences.addListener(key, setValue);
userPreferences.setValue("locale", "fr")
// should log fr if i have done my work correctly 🥲
userPreferences.removeListener("locale", index)
```