translations are global

[vonovak]

hi! my idea was that the translations can be specified per-component, that is, in component A I can do

import I18n from 'react-native-i18n'
I18n.translations = {
  en: {
    aaaa: 'aaaa',
  },
}

and later in component B I can do

import I18n from 'react-native-i18n'
I18n.translations = {
  en: {
    bbbb: 'bbbb',
  },
}

However, the only translations available will be the ones defined in B (the assignment rewrites what was assigned in A). Are there mechanisms to (1) merge the translations together (2) keep the translations local (having many of the i18n objects that do not share state?). Thanks!

[pavlelekic]

I have the same problem. I'm trying to build a library of reusable components, I would prefer to have translations local to the component.

[vonovak]

@pavlelekic fyi I ended up having one file with all translations in it and I think it is better than having X translations files scattered around because 1) It is kinda difficult to collect the strings for translation and then "inserting" the translations back 2) lots of strings (at least in my case) are reused all round the app.

[pavlelekic]

I have a different use case, I need to have separate translations because I have one components library that is being used across several applications, so that component library needs to have separate translations for itself. Also, I find it easier for maintenance if I have translations for a specific component colocated with that component. If I remove a component from the library, I just remove the whole directory where the component lived and everything related to that component was there, I don't have to worry about removing some leftovers.

[vonovak]

you may find this helpful https://github.com/lttb/module-i18n.

[pavlelekic]

http://i18next.com/ might be also a good option, I've seen in the docs that you can create multiple instances, so it's not a single global instance, and it has a lot of stars/contributors/commits/releases so far so it seems it's a more mature project.

[ajostergaard]

Doesn't structuring like below sort this out?

I18n.translations = {
  'en': {
    'DASHBOARD': {
      'AVAILABLE_BALANCE': 'Hi!'
    }
  }
};

[zoontek]

It's an issue with I18n.js. You can use NativeModules.RNI18n.languages and NativeModules.RNI18n.getLanguages() to initialise the library of your choice :)

Take a look at: https://github.com/AlexanderZaytsev/react-native-i18n/blob/master/index.js