Closed Yasir5247 closed 3 years ago
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.
@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:
change
function to src/services/translate/index.ts
change = (l: 'en' | 'ru'): void => {
i18n.locale = l;
};
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.
This is great. This repo saved my life. Good work and appreciate for the effort.
@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).
I wonder how would you go about translation for navigational components. any hint?
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.
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.
@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.