How to retrieve the name of the theme saved by the user in async storage and set it as the app's theme.

[thalesaguiar]

I save the theme that the user defined in async storage but I don't know how to retrieve it later so that the theme chosen by the user can always be set until they change it. How to do this in React Native unistyles?

my unistyles.ts file:

import {UnistylesRegistry} from 'react-native-unistyles';
import {breakpoints} from './breakpoints';
import {lightTheme, darkTheme} from './themes';

type AppBreakpoints = typeof breakpoints;
type AppThemes = {
light: typeof lightTheme;
dark: typeof darkTheme;
};
declare module 'react-native-unistyles' {
export interface UnistylesBreakpoints extends AppBreakpoints {}
export interface UnistylesThemes extends AppThemes {}
}

UnistylesRegistry.addBreakpoints(breakpoints)
.addThemes({
light: lightTheme,
dark: darkTheme,
})
.addConfig({
adaptiveThemes: true,
});

[jpudysz]

What's your use case? Why do you save theme to storage?

You can always retrieve it from useStyles hook.

If you need to define user theme then you can use this function: https://reactnativeunistyles.vercel.app/reference/theming/#update-theme-during-runtime

[thalesaguiar]

I'd like to save the user's theme preference in asynchronous storage, so that when the user closes the application and opens it again, the last theme they chose is still set.

[jpudysz]

Well, this is React Native question. You have many options, I'm personally using MMKV.

[thalesaguiar]

In fact, my problem is not how to store this information in the asynchronous storage or in the MMKV, but how to pass this information to the unistyles, if you have an example of how to do this, I'd love to see it.

[jpudysz]

You need to import UnsitylesRuntime: https://www.unistyl.es/reference/unistyles-runtime
and call setTheme:

https://www.unistyl.es/reference/theming/#change-theme

[thalesaguiar]

I solve my problem with Double Question Marks,

//in unistyles.ts file:

const getInitialTheme = getItem('defaultTheme') ?? 'light';

.addConfig({
initialTheme: ${getInitialTheme},
});

This allows the user to set their favorite theme, and save this information in MMKV, even after the user closes the application and opens it again, the favorite theme is still set and applied.
I'm going to do a tutorial on my YouTube channel about this, for anyone who has the same question. Thank you for your help. : )

[jpudysz]

That's also a solution, but you can also call it during the runtime:

• with hook https://reactnativeunistyles.vercel.app/reference/use-initial-theme
• with UnistylesRuntime https://reactnativeunistyles.vercel.app/reference/unistyles-runtime/

You can do it before the first use of useStyles hook. It's so quick and synchronous users won't notice anything.