Prevent invalid locale from being loaded (#2099)

src/locale/i18n.ts

@@ -1,8 +1,9 @@
-import {useLanguagePrefs} from '#/state/preferences'
-import {i18n} from '@lingui/core'
 import {useEffect} from 'react'
-import {messages as messagesEn} from './locales/en/messages'
+import {i18n} from '@lingui/core'
-import {messages as messagesHi} from './locales/hi/messages'
+
+import {useLanguagePrefs} from '#/state/preferences'
+import {messages as messagesEn} from '#/locale/locales/en/messages'
+import {messages as messagesHi} from '#/locale/locales/hi/messages'
 
 export const locales = {
   en: 'English',
@@ -18,15 +19,10 @@ export const defaultLocale = 'en'
  * @param locale any locale string
  */
 export async function dynamicActivate(locale: string) {
-  if (locale === 'en') {
+  if (locale === 'hi') {
-    i18n.loadAndActivate({locale, messages: messagesEn})
-    return
-  } else if (locale === 'hi') {
     i18n.loadAndActivate({locale, messages: messagesHi})
-    return
   } else {
     i18n.loadAndActivate({locale, messages: messagesEn})
-    return
   }
 }
 

src/locale/i18n.web.ts

@@ -1,6 +1,7 @@
-import {useLanguagePrefs} from '#/state/preferences'
-import {i18n} from '@lingui/core'
 import {useEffect} from 'react'
+import {i18n} from '@lingui/core'
+
+import {useLanguagePrefs} from '#/state/preferences'
 
 export const locales = {
   en: 'English',
@@ -16,8 +17,15 @@ export const defaultLocale = 'en'
  * @param locale any locale string
  */
 export async function dynamicActivate(locale: string) {
-  const {messages} = await import(`./locales/${locale}/messages`)
+  let mod: any
-  i18n.load(locale, messages)
+
+  if (locale === 'hi') {
+    mod = await import(`./locales/hi/messages`)
+  } else {
+    mod = await import(`./locales/en/messages`)
+  }
+
+  i18n.load(locale, mod.messages)
   i18n.activate(locale)
 }
 

src/view/screens/LanguageSettings.tsx

@@ -48,6 +48,7 @@ export function LanguageSettingsScreen(_props: Props) {
 
   const onChangePrimaryLanguage = React.useCallback(
     (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
+      if (!value) return
       if (langPrefs.primaryLanguage !== value) {
         setLangPrefs.setPrimaryLanguage(value)
       }
@@ -57,6 +58,7 @@ export function LanguageSettingsScreen(_props: Props) {
 
   const onChangeAppLanguage = React.useCallback(
     (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
+      if (!value) return
       if (langPrefs.appLanguage !== value) {
         setLangPrefs.setAppLanguage(value)
       }
@@ -100,6 +102,7 @@ export function LanguageSettingsScreen(_props: Props) {
 
           <View style={{position: 'relative'}}>
             <RNPickerSelect
+              placeholder={{}}
               value={langPrefs.appLanguage}
               onValueChange={onChangeAppLanguage}
               items={APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({
@@ -190,6 +193,7 @@ export function LanguageSettingsScreen(_props: Props) {
 
           <View style={{position: 'relative'}}>
             <RNPickerSelect
+              placeholder={{}}
               value={langPrefs.primaryLanguage}
               onValueChange={onChangePrimaryLanguage}
               items={LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({