i18n-railslove

dependencies_package.json

{
  "dependencies": {
    "i18next": "^19.8.4",
    "i18next-browser-languagedetector": "^6.0.1",
    "i18next-http-backend": "^1.0.21",
    "react-i18next": "^11.7.3"
  },
  "devDependencies": {
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "i18next-parser": "^3.3.0"
  }
}

i18next-parser.config.js

module.exports = {
  locales: ['ar', 'de', 'en', 'fa', 'fr', 'ru', 'tr'],
  input: ['src/**/*.js', '!src/**/*.test.js'],
  output: 'locales/$LOCALE/$NAMESPACE.json',
  keySeparator: false,
  useKeysAsDefaultValue: true,
  lexers: {
    hbs: ['HandlebarsLexer'],
    handlebars: ['HandlebarsLexer'],

    htm: ['HTMLLexer'],
    html: ['HTMLLexer'],

    mjs: ['JavascriptLexer'],
    js: ['JsxLexer'], // if you're writing jsx inside .js files, change this to JsxLexer
    ts: ['JavascriptLexer'],
    jsx: ['JsxLexer'],
    tsx: ['JsxLexer'],

    default: ['JavascriptLexer']
  },
  sort: true
}

locales_en_example.json

{
  "Abmelden": "Logout",
  "changeLanguage": "Switch to German",
  "Impressum": "Imprint",
  "imprintUrl": "https://www.aedifion.com/en/imprint/",
  "Update": "Load latest app version",
  "UpdateHint": "This version of the app is outdated. Please tap the button below to download the latest version."
}

scripts_package.json

{
  "scripts": {
    "i18n": "i18next -c 'i18next-parser.config.js'",
    "i18n:check-clean": "node ./scripts/check-i18n-clean.js"
  }
}

src_i18n.ts

import i18n from "i18next"
import { initReactI18next } from "react-i18next"
import * as Localization from "expo-localization"

export const locales = {
  de: {
    projectScreen: require("../locales/de/projectScreen.json"),
    navigation: require("../locales/de/navigation.json"),
    notifications: require("../locales/de/notifications.json"),
    dataPointScreen: require("../locales/de/dataPointScreen.json"),
    privacyScreen: require("../locales/de/privacyScreen.json"),
  },
  en: {
    projectScreen: require("../locales/en/projectScreen.json"),
    navigation: require("../locales/en/navigation.json"),
    notifications: require("../locales/en/notifications.json"),
    dataPointScreen: require("../locales/en/dataPointScreen.json"),
    privacyScreen: require("../locales/en/privacyScreen.json"),
  },
}

export const systemLanguage = Localization.locale.split("-")[0] // en-US -> en

export function changeLanguage(nextLanguage: string | null): void {
  if (nextLanguage && i18n.language !== nextLanguage) {
    i18n.changeLanguage(nextLanguage)
  }
}

i18n.use(initReactI18next).init({
  returnEmptyString: true,
  fallbackLng: "en",
  lng: systemLanguage,
  resources: locales,
  keySeparator: false,
  interpolation: {
    escapeValue: false, // react already saves from xss
  },
})

export default i18n