rendering page contents depending on language set in AsyncStorage React Native - reactjs

Question

I am creating an application that displays information in three languages without using any APIS. In the settings page , user can click change to spanish button which will be stored in the ASYNC storage .I am new to react native and would like to know whether this is best practice .
ACCOUNT SETTINGS
import { View, Text ,Button} from 'react-native'
import React, { useState , useEffect} from 'react'
import {AsyncStorage} from 'react-native';
const Account = () => {
const setspanish=()=> {
const lanugage = {
language:"spanish",
}
AsyncStorage.getItem('lang').then((datacart)=>{
if (datacart !== null) {
// We have data!!
const lang = JSON.parse(datacart)
lang.push(lanugage)
AsyncStorage.setItem('lang',JSON.stringify(lang));
}
else{
const lang = []
lang.push(lanugage)
AsyncStorage.setItem('lang',JSON.stringify(lang));
}
alert("ChangedLnag")
})
.catch((err)=>{
alert(err)
})
}
return (
<View>
<Button onPress={setspanish} title="spanish"/>
</View>
)
}
export default Account
I have create a state in different pages , but none update automatically . Once i navigate to other pages , i have used ternary operators to render out depending on the state which recieves async storage language value but none works .

Answer 1

You should set it on the context and save it, and for first time you should take and set it again to context
I write example about that:
interface IConfig{
lang: "en" | "lalala";
}
interface IContextConfig{
config: IConfig;
setConfig?: (val: any) => void;
}
export const ContextConfigApp = React.createContext<IContextConfig>({
config: {lang: "en"},
});
interface IPropsProvider{
init?: IConfig;
children: React.ReactNode;
}
const Provider = ({init = {lang: "en"}}) => {
const [config,setConfig] = useState<IConfig>(init);
useEfect(() => {
AsyncStorage.setItem('config',JSON.stringify(config));
},[config]);
useEfect(() => {
(async () => {
const tmp = await AsyncStorage.getItem('config');
if(!!tmp && tmp) setConfig({...config,...JSON.parse(tmp)});
})();
},[]);
return (
<ContextConfigApp.Provider value={{config,setConfig}}>
{children}
</ContextConfigApp.Provider>
)
}
const App = () => {
return (
<Provider>
<Header />
</Provider>
)
}
const Header = () => {
const {setConfig,config} = useContext(ContextConfigApp);
return (
<Button onPress={() => {
setConfig({...config,lang: "en"})
}}>EN</Button>
)
}
Usage
const Example = () => {
const {config} = useContext(ContextConfigApp)
return (
<Text>{config.lang}</Text>
)
}
this is just example I hope it help you