Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'react-native-localize' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
const translationsDir = await (Platform.OS === "android"
? RNFS.readDirAssets("translations")
: RNFS.readDir(RNFS.MainBundlePath + "/translations"));
const translationPaths = translationsDir
.filter(({ isFile, name }) => isFile() && name.endsWith(".json"))
.reduce((all, { name, path }) => {
const languageTag = name.replace(".json", "");
return { ...all, [languageTag]: path };
}, {});
// fallback if no available language fits
const fallback = { languageTag: "en", isRTL: false };
const { languageTag, isRTL } =
RNLocalize.findBestAvailableLanguage(Object.keys(translationPaths)) ||
fallback;
const fileContent = await (Platform.OS === "android"
? RNFS.readFileAssets(translationPaths[languageTag], "utf8")
: RNFS.readFile(translationPaths[languageTag], "utf8"));
// clear translation cache
translate.cache.clear();
// update layout direction
I18nManager.forceRTL(isRTL);
// set i18n-js config
i18n.translations = { [languageTag]: JSON.parse(fileContent) };
i18n.locale = languageTag;
};
export const setI18nConfig = forceLocale => {
// fallback if no available language fits
const tagFallback = { languageTag: 'en', isRTL: false };
let language = {};
const languageTags = Object.keys(translationGetters);
if (forceLocale && languageTags.includes(forceLocale)) {
language = { languageTag: forceLocale, isRTL: forceLocale === 'ar' };
} else {
language =
RNLocalize.findBestAvailableLanguage(languageTags) || tagFallback;
}
let stringFallback;
i18n.fallbacks = true;
switch (forceLocale) {
case 'svKids':
case 'svSimple':
case 'seSme':
case 'seSmj':
case 'seSma': {
stringFallback = 'sv';
break;
}
default: {
stringFallback = 'en';
// (required) Called when a remote or local notification is opened or received
onNotification,
// ANDROID ONLY: GCM or FCM Sender ID (product_number)
senderID: '1025777552500',
// IOS ONLY (optional): default: all - Permissions to register.
permissions: {
alert: true,
badge: true,
sound: true
}
});
addEventListener('change', this.handleLanguagesChange);
if (Platform.OS === 'android') {
Linking.getInitialURL().then((url) => {
if (url) {
this.navigate(url);
}
});
} else {
Linking.addEventListener('url', this.handleOpenURL);
}
}
fallbackLng: {
default: ['en-US'],
'es-US': ['es-LA'],
},
resources: availableResources,
ns: ['common', ...Object.keys(Namespaces)],
defaultNS: 'common',
debug: true,
interpolation: {
escapeValue: false,
},
missingInterpolationHandler: currencyInterpolator,
})
.catch((reason: any) => Logger.error(TAG, 'Failed init i18n', reason))
RNLocalize.addEventListener('change', () => {
i18n
.changeLanguage(getLanguage())
.catch((reason: any) => Logger.error(TAG, 'Failed to change i18n language', reason))
})
// Create HOC wrapper that hoists statics
// https://react.i18next.com/latest/withtranslation-hoc#hoist-non-react-statics
export const withTranslation = (namespace: Namespaces) => (component: React.ComponentType) =>
hoistStatics(withTranslationI18Next(namespace)(component), component)
export default i18n
useEffect(() => {
if (countries && countries.length > 0) {
if (customer.addresses.length === 0) {
// Get country by locale
const userCountryByLocale = RNLocalize.getCountry();
const isUserCountrySupported = countries.find(country => country.id === userCountryByLocale);
if (isUserCountrySupported) {
setValues({
...form,
firstName: customer.firstname,
lastName: customer.lastname,
country: isUserCountrySupported.id,
state: '',
});
}
}
}
}, [countries]);
import * as RNLocalize from 'react-native-localize';
import I18n from 'i18next';
import en from './en';
import fr from './fr';
const locales = RNLocalize.getLocales();
I18n.init({
debug: true,
useLocalStorage: true,
lng: locales[0].languageCode,
fallbackLng: 'en',
resources: { fr: { translation: fr }, en: { translation: en }, 'fr-FR': { translation: fr } },
});
export default I18n;
render() {
return (
render() {
if (!this.state.isTranslationLoaded) {
return ;
}
return (
}
return (
render() {
return (