// translate.ts import { createTranslations } from "react-ridge-translations"; // first describe which languages are allowed/required (Typescript) type TranslationLanguages = { nl: string; fr: string; be: string; }; // create a translation object with your translations const translate = createTranslations<TranslationLanguages>()( { homeScreen: { signIn: { nl: "yes", fr: "yes", be: "yes", }, welcomeText: ({ firstName }: { firstName: string }) => ({ nl: `Hoi ${firstName}`, fr: `Hello ${firstName}`, be: `Hello ${firstName}`, }), }, }, { language: "nl", fallback: "en", } ); export default translate;

import translate from "./translate"; export default function HomeScreen() { // use is a hook which will update automatically if language change :) const ht = translate.use().homeScreen; return ( <div> {ht.welcomeText({ firstName: "Richard" })} {ht.signIn} </div> ); }

import translate from "./translate"; translate.translations.homeScreen.loginButton;

import translate from "./translate"; // global translate.setOptions({ language: "nl", fallback: "en", }); translate.getOptions(); // hook const { language, fallback } = useOptions();

import { NativeModules, Platform } from "react-native"; import { createTranslations } from "react-ridge-translations"; // first describe which languages are allowed/required (Typescript) type TranslationLanguages = { nl: string; fr: string; en: string; }; const deviceLanguage = (Platform.OS === "ios" ? NativeModules.SettingsManager.settings.AppleLocale || NativeModules.SettingsManager.settings.AppleLanguages[0] // iOS 13 : NativeModules.I18nManager.localeIdentifier) || ""; const availableLanguages: (keyof TranslationLanguages)[] = ["nl", "en", "fr"]; const fallback = "en"; function getBestLanguage(): | typeof availableLanguages[number] | typeof fallback { return ( availableLanguages.find((al) => deviceLanguage.startsWith(al)) || fallback ); } const translate = createTranslations<TranslationLanguages>()( { // ........translations }, { language: getBestLanguage(), fallback, } ); export default translate;

import { createTranslations } from "react-ridge-translations"; // first describe which languages are allowed/required (Typescript) type TranslationLanguages = { nl: string; fr: string; en: string; }; const deviceLanguage = navigator.language; const availableLanguages: (keyof TranslationLanguages)[] = ["nl", "en", "fr"]; const fallback = "en"; function getBestLanguage(): | typeof availableLanguages[number] | typeof fallback { return ( availableLanguages.find((al) => deviceLanguage.startsWith(al)) || fallback ); } const translate = createTranslations<TranslationLanguages>()( { // ........translations }, { language: getBestLanguage(), fallback, } ); export default translate;