How to switch between translations? about rnn-starter

[kanzitelli]

Hey @Yasir5247! I have added an example of nav&tab bars title translations. Basically, if you change a language in the Settings screen, the app will reload itself and all new translations will be applied.

[kanzitelli]

@Yasir5247 you are welcome! I have added a working (production-ready) example in #52 for language switching. Now you can force to use a specific language as well as make it dependent on the system language. The same logic is applied to Appearance settings (light/dark mode).

[kanzitelli]

hey @Yasir5247! What I usually do is the following:

import {services} from '../services';
// ...
topBar: {
        ...withTitle(services.t.do('home.title')),
}

And as I see now, It will work only from the app launch, but if you want to toggle in-app language switch, then it's not gonna work, you will need to close the app and then open it again. This might be enough for some cases but I will think about the easiest way to achieve it with in-app switch.

[kanzitelli]

@Yasir5247 hey, could specify what you mean?
For more information, you could check the translation service under src/services/translate/index.ts and play around with it. Also, you can add other translations in translations.ts file.

[Yasir5247]

src/services/translate/translations.ts
I have two objects in the file. one is English and another one is some other language.
I'm trying to switch between languages from the UI. I was hoping if there was a demo to achieve this in this repo if possible.

[kanzitelli]

@Yasir5247
There is no demo in this repo at the moment, but it would be great to have it! I will work on it and release it in one of the next versions (after integrating RN 0.65 in #48, which is almost done).

If you'd like to achieve it now, I can give you some tips:

1. Add change function to src/services/translate/index.ts

change = (l: 'en' | 'ru'): void => {
  i18n.locale = l;
};

2. Add UI related code to src/screens/settings.tsx

export const Settings: NavigationFunctionComponent = observer(() => {
  const { t, nav } = useServices();

  // ...
 
  const changeLanguage = () => {
    t.change('ru'); // change to desired language
    nav.start('three_tabs'); // after changing language, we need to do setRoot() again
  };

  // ...
  
  return (
    // ...
      <Section bg title="General">
        <Action title="Toggle theme" info={ui.themeMode} onPress={ui.toggleThemeMode} />
        <Action title="Change language" icon="share-outline" onPress={changeLanguage} />
    // ...
  );
}

For the full correct implementation, the current language should be stored in the UI store, which I will do later.

[Yasir5247]

This is great. This repo saved my life. Good work and appreciate for the effort.

[Yasir5247]

I wonder how would you go about translation for navigational components. any hint?