Implement language switching

[adrianxx321]

This is referring to the feature as requested in #249, i.e, to have language switching mechanism when the app is running.

First of all, apologize if I have been overdoing it as I introduced a new screen under settings that allows for languages selection. I admit the changes that I've made is quite a lot, but no worries as most of the changes involved are just adding the translation entries for the associated translation files.

Right now, the behaviour of language switching is of only minimal, like what is mentioned in the ticket #249 where I couldn't actually change the language for the entire app, but I believe having able to see the name of the month changed (see screenshot below) should indicate that I've implemented the desired mechanism. By the way, even though I observed the language is currently set once in the App.tsx, I didn't make any change to it. Instead, I just added a new entry under userPreferences store to keep track of the language selected which will be reflected in the new language settings screen, and then from the languages screen when the language is changed, I used the setLanguage property as provided in the LocalizationContext, thereby achieving the desired mechanism.

Below are the screenshot showing the sign of language being changed as well as a demo in GIF to better show that behaviour.

Last but not least, I am proud to be able to contribute to the localisation feature of this app. I strongly believe that once we figure out the way of making language switching to cover the rest of the UI, at one day, this app will definitely have significantly greater worldwide reachability, to help save our planet!

Thank you.

[PierreBresson]

Almost there 🙂

[PierreBresson]

Let's change to supportedLanguages instead since it's not a class/component but just a static list. Could you move this file to utils/translations? And change it the following :

import { locale } from "expo-localization";

const supportedLanguages = { ... }

const currentLanguage = Object.keys(supportedLanguages).includes(locale.substr(0, 2))
  ? locale.substr(0, 2)
  : supportedLanguages[0];

export { currentLanguage, supportedLanguages };

[PierreBresson]

See my other comment on SupportedLanguages.ts
Then you can do something like :

import { currentLanguage } from "utils";
...
language: currentLanguage

[PierreBresson]

(Same here) see my other comment on SupportedLanguages.ts
Then you can do something like :

import { currentLanguage } from "utils";
...
language: currentLanguage

[PierreBresson]

You are missing 2 languages : Swedish & Danish (and maybe chinese which might come soon as well depending on who merge first).

[PierreBresson]

Remove these changes from rowItems.
Instead, add the following at the end of rowItems :

  if (__DEV__) {
    rowItems.push({
      title: t("SETTINGS_SCREEN_LANGUAGES"),
      onPress: navigator.openLanguages,
    });
  }

Reason is, this cannot be send to prod as it is, since this is just changing the date language and not the entire app language.

[PierreBresson]

"SETTINGS_SCREEN_LANGUAGES": "Språk"

[adrianxx321]

Oh dear, I thought sv meant Slovenian, but it turns out to be Swedish 😅

[PierreBresson]

Once you have merged main into your branch, here is how to fix eslint issues :

import { StackNavigationOptions } from "@react-navigation/stack";
...
const navigationOptions = (): StackNavigationOptions => ({

[PierreBresson]

@adrianxx321 thanks for the help 🤗