[TS migration] Migrate 'Picker' and 'LocalePicker' components to TypeScript

package.json

@@ -143,7 +143,7 @@
     "react-native-pdf": "^6.7.3",
     "react-native-performance": "^5.1.0",
     "react-native-permissions": "^3.9.3",
-    "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2",
+    "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#0d15d4618f58e99c1261921111e68ee85bb3c2a8",
     "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",

src/ONYXKEYS.ts

@@ -398,7 +398,7 @@ type OnyxValues = {
     [ONYXKEYS.IS_PLAID_DISABLED]: boolean;
     [ONYXKEYS.PLAID_LINK_TOKEN]: string;
     [ONYXKEYS.ONFIDO_TOKEN]: string;
-    [ONYXKEYS.NVP_PREFERRED_LOCALE]: ValueOf<typeof CONST.LOCALES>;
+    [ONYXKEYS.NVP_PREFERRED_LOCALE]: OnyxTypes.Locale;
     [ONYXKEYS.USER_WALLET]: OnyxTypes.UserWallet;
     [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido;
     [ONYXKEYS.WALLET_ADDITIONAL_DETAILS]: OnyxTypes.WalletAdditionalDetails;

src/components/LocalePicker.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
+import * as App from '@userActions/App';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Locale} from '@src/types/onyx';
+import Picker from './Picker';
+import type {PickerSize} from './Picker/types';
+
+type LocalePickerOnyxProps = {
+    /** Indicates which locale the user currently has selected */
+    preferredLocale: OnyxEntry<Locale>;
+};
+
+type LocalePickerProps = LocalePickerOnyxProps & {
+    /** Indicates size of a picker component and whether to render the label or not */
+    size?: PickerSize;
+};
+
+function LocalePicker({preferredLocale = CONST.LOCALES.DEFAULT, size = 'normal'}: LocalePickerProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const localesToLanguages = CONST.LANGUAGES.map((language) => ({
+        value: language,
+        label: translate(`languagePage.languages.${language}.label`),
+        keyForList: language,
+        isSelected: preferredLocale === language,
+    }));
+
+    return (
+        <Picker
+            label={size === 'normal' ? translate('languagePage.language') : null}
+            onInputChange={(locale) => {
+                if (locale === preferredLocale) {
+                    return;
+                }
+
+                App.setLocale(locale);
+            }}
+            items={localesToLanguages}
+            size={size}
+            value={preferredLocale}
+            containerStyles={size === 'small' ? styles.pickerContainerSmall : {}}
+            backgroundColor={theme.signInPage}
+        />
+    );
+}
+
+LocalePicker.displayName = 'LocalePicker';
+
+export default withOnyx<LocalePickerProps, LocalePickerOnyxProps>({
+    preferredLocale: {
+        key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+    },
+})(LocalePicker);