Support for .yaml file type for language

[chandankumar4]

🚀 Feature Proposal

Motivation

• It's a little bit difficult to manage the .json file type for language, Is there a way to use the .yaml file type

Please outline the motivation for the proposal.

Example

Instead of translation.json we could use translation.yaml

[jamuhl]

depends on the backend loading...https://github.com/i18next/i18next-http-backend#backend-options -> check the parse option (parse yaml)

[chandankumar4]

Thanks, @jamuhl for responding but looks like file with .yaml type is not supporting
for example, I'm trying the below code but it's not working.

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

const languages = ['en'];
i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    whitelist: languages,
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.yaml',
    },
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  });

export default i18n;

In place of .yaml if i put .json then it is working 👎

[jamuhl]

like said...have a look at parse option...just changing the loadPath is not enough -> you will have to define how to parse yaml to js object

[chandankumar4]

okay! Thanks @jamuhl it worked. Just need to add more code as below

Reference for other's

import yaml from 'js-yaml';

backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.yaml',
      parse: function(data) { return yaml.load(data) },
    },

[scgough]

I'm having a little trouble getting this up and running in react-native. I can get everything working with JSON files but I'd like to use YAML.

I have the following set up:

babel.config.js

module.exports = { 
    ...
    plugins: [
       ...
       [
            'content-transformer',
            {
            transformers: [
                {
                    file: /\.ya?ml$/,
                    format: 'yaml',
                 },
             ],
             },
        ],
    ]
}

i18n.js

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
import yaml from 'js-yaml';

const languages = ['en','fr'];
const nspaces = ['home'];
i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    whitelist: languages,
    ns: nspaces,
    backend: {
      loadPath: '/app/locales/{{lng}}/{{ns}}.yml',
      parse: function(data) { return yaml.load(data) },
    },
    interpolation: {
      escapeValue: false,
    },
  });

I have a locales folder in /app/locales (I've also tried moving this around) but I get the error:

i18next::backendConnector: loading namespace home for language en failed TypeError: Network request failed

Files are in the following folders within locales

• /en/home.yml
• /fr/home.yml

I've tried connected and disconnected from RN debugger.
I'm testing on an iOS simulator.

Is there anything else I need to do or can anyone offer advice to help get this up and running?