If you want to implement localization in your app, consider using the language key in AsyncStorage such as 'en', 'en_US', or 'tr_TR'. Create separate language JSON files like en.json for each language. This class structure can be used for localization:
import { NativeModules, Platform } from 'react-native';
import { strings } from 'res';
class LanguageHelper {
currentLanguage = null;
currentStrings = null;
init() {
this.currentLanguage = this.determineDeviceLanguage();
this.setCurrentString();
}
setCurrentString() {
switch (this.currentLanguage) {
case 'tr_TR':
this.currentStrings = require("./tr.json");
break;
default:
this.currentStrings = require("en.json");
}
}
determineDeviceLanguage() {
// Determine device language
const language =
Platform.OS === 'ios'
? NativeModules.SettingsManager.settings.AppleLocale ||
NativeModules.SettingsManager.settings.AppleLanguages[0]
: NativeModules.I18nManager.localeIdentifier;
return language;
}
}
const LanguageProvider = new LanguageHelper();
export default LanguageProvider;
The en.json file should look like this:
{
"title": "Hello World"
}
In your App.js file, import the LanguageProvider class:
import LanguageProvider from './LanguageHelper';
const App = () => {
useEffect(() => {
LanguageProvider.init(); // Init language
}, []);
return(/* Your components */)
}
Then you can access localized strings anywhere in your app after importing:
LanguageProvider.currentStrings.title