How can we define translations in AWS Amplify in a multi-level structure?

Question

I want to define my translation strings in a better structured way in AWS Amplify. Something similar to this:

export const strings = {
  en: {
    home: {
        icon: "Home",
    },
    profile: {
        fname: "Given name"
    }
  },
  de: {
    home: {
        icon: "Start",
    },
    profile: {
        fname: "Vorname"
    }
  },
};

However, such kind of structure is not recognisable for amplify. I mean I cannot get string like I18n.get('home.icon');

The question is, is there any way to organise the strings in such a way?

I know it is possible to split the strings in different files:

import { mergeDeepRight } from 'ramda';
import { strings as todosStrings } from './todos/strings';
import { strings as userStrings } from './user/strings';
I18n.putVocabularies(mergeDeepRight(todosStrings, userStrings));

But it seems still I must make sure that the variable names are unique throughout all files!

The other possibility is to use I18n.get('home').icon but it does not fulfil the fallback mechanism of i18n!

Answer 1

Seems intuitive, however, by comparison with other i18n libraries I came to this conclusion, to define the keys as x.y.z:

export const strings = {
  en: {
    "header.icon.home": "Home"
  },
  de: {
    "header.icon.home": "Start"
  },
};

Still if someone have any better experiences I would be happy to hear.