Feature/i18n

[facundoleites]

The web version has translations, but the app isn't right now. Even if it is only available in English, it would be nice to make the app ready to translate in the future.
In my opinion, it is better to do it as soon as possible when fewer screens and components are done to avoid a bigger refactor in the future

This can be done easily using expo-localization (https://docs.expo.dev/versions/latest/sdk/localization/) and i18n-js (https://www.npmjs.com/package/i18n-js).

I made some tests adding the i18n lib, the translation files for en and pt-BR, and refactoring the login and settings screens to use it

Test on Android device

Test on iOS Simulator

closes #174

[Kwasow]

Thanks for the PR, awesome work! We've been planing to do it soon, so good to have someone help out with it. The code looks good, I'll test it and then approve if everything works.

[Kwasow]

It works well, and I like how you implemented it, just a few minor details:

• Please move the "Language" settings between "Appearance" and "Push notifications" - I think it's logical for it to be in the section that allows you to "customize" the app
• when selecting a language (under the "Language" menu entry you created) would it be possible to show each language's name in its native language? (ex. English always shows up as "English" and Portuguese (Brazil) always shows up as "Portugues (Brasil)") I think this is how most apps do it, and it's also how it works in Android system language picker
• Do you know if it's possible to support per-app languages through system settings on Android and iOS

[Simon-Laux]

It would make sense to reuse the language files from the server / web version:

https://github.com/pixelfed/pixelfed/blob/dev/crowdin.yml
https://github.com/pixelfed/pixelfed/tree/dev/public/_lang

as they are already translated on crowdin: https://crowdin.com/project/pixelfed

I'm sure crowdin offers some way to pull/download the translations that is compatible with the common translation libraries.

[Kwasow]

I've walked to @dansup and we'll get separate translations. I think it will be cleaner that way

[facundoleites]

It works well, and I like how you implemented it, just a few minor details:

• Please move the "Language" settings between "Appearance" and "Push notifications" - I think it's logical for it to be in the section that allows you to "customize" the app
• when selecting a language (under the "Language" menu entry you created) would it be possible to show each language's name in its native language? (ex. English always shows up as "English" and Portuguese (Brazil) always shows up as "Portugues (Brasil)") I think this is how most apps do it, and it's also how it works in Android system language picker
• Do you know if it's possible to support per-app languages through system settings on Android and iOS

perfect!

1. I'll adjust the position of the language section to the position that you ask
2. I'll add the language name in the native language. I think its a really helpful feature
3. I don't know how to do that in React Native, but it seems not so hard, so I'm going to do some research

[Simon-Laux]

I've walked to @dansup and we'll get separate translations. I think it will be cleaner that way

that would mean more strings to translate, which means less completion overall because translators are not paid. speaking from experience in delta chat it makes sense to have one translation repo. for strings that don't match you can have strings that are just used on web or on desktop.

[Kwasow]

that would mean more strings to translate, which means less completion overall because translators are not paid. speaking from experience in delta chat it makes sense to have one translation repo. for strings that don't match you can have strings that are just used on web or on desktop.

I see your point. Let's see if we can reuse web strings when we get to the task of properly supporting other languages. I'd keep this PR as-is anyway, so we have something that we can build on in the future.

[fedeolto]

It works well, and I like how you implemented it, just a few minor details:

• Please move the "Language" settings between "Appearance" and "Push notifications" - I think it's logical for it to be in the section that allows you to "customize" the app
• when selecting a language (under the "Language" menu entry you created) would it be possible to show each language's name in its native language? (ex. English always shows up as "English" and Portuguese (Brazil) always shows up as "Portugues (Brasil)") I think this is how most apps do it, and it's also how it works in Android system language picker
• Do you know if it's possible to support per-app languages through system settings on Android and iOS

perfect!

1. I'll adjust the position of the language section to the position that you ask
2. I'll add the language name in the native language. I think its a really helpful feature
3. I don't know how to do that in React Native, but it seems not so hard, so I'm going to do some research

Regarding the 3rd point looks like this package does the job: react-native-localization-settings https://www.npmjs.com/package/react-native-localize/v/1.3.0

But looks like lacking timezone support to get the device timezone, that makes things easier when you want to show for ex. "3 hours ago" already formatted in the best way end translated.
To get the device timezone I used react-native-localize https://www.npmjs.com/package/react-native-localization-settings in the past

[Kwasow]

Regarding the 3rd point looks like this package does the job: react-native-localization-settings https://www.npmjs.com/package/react-native-localize/v/1.3.0

But looks like lacking timezone support to get the device timezone, that makes things easier when you want to show for ex. "3 hours ago" already formatted in the best way end translated.
To get the device timezone I used react-native-localize https://www.npmjs.com/package/react-native-localization-settings in the past

Thanks for doing the research. If it requires a separate package, then let's go without that.

[facundoleites]

Just made the adjustments @Kwasow
About the third point, as commented by @fedeolto , would be required to use another package specifically for that. About the timezones: expo-localization (the one we are using in this PR) seems to have some information about the user calendar https://docs.expo.dev/versions/latest/sdk/localization/#usecalendars

---

The current state with the adjustments

[Kwasow]

Looks good to me now! Thank you for your contribution. We will merge your changes soon.