Expo User Preferences

Typed 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.

Installation

```$ npx expo install expo-user-preferences``

`Setup`

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 😌 });

`Get Share preference`


In your app you can then import and call usePreference to get any variable like this. note that locale is typed Locale and you can only pass defined property as second argument.

``import { usePreference } from "expo-user-preferences";

//...

const [localePreference] = usePreference(userPreferences, "locale");

return {localePreference}

`Update Share preference`


You can update one preference anywhere in your're app and any usePreference values will be updated like with useState. The state is also persisted synchronously and your app will get it on next launch.

``const [localePreference, setLocalePreference] = usePreference(userPreferences, "locale");

title="Change locale to FR" onPress={() => setLocalePreference("fr")} />

`Use different default value`


Sometime you'll want to get default value from another hook and hook can only declare inside component and new UserPreferences should not.

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, );

// ...``

`Get value outside of component`


If you want to access directly to any preference value outside a component you can do this

``// 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

`Set value outside of component`


Like Get you only have to call setValue note that key and value is typed

``userPreferences.setValue("locale", "fr")``

`Listening value change outside of component`

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)

```

Expo User Preferences

Typed expo module to set and get variable synchronously to UserDefaults for iOS, SharedPreferences for Android and localStorage for the web.

Installation

```$ npx expo install expo-user-preferences``

`Setup`

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 😌 });

`Get Share preference`


In your app you can then import and call usePreference to get any variable like this. note that locale is typed Locale and you can only pass defined property as second argument.

``import { usePreference } from "expo-user-preferences";

//...

const [localePreference] = usePreference(userPreferences, "locale");

return {localePreference}

`Update Share preference`


You can update one preference anywhere in your're app and any usePreference values will be updated like with useState. The state is also persisted synchronously and your app will get it on next launch.

``const [localePreference, setLocalePreference] = usePreference(userPreferences, "locale");

title="Change locale to FR" onPress={() => setLocalePreference("fr")} />

`Use different default value`


Sometime you'll want to get default value from another hook and hook can only declare inside component and new UserPreferences should not.

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, );

// ...``

`Get value outside of component`


If you want to access directly to any preference value outside a component you can do this

``// 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

`Set value outside of component`


Like Get you only have to call setValue note that key and value is typed

``userPreferences.setValue("locale", "fr")``

`Listening value change outside of component`

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)

```