[PB-6004] feature/Enabled react compiler

.eslintrc

@@ -1,10 +1,12 @@
 {
   "extends": "@internxt/eslint-config-internxt",
+  "plugins": ["react-compiler"],
   "env": {
     "es2020": true
   },
   "rules": {
-    "max-len": "off"
+    "max-len": "off",
+    "react-compiler/react-compiler": "error"
   },
   "ignorePatterns": [
     "env",

app.config.ts

@@ -21,6 +21,9 @@ const appConfig: ExpoConfig & { extra: AppEnv & { NODE_ENV: AppStage; RELEASE_ID
   version: packageVersion,
   orientation: 'portrait',
   newArchEnabled: true,
+  experiments: {
+    reactCompiler: true,
+  },
   splash: {
     image: './assets/images/splash.png',
     resizeMode: 'cover',

package.json

@@ -151,9 +151,11 @@
     "@welldone-software/why-did-you-render": "^7.0.1",
     "autoprefixer": "^10.4.23",
     "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-react-compiler": "^1.0.0",
     "concurrently": "^9.2.1",
     "detox": "^19.7.0",
     "eslint": "^8.8.0",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "husky": "^9.1.7",
     "jest": "^29.3.1",
     "jest-expo": "~54.0.16",

src/components/drive/lists/items/DriveGridModeItem/DriveGridModeItem.tsx

@@ -20,6 +20,7 @@ function DriveGridModeItemComp(props: DriveItemProps): JSX.Element {
   const tailwind = useTailwind();
   const getColor = useGetColor();
   const user = useAppSelector((state) => state.auth.user);
+  const language = useAppSelector((state) => state.app.language);
   const [downloadedThumbnail, setDownloadedThumbnail] = useState<DownloadedThumbnail | null>(null);
   const [maxThumbnailWidth, setMaxThumbnailWidth] = useState<number | null>(null);
   const thumbnailSize = downloadedThumbnail || null;
@@ -171,7 +172,7 @@ function DriveGridModeItemComp(props: DriveItemProps): JSX.Element {
             </AppText>
             {props.data.createdAt ? (
               <AppText style={[tailwind('text-xs mt-1'), { color: getColor('text-gray-50') }, { lineHeight: 14 }]}>
-                {time.getFormattedDate(props.data.createdAt, time.formats.shortDate)}
+                {time.getFormattedDate(props.data.createdAt, time.formats.shortDate, language)}
               </AppText>
             ) : null}
             {props.data.size ? (

src/components/drive/lists/items/DriveListModeItem/DriveListModeItem.tsx

@@ -5,6 +5,7 @@ import { ArrowCircleUp, DotsThree, Link, XCircle } from 'phosphor-react-native';
 import prettysize from 'prettysize';
 import strings from '../../../../../../assets/lang/strings';
 import { FolderIcon, getFileTypeIcon } from '../../../../../helpers';
+import { useAppSelector } from '../../../../../store/hooks';
 import ProgressBar from '../../../../AppProgressBar';
 import AppText from '../../../../AppText';
 
@@ -18,6 +19,7 @@ import { DriveItemProps } from '../../../../../types/drive/ui';
 export function DriveListModeItem(props: DriveItemProps): JSX.Element {
   const tailwind = useTailwind();
   const getColor = useGetColor();
+  const language = useAppSelector((state) => state.app.language);
 
   const iconSize = 40;
   const IconFile = getFileTypeIcon(props.data.type || '');
@@ -29,7 +31,7 @@ export function DriveListModeItem(props: DriveItemProps): JSX.Element {
 
   const getUpdatedAt = () => {
     if (props.data.createdAt) {
-      return time.getFormattedDate(props.data.createdAt, time.formats.dateAtTime);
+      return time.getFormattedDate(props.data.createdAt, time.formats.dateAtTime, language);
     }
 
     return '';

src/components/drive/lists/items/index.tsx

@@ -22,6 +22,7 @@ function DriveItemTable(props: DriveItemProps): JSX.Element {
   const getColor = useGetColor();
 
   const { selectedItems } = useAppSelector((state) => state.drive);
+  const language = useAppSelector((state) => state.app.language);
   const isSelectionMode = selectedItems.length > 0;
   const spinValue = new Animated.Value(1);
   const iconSize = 40;
@@ -41,7 +42,7 @@ function DriveItemTable(props: DriveItemProps): JSX.Element {
   }, []);
 
   const getUpdatedAt = () => {
-    return time.getFormattedDate(props.data.createdAt, time.formats.dateAtTime);
+    return time.getFormattedDate(props.data.createdAt, time.formats.dateAtTime, language);
   };
 
   const handleItemPress = () => {

src/components/modals/LanguageModal/index.tsx

@@ -1,12 +1,12 @@
-import { CheckCircle, CircleIcon } from 'phosphor-react-native';
-import { useEffect, useState } from 'react';
+import { CheckCircleIcon, CircleIcon } from 'phosphor-react-native';
+import { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import useGetColor from 'src/hooks/useColor';
 import { appThunks } from 'src/store/slices/app';
 import { Language } from 'src/types';
 import { useTailwind } from 'tailwind-rn';
 import strings from '../../../../assets/lang/strings';
-import { useAppDispatch } from '../../../store/hooks';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import { BaseModalProps } from '../../../types/ui';
 import AppButton from '../../AppButton';
 import AppText from '../../AppText';
@@ -17,14 +17,17 @@ const LanguageModal = (props: BaseModalProps) => {
   const tailwind = useTailwind();
   const getColor = useGetColor();
   const [isLoading, setIsLoading] = useState(false);
-  const [language, setLanguage] = useState(strings.getLanguage());
-  const isDirty = language !== strings.getLanguage();
+  const savedLanguage = useAppSelector((state) => state.app.language);
+  const [language, setLanguage] = useState<Language>(savedLanguage);
+  const isDirty = language !== savedLanguage;
+
   const onCancelButtonPressed = () => {
     props.onClose();
   };
+
   const onApplyButtonPressed = async () => {
     setIsLoading(true);
-    dispatch(appThunks.changeLanguageThunk(language as Language))
+    dispatch(appThunks.changeLanguageThunk(language))
       .unwrap()
       .then(() => {
         props.onClose();
@@ -34,6 +37,7 @@ const LanguageModal = (props: BaseModalProps) => {
         setIsLoading(false);
       });
   };
+
   const renderRadioButtons = () =>
     Object.values(Language).map((l, index) => {
       const isSelected = language === l;
@@ -48,7 +52,7 @@ const LanguageModal = (props: BaseModalProps) => {
             <View style={tailwind('flex-row items-center')}>
               <View style={tailwind('px-2.5')}>
                 {isSelected ? (
-                  <CheckCircle weight="fill" color={getColor('text-primary')} />
+                  <CheckCircleIcon weight="fill" color={getColor('text-primary')} />
                 ) : (
                   <CircleIcon weight="thin" color={getColor('text-gray-20')} />
                 )}
@@ -68,12 +72,6 @@ const LanguageModal = (props: BaseModalProps) => {
       );
     });
 
-  useEffect(() => {
-    if (props.isOpen) {
-      setLanguage(strings.getLanguage());
-    }
-  }, [props.isOpen]);
-
   return (
     <BottomModal
       isOpen={props.isOpen}

src/screens/SettingsScreen/index.tsx

@@ -15,7 +15,6 @@ import { Linking, Platform, ScrollView, View } from 'react-native';
 import AppSwitch from '../../components/AppSwitch';
 
 import { storageSelectors } from 'src/store/slices/storage';
-import { Language } from 'src/types';
 import { useTailwind } from 'tailwind-rn';
 import strings from '../../../assets/lang/strings';
 import AppScreen from '../../components/AppScreen';
@@ -55,6 +54,7 @@ function SettingsScreen({ navigation }: SettingsScreenProps<'SettingsHome'>): JS
 
   const showBilling = useAppSelector(paymentsSelectors.shouldShowBilling);
   const { user } = useAppSelector((state) => state.auth);
+  const currentLanguage = useAppSelector((state) => state.app.language);
   const usagePercent = useAppSelector(storageSelectors.usagePercent);
   const [profileAvatar, setProfileAvatar] = useState<string>();
   const userFullName = useAppSelector(authSelectors.userFullName);
@@ -267,7 +267,7 @@ function SettingsScreen({ navigation }: SettingsScreenProps<'SettingsHome'>): JS
                       </View>
                       <View style={tailwind('flex-row items-center')}>
                         <AppText style={[tailwind('mr-2.5'), { color: getColor('text-gray-40') }]}>
-                          {strings.languages[strings.getLanguage() as Language]}
+                          {strings.languages[currentLanguage]}
                         </AppText>
                         <CaretRight color={getColor('text-gray-40')} size={20} />
                       </View>

src/services/common/time/time.service.ts

@@ -37,9 +37,9 @@ export class TimeService {
    * HH   ->  Hours of the date
    * mm   ->  Minutes of the date
    */
-  getFormattedDate(input: TimeInput, format: string) {
+  getFormattedDate(input: TimeInput, format: string, lang?: string) {
     const dateTime = this.getDateTime(input);
-    const lang = strings.getLanguage();
+    const resolvedLang = lang ?? strings.getLanguage();
     const date = new Date(input);
 
     // Workaround for Hermes (React Native JS engine) bug with locale-sensitive month tokens.
@@ -56,15 +56,15 @@ export class TimeService {
     let resolvedFormat = format;
     if (resolvedFormat.includes('LLLL')) {
       try {
-        const monthLong = new Intl.DateTimeFormat(lang, { month: 'long' }).format(date);
+        const monthLong = new Intl.DateTimeFormat(resolvedLang, { month: 'long' }).format(date);
         resolvedFormat = resolvedFormat.replaceAll('LLLL', `'${monthLong}'`);
       } catch {
         // falls back to luxon default (English)
       }
     }
     if (resolvedFormat.includes('LLL')) {
       try {
-        const monthShort = new Intl.DateTimeFormat(lang, { month: 'short' }).format(date);
+        const monthShort = new Intl.DateTimeFormat(resolvedLang, { month: 'short' }).format(date);
         resolvedFormat = resolvedFormat.replaceAll('LLL', `'${monthShort}'`);
       } catch {
         // falls back to luxon default (English)