Set colours of React Native App through API response

Question

It's basically Web and Mobile app. The user will be able to customise the theme on the web. When he logs in to the mobile, he will get the colour scheme along with the response object (of login API) Since I cannot call the login API again, so I am storing the colours in AsyncStorage. In my application, I have a file which I use to set colours of the whole app. Here is the code:

import AsyncStorage from '@react-native-async-storage/async-storage';
let themeColorDark = "#123A43";
let themeColorLight = "#76AEB5";
let themeActiveColor = "#206775";

const getColors = async () => {
    themeActiveColor = await AsyncStorage.getItem('primary');
    themeColorDark = await AsyncStorage.getItem('dark');
    themeColorLight = await AsyncStorage.getItem('light');
    console.log(themeActiveColor, themeColorDark, themeColorLight);
    // the results of the console: #610f0f #e2b1b1 #e7d5d5
    // while the actual colors: #206775 #123A43 #76AEB5
}
getColors();

export default {
    themeColorDark: themeColorDark,
    themeColorLight: themeColorLight,
    themeActiveColor: themeActiveColor,
};

The problem is, the result of the console is correct. But actual colours are which I initialised. I am new to React Native, so any help or alternative solution would be highly appreciated.

Answer 1

I think you had saved some value colour code in your AsyncStorage before. you must update your values first in AsyncStorage. use useState to keep tracking of updating data and set new values in your AsyncStorage and you're good to go