Use system's preferred language for iOS

src/App.tsx

@@ -14,6 +14,7 @@ import * as Sentry from '@sentry/react-native'
 import AccessibilityManager from '@utils/accessibility/AccessibilityManager'
 import { changeLanguage, getSettingsLanguage } from '@utils/slices/settingsSlice'
 import ThemeManager from '@utils/styles/ThemeManager'
+import * as Localization from 'expo-localization'
 import * as SplashScreen from 'expo-splash-screen'
 import React, { useCallback, useEffect, useState } from 'react'
 import { LogBox, Platform } from 'react-native'
@@ -81,9 +82,15 @@ const App: React.FC = () => {
               log('log', 'App', 'bootstrapped')
               if (bootstrapped) {
                 log('log', 'App', 'loading actual app :)')
-                const language = getSettingsLanguage(store.getState())
+                log('log', 'App', `Locale: ${Localization.locale}`)
+                const language =
+                  Platform.OS === 'ios'
+                    ? Localization.locale
+                    : getSettingsLanguage(store.getState())
                 if (!language) {
-                  store.dispatch(changeLanguage('en'))
+                  if (Platform.OS !== 'ios') {
+                    store.dispatch(changeLanguage('en'))
+                  }
                   i18n.changeLanguage('en')
                 } else {
                   i18n.changeLanguage(language)

src/screens/Tabs/Me/Settings/App.tsx

@@ -16,8 +16,10 @@ import {
   getSettingsStaticEmoji,
   changeStaticEmoji
 } from '@utils/slices/settingsSlice'
+import * as Localization from 'expo-localization'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Linking, Platform } from 'react-native'
 import { useSelector } from 'react-redux'
 import { mapFontsizeToName } from '../SettingsFontsize'
 
@@ -37,18 +39,20 @@ const SettingsApp: React.FC = () => {
     <MenuContainer>
       <MenuRow
         title={t('me.settings.fontsize.heading')}
-        content={t(
-          `me.settings.fontsize.content.${mapFontsizeToName(settingsFontsize)}`
-        )}
+        content={t(`me.settings.fontsize.content.${mapFontsizeToName(settingsFontsize)}`)}
         iconBack='ChevronRight'
         onPress={() => navigation.navigate('Tab-Me-Settings-Fontsize')}
       />
       <MenuRow
         title={t('me.settings.language.heading')}
         // @ts-ignore
-        content={LOCALES[i18n.language]}
+        content={LOCALES[Platform.OS === 'ios' ? Localization.locale : i18n.language]}
         iconBack='ChevronRight'
-        onPress={() => navigation.navigate('Tab-Me-Settings-Language')}
+        onPress={() =>
+          Platform.OS === 'ios'
+            ? Linking.openSettings()
+            : navigation.navigate('Tab-Me-Settings-Language')
+        }
       />
       <MenuRow
         title={t('me.settings.theme.heading')}