diff --git a/.eslintrc.js b/.eslintrc.js
index 4909a24fe797..b76782af60f4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,7 +24,7 @@ const restrictedImportPatterns = [
];
module.exports = {
- extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'plugin:react-native-a11y/basic', 'prettier'],
+ extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'plugin:react-native-a11y/basic', 'plugin:@dword-design/import-alias/recommended', 'prettier'],
plugins: ['react-hooks', 'react-native-a11y'],
parser: 'babel-eslint',
ignorePatterns: ['!.*', 'src/vendor', '.github/actions/**/index.js', 'desktop/dist/*.js', 'dist/*.js', 'node_modules/.bin/**', 'node_modules/.cache/**', '.git/**'],
@@ -49,8 +49,31 @@ module.exports = {
touchables: ['PressableWithoutFeedback', 'PressableWithFeedback'],
},
],
+ '@dword-design/import-alias/prefer-alias': [
+ 'warn',
+ {
+ alias: {
+ '@assets': './assets',
+ '@components': './src/components',
+ '@hooks': './src/hooks',
+ // This is needed up here, if not @libs/actions would take the priority
+ '@userActions': './src/libs/actions',
+ '@libs': './src/libs',
+ '@navigation': './src/libs/Navigation',
+ '@pages': './src/pages',
+ '@styles': './src/styles',
+ // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+ '@src': './src',
+ },
+ },
+ ],
},
},
+ // This helps disable the `prefer-alias` rule to be enabled for specific directories
+ {
+ files: ['tests/**/*.js', 'tests/**/*.ts', 'tests/**/*.jsx', 'assets/**/*.js', '.storybook/**/*.js'],
+ rules: {'@dword-design/import-alias/prefer-alias': ['off']},
+ },
{
files: ['*.js', '*.jsx'],
settings: {
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 9d7efc7d4c29..3072b3354a84 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -5,7 +5,7 @@ on:
pull_request:
types: [opened, synchronize]
branches-ignore: [staging, production]
- paths: ['**.js', '**.ts', '**.tsx']
+ paths: ['**.js', '**.ts', '**.tsx', '**.json', '**.mjs', '**.cjs', 'config/.editorconfig', '.watchmanconfig', '.imgbotconfig']
jobs:
lint:
diff --git a/.imgbotconfig b/.imgbotconfig
new file mode 100644
index 000000000000..ff5c3345cc4d
--- /dev/null
+++ b/.imgbotconfig
@@ -0,0 +1,6 @@
+{
+ "ignoredFiles": [
+ "assets/images/empty-state_background-fade.png" // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+ ],
+ "aggressiveCompression": "false"
+}
diff --git a/.prettierrc.js b/.prettierrc.js
index ad1fafbb51be..bcc67708cc95 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -6,4 +6,7 @@ module.exports = {
arrowParens: 'always',
printWidth: 190,
singleAttributePerLine: true,
+ importOrder: ['@assets/(.*)$', '@components/(.*)$', '@hooks/(.*)$', '@libs/(.*)$', '@navigation/(.*)$', '@pages/(.*)$', '@styles/(.*)$', '@userActions/(.*)$', '@src/(.*)$', '^[./]'],
+ importOrderSortSpecifiers: true,
+ importOrderCaseInsensitive: true,
};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index a989960794f2..a89c720976c9 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,16 +1,16 @@
+import {PortalProvider} from '@gorhom/portal';
import React from 'react';
import Onyx from 'react-native-onyx';
import {SafeAreaProvider} from 'react-native-safe-area-context';
-import {PortalProvider} from '@gorhom/portal';
-import './fonts.css';
import ComposeProviders from '../src/components/ComposeProviders';
import HTMLEngineProvider from '../src/components/HTMLEngineProvider';
-import OnyxProvider from '../src/components/OnyxProvider';
import {LocaleContextProvider} from '../src/components/LocaleContextProvider';
-import {KeyboardStateProvider} from '../src/components/withKeyboardState';
+import OnyxProvider from '../src/components/OnyxProvider';
import {EnvironmentProvider} from '../src/components/withEnvironment';
+import {KeyboardStateProvider} from '../src/components/withKeyboardState';
import {WindowDimensionsProvider} from '../src/components/withWindowDimensions';
import ONYXKEYS from '../src/ONYXKEYS';
+import './fonts.css';
Onyx.init({
keys: ONYXKEYS,
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 3c5dbb41ea2c..fe58f3c0a6d8 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -28,6 +28,9 @@ module.exports = ({config}) => {
'react-native-web': '@expensify/react-native-web',
'@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.js'),
'@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
+
+ // Module alias support for storybook files, coping from `webpack.common.js`
+ ...custom.resolve.alias,
};
// Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values
diff --git a/android/app/build.gradle b/android/app/build.gradle
index cf8097adc18f..badc6ed25b07 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -90,8 +90,8 @@ android {
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
multiDexEnabled rootProject.ext.multiDexEnabled
- versionCode 1001039200
- versionName "1.3.92-0"
+ versionCode 1001039300
+ versionName "1.3.93-0"
}
flavorDimensions "default"
diff --git a/assets/emojis/common.js b/assets/emojis/common.js
index e8a8b15c2dd5..b7593b6e2960 100644
--- a/assets/emojis/common.js
+++ b/assets/emojis/common.js
@@ -1,11 +1,11 @@
import Smiley from '../images/emoji.svg';
-import AnimalsAndNature from '../images/emojiCategoryIcons/plant.svg';
+import Flags from '../images/emojiCategoryIcons/flag.svg';
import FoodAndDrink from '../images/emojiCategoryIcons/hamburger.svg';
-import TravelAndPlaces from '../images/emojiCategoryIcons/plane.svg';
-import Activities from '../images/emojiCategoryIcons/soccer-ball.svg';
import Objects from '../images/emojiCategoryIcons/light-bulb.svg';
import Symbols from '../images/emojiCategoryIcons/peace-sign.svg';
-import Flags from '../images/emojiCategoryIcons/flag.svg';
+import TravelAndPlaces from '../images/emojiCategoryIcons/plane.svg';
+import AnimalsAndNature from '../images/emojiCategoryIcons/plant.svg';
+import Activities from '../images/emojiCategoryIcons/soccer-ball.svg';
import FrequentlyUsed from '../images/history.svg';
const skinTones = [
diff --git a/assets/images/bell.svg b/assets/images/bell.svg
new file mode 100644
index 000000000000..6ba600dc695b
--- /dev/null
+++ b/assets/images/bell.svg
@@ -0,0 +1,6 @@
+
+
+
diff --git a/assets/images/bellSlash.svg b/assets/images/bellSlash.svg
new file mode 100644
index 000000000000..488acc4de05e
--- /dev/null
+++ b/assets/images/bellSlash.svg
@@ -0,0 +1,6 @@
+
+
+
diff --git a/assets/images/empty-state_background-fade.png b/assets/images/empty-state_background-fade.png
index e449ca1efa23..816ff7343310 100644
Binary files a/assets/images/empty-state_background-fade.png and b/assets/images/empty-state_background-fade.png differ
diff --git a/babel.config.js b/babel.config.js
index 3a49f3bccbe5..189c3379aa6d 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -41,6 +41,42 @@ const metro = {
['@babel/plugin-proposal-private-property-in-object', {loose: true}],
// The reanimated babel plugin needs to be last, as stated here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
'react-native-reanimated/plugin',
+ // Import alias for native devices
+ [
+ 'module-resolver',
+ {
+ extensions: [
+ '.native.js',
+ '.native.jsx',
+ '.native.ts',
+ '.native.tsx',
+ '.js',
+ '.jsx',
+ '.ts',
+ '.tsx',
+ '.ios.js',
+ '.ios.jsx',
+ '.ios.ts',
+ '.ios.tsx',
+ '.android.js',
+ '.android.jsx',
+ '.android.ts',
+ '.android.tx',
+ ],
+ alias: {
+ '@assets': './assets',
+ '@components': './src/components',
+ '@hooks': './src/hooks',
+ '@libs': './src/libs',
+ '@navigation': './src/libs/Navigation',
+ '@pages': './src/pages',
+ '@styles': './src/styles',
+ // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+ '@src': './src',
+ '@userActions': './src/libs/actions',
+ },
+ },
+ ],
],
};
diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index d8a24adefdc3..a22a9d55b2a3 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -189,6 +189,19 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
'react-native-web': '@expensify/react-native-web',
'react-content-loader/native': 'react-content-loader',
'lottie-react-native': 'react-native-web-lottie',
+
+ // Module alias for web & desktop
+ // https://webpack.js.org/configuration/resolve/#resolvealias
+ '@assets': path.resolve(__dirname, '../../assets'),
+ '@components': path.resolve(__dirname, '../../src/components/'),
+ '@hooks': path.resolve(__dirname, '../../src/hooks/'),
+ '@libs': path.resolve(__dirname, '../../src/libs/'),
+ '@navigation': path.resolve(__dirname, '../../src/libs/Navigation/'),
+ '@pages': path.resolve(__dirname, '../../src/pages/'),
+ '@styles': path.resolve(__dirname, '../../src/styles/'),
+ // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+ '@src': path.resolve(__dirname, '../../src/'),
+ '@userActions': path.resolve(__dirname, '../../src/libs/actions/'),
},
// React Native libraries may have web-specific module implementations that appear with the extension `.web.js`
diff --git a/docs/articles/expensify-classic/workspace-and-domain-settings/Tags.md b/docs/articles/expensify-classic/workspace-and-domain-settings/Tags.md
index 3ee1c8656b4b..2e6bd335ce4c 100644
--- a/docs/articles/expensify-classic/workspace-and-domain-settings/Tags.md
+++ b/docs/articles/expensify-classic/workspace-and-domain-settings/Tags.md
@@ -1,5 +1,94 @@
---
-title: Coming Soon
-description: Coming Soon
+title: Workspace Tags
---
-## Resource Coming Soon!
+# Overview
+You can use tags to assign expenses to a specific department, project, location, cost center, and more.
+
+Note that tags function differently depending on whether or not you connect Expensify to a direct account integration (i.e., QuickBooks Online, NetSuite, etc.). With that said, this article covers tags that work for all account setups.
+# How to use Tags
+Tags are a workspace-level feature. They’re generally used to code expenses to things like customers, projects, locations, or departments. at the expense level. You can have different sets of tags for different workspaces, allowing you to customize coding for cohorts of employees.
+
+With that said, tags come in two forms: single tags and multi-level tags.
+
+## Single Tags
+Single tags refer to the simplest version of tags, allowing users to code expenses on a single level. With a single tag setup, users will pick from the list of tags you created and make a single selection on each expense.
+## Multi-Level Tags
+On the other hand, Multi-Level Tags refer to a more advanced tagging system that allows you to code expenses in a hierarchical or nested manner. Unlike single tags, which are standalone labels, multi-level tags enable you to create a structured hierarchy of tags, with sub-tags nested within parent tags. This feature is particularly useful for organizations that require a more detailed and organized approach to expense tracking.
+# How to import single tags (no accounting integration connected)
+## Add single tags via spreadsheet
+To set up Tags, follow these steps:
+- Go to **Settings > Workspace > Group / Individual > [Workspace name] > Tags**.
+- You can choose to add tags one by one, or upload them in bulk via a spreadsheet.
+
+After downloading the CSV and creating the tags you want to import, go to the Tags section in the policy editor: Settings > Workspaces > Group > [Workspace name] > Tags
+ Enable multi-level tags by toggling the button.
+Click "Import from Spreadsheet" to bring in your CSV.
+ Indicate whether the first line contains the tag header.
+Choose if the tag list is independent or dependent (matching your CSV).
+Decide if your tags list includes GL codes.
+Upload your CSV or TSV file.
+Confirm your file and update your tags list.
+## Manually add single tags
+
+If you need to add Tags to your workspace manually, you can follow the steps below.
+
+On web:
+
+1. Navigate to Settings > Workspace > Group / Individual > [Workspace name] > Tags.
+2. Add new tags under Add a Category.
+
+On mobile:
+
+1. Tap the three-bar menu icon at the top left corner of the app
+2. Tap on Settings in the menu on the left side
+3. Scroll to the Workspace subhead and click on tags listed underneath the default policy
+4. Add new categories by tapping the + button in the upper right corner. To delete a category, on iOS swipe left, on Android press and hold. Tap a category name to edit it.
+
+# How to import multi-level tags (no accounting integration connected)
+To use multi-level tags, go to the Tags section in your workspace settings.
+Toggle on "Do you want to use multiple levels of tags?"
+
+This feature is available for companies with group workspaces and helps accountants track more details in expenses.
+
+If you need to make changes to your multi-level tags, follow these steps:
+1. Start by editing them in a CSV file.
+2. Import the revised tags into Expensify.
+3. Remember to back up your tags! Uploading a CSV will replace your existing settings.
+4. Safest Option: Download the old CSV from the Tags page using 'Export to CSV,' make edits, then import it.
+
+## Manage multi-level tags
+Once multi-level tagging has been set up, employees will be able to choose more than one tag per expense. Based on the choice made for the first tag, the second subset of tag options will appear. After the second tag is chosen, more tag lists can appear, customizable up to 5 tag levels.
+
+### Best Practices
+- Multi-level tagging is available for companies on group workspaces and is intended to help accountants track additional information at the expense line-item level.
+- If you need to make any changes to the Tags, you need to first make them on the CSV and import the revised Tags into Expensify.
+- Make sure to have a backup of your tags! Every time you upload a CSV it will override your previous settings.
+- The easiest way to keep the old CSV is to download it from the Tags page by clicking Export to CSV, editing the list, and then importing it to apply the changes.
+
+
+# How to import tags with an accounting integration connected
+If you have connected Expensify to a direct integration such as QuickBooks Online, QuickBooks Desktop, Sage Intacct, Xero, or NetSuite, then Expensify automatically imports XYZ from your accounting system as tags.
+
+When you first connect your accounting integration you’ll configure classes, customers, projects, departments locations, etc. to import as tags in Expensify.
+
+If you need to update your tags in Expensify, you will first need to update them in your accounting system, then sync the connection in Expensify by navigating to Settings > Workspace > Group > [Workspace Name] > Connection > Sync Now.
+
+Alternatively, if you update the tag details in your accounting integration, be sure to sync the policy connection so that the updated information is available on the workspace.
+
+# Deep Dive
+## Make tags required
+You can require tags for any workspace expenses by enabling People must tag expenses on the Tags page by navigating to Settings > Workspace > Group > [Workspace Name] > Tags.
+# FAQ
+
+## What are the different tag options?
+If you want your second tag to depend on the first one, use dependent tags. Include GL codes if needed, especially when using accounting integrations.
+For other scenarios, like not using accounting integrations, use independent tags, which can still include GL codes if necessary.
+
+
+## Are the multi-level tags only available with a certain subscription (pricing plan)?
+Multi-level tagging is only available with the Control type policy.
+
+## I can’t see "Do you want to use multiple level tags" feature on my company's expense workspace. Why is that?
+If you are connected to an accounting integration, you will not see this feature. You will need to add those tags in your integration first, then sync the connection.
+
+
diff --git a/docs/articles/new-expensify/integrations/accounting-integrations/QuickBooks-Online.md b/docs/articles/new-expensify/integrations/accounting-integrations/QuickBooks-Online.md
index aa5f40ee4e5d..7a0717eeb5d1 100644
--- a/docs/articles/new-expensify/integrations/accounting-integrations/QuickBooks-Online.md
+++ b/docs/articles/new-expensify/integrations/accounting-integrations/QuickBooks-Online.md
@@ -1,5 +1,320 @@
---
-title: QuickBooks Online
-description: QuickBooks Online
+title: The QuickBooks Online Integration
+description: Expensify's integration with QuickBooks Online streamlines your expense management.
+
---
-## Resource Coming Soon!
+# Overview
+
+The Expensify integration with QuickBooks Online brings in your expense accounts and other data and even exports reports directly to QuickBooks for easy reconciliation. Plus, with advanced features in QuickBooks Online, you can fine-tune coding settings in Expensify for automated data export to optimize your accounting workflow.
+
+## Before connecting
+
+It's crucial to understand the requirements based on your specific QuickBooks subscription:
+
+- While all the features are available in Expensify, their accessibility may vary depending on your QuickBooks Online subscription.
+- An error will occur if you try to export to QuickBooks with a feature enabled that isn't part of your subscription.
+- Please be aware that Expensify does not support the Self-Employed subscription in QuickBooks Online.
+
+# How to connect to QuickBooks Online
+
+## Step 1: Setup employees in QuickBooks Online
+
+Employees must be set up as either Vendors or Employees in QuickBooks Online. Make sure to include the submitter's email in their record.
+
+If you use vendor records, you can export as Vendor Bills, Checks, or Journal Entries. If you use employee records, you can export as Checks or Journal Entries (if exporting against a liability account).
+
+Additional Options for Streamlined Setup:
+
+- Automatic Vendor Creation: Enable “Automatically Create Entities” in your connection settings to automatically generate Vendor or Employee records upon export for submitters that don't already exist in QBO.
+- Employee Setup Considerations: If setting up submitters as Employees, ensure you activate QuickBooks Online Payroll. This will grant access to the Employee Profile tab to input employee email addresses.
+
+## Step 2: Connect Expensify and QuickBooks Online
+
+- Navigate to Settings > Workspaces > Group > [Workspace Name] > Connections > QuickBooks Online. Click Connect to QuickBooks.
+- Enter your QuickBooks Online Administrator’s login information and choose the QuickBooks Online Company File you want to connect to Expensify (you can connect one Company File per Workspace). Then Click Authorize.
+- Enter your QuickBooks Online Administrator’s login information and choose the QuickBooks Online Company File you want to connect to Expensify (you can connect one Company File per Workspace):
+
+Exporting Historical Reports to QuickBooks Online:
+
+After connecting QuickBooks Online to Expensify, you may receive a prompt to export all historical reports from Expensify. To export multiple reports at once, follow these steps:
+
+a. Go to the Reports page on the web.
+
+b. Tick the checkbox next to the reports you want to export.
+
+c. Click 'Export To' and select 'QuickBooks Online' from the drop-down list.
+
+If you don't want to export specific reports, click “Mark as manually entered” on the report.
+
+# How to configure export settings for QuickBooks Online
+
+Our QuickBooks Online integration offers a range of features. This section will focus on Export Settings and how to set them up.
+
+## Preferred Exporter
+
+Any Workspace admin can export to your accounting integration, but the Preferred Exporter can be chosen to automate specific steps. You can set this role from Settings > Workspaces > Group > [Workspace Name] > Connections > Configure > Export > Preferred Exporter.
+
+The Preferred Exporter:
+
+- Is the user whose Concierge performs all automated exports on behalf of.
+- Is the only user who will see reports awaiting export in their **Home.**
+- Must be a **Domain Admin** if you have set individual GL accounts for Company Card export.
+- Must be a **Domain Admin** if this is the Preferred Workspace for any Expensify Card domain using Automatic Reconciliation.
+
+## Date
+
+When exporting reports to QuickBooks Online, you can choose the report's **submitted date**, the report's **exported date**, or the **date of the last expense on the report.**
+
+Most export options (Check, Journal Entry, and Vendor Bill) will create a single itemized entry with one date.
+Please note that if you choose a Credit Card or Debit Card for non-reimbursable expenses, we'll use the transaction date on each expense during export.
+
+# Reimbursable expenses
+
+Reimbursable expenses export to QuickBooks Online as:
+
+- Vendor Bills
+- Checks
+- Journal Entries
+
+## Vendor bill (recommended)
+
+This is a single itemized vendor bill for each Expensify report. If the accounting period is closed, we will post the vendor bill on the first day of the next open period. If you export as Vendor Bills, you can also choose to Sync reimbursed reports (set on the Advanced tab). **An A/P account is required to export to a vendor bill. Here is a screenshot of how your expenses map in QuickBooks.**
+
+The submitter will be listed as the vendor in the vendor bill.
+
+## Check
+
+This is a single itemized check for each Expensify report. You can mark a check to be printed later in QuickBooks Online.
+
+## Journal entry
+
+This is a single itemized journal entry for each Expensify report.
+
+# Non-reimbursable expenses
+
+Non-reimbursable expenses export to QuickBooks Online as:
+
+- Credit Card expenses
+- Debit Card Expenses
+- Vendor Bills
+
+## Credit/debit card
+
+Using Credit/Debit Card Transactions:
+
+- Each expense will be exported as a bank transaction with its transaction date.
+- If you split an expense in Expensify, we'll consolidate it into a single credit card transaction in QuickBooks with multiple line items posted to the corresponding General Ledger accounts.
+
+Pro-Tip: To ensure the payee field in QuickBooks Online reflects the merchant name for Credit Card expenses, ensure there's a matching Vendor in QuickBooks Online. Expensify checks for an exact match during export. If none are found, the payee will be mapped to a vendor we create and labeled as Credit Card Misc. or Debit Card Misc.
+
+If you centrally manage your company cards through Domains, you can export expenses from each card to a specific account in QuickBooks.
+
+## Vendor Bill
+
+- A single detailed vendor bill is generated for each Expensify report. If the accounting period is closed, the vendor bill will be posted on the first day of the next open period. If you choose to export non-reimbursable expenses as Vendor Bills, you can assign a default vendor to the bill.
+- The export will use your default vendor if you have Default Vendor enabled. If the Default Vendor is disabled, the report's submitter will be set as the Vendor in QuickBooks.
+
+Billable Expenses:
+
+- In Expensify, you can designate expenses as billable. These will be exported to QuickBooks Online with the billable flag. - This feature applies only to expenses exported as Vendor Bills or Checks. To maximize this functionality, ensure that any billable expense is associated with a Customer/Job.
+
+## Export Invoices
+
+If you are creating Invoices in Expensify and exporting these to QuickBooks Online, this is the account the invoice will appear against.
+
+# Configure coding for QuickBooks Online
+
+The coding tab is where your information is configured for Expensify; this will allow employees to code expenses and reports accurately.
+
+- Categories
+- Classes and/or Customers/Projects
+- Locations
+- Items
+- Tax
+
+## Categories
+
+QuickBooks Online expense accounts will be automatically imported into Expensify as Categories.
+
+## Account Import
+
+Equity type accounts will also be imported as categories.
+
+Important notes:
+
+- Other Current Liabilities can only be exported as Journal Entries if the submitter is set up as an Employee in QuickBooks.
+- Exchange Gain or Loss detail type does not import.
+
+Recommended steps to take after importing the expense accounts from QuickBooks to Expensify:
+
+- Go to Settings > Workspaces > Groups > [Workspace Name] > Categories to see the accounts imported from QuickBooks Online.
+- Use the enable/disable button to choose which Categories to make available to your employees, and set Category specific rules via the blue settings cog.
+- If necessary, edit the names of imported Categories to make expense coding easier for your employees. (Please Note: If you make any changes to these accounts in QuickBooks Online, the category names on Expensify's side will revert to match the name of the account in QuickBooks Online the next time you sync).
+- If you use Items in QuickBooks Online, you can import them into Expensify as Categories.
+
+Please note that each expense has to have a category selected to export to QuickBooks Online. The chosen category has to be imported from QuickBooks Online and cannot be manually created within the Workspace settings.
+
+## Classes and Customers/Projects
+
+If you use Classes or Customers/Projects in QuickBooks Online, you can import those into Expensify as Tags or Report Fields:
+
+- Tags let you apply a Class and/or Customer/Project to each expense
+- Report Fields enables you to apply a Class and/or Customer/Project to all expenses on a report.
+
+Note: Although Projects can be imported into Expensify and coded to expenses, due to the limitations of the QuickBooks API, expenses cannot be created within the Projects module in QuickBooks.
+
+## Locations
+
+Locations can be imported into Expensify as a Report Field or, if you export reimbursable expenses as Journal Entries and non-reimbursable expenses as Credit/Debit Card, you can import Locations as Tags.
+
+## Items
+
+If you use Items in QuickBooks Online, you can import Items defined with Purchasing Information (with or without Sales Information) into Expensify as Categories.
+## Tax
+
+- Using our tax tracking feature, you can assign a tax rate and amount to each expense.
+-To activate tax tracking, go to connection configuration and enable it. This will automatically import purchasing taxes from QuickBooks Online into Expensify.
+- After the connection is set, navigate to Settings > Worspaces > Groups > Workspace Name] > Tax. Here, you can view the taxes imported from QuickBooks Online.
+- Use the enable/disable button to choose which taxes are accessible to your employees.
+- Set a default tax for the Company Workspace, which will automatically apply to all new expenses.
+- Please note that, at present, tax cannot be exported to Journal Entries in QuickBooks Online.
+- Expensify performs a daily sync to ensure your information is up-to-date. This minimizes errors from outdated QuickBooks Online data and saves you time on syncing.
+
+# How to configure advanced settings for QuickBooks Online
+
+The advanced settings are where functionality for automating and customizing the QuickBooks Online integration can be enabled.
+Navigate to this section of your Workspace by following Settings > Workspaces > Group > [Workspace Name] > Connections > Configure button > Advanced tab.
+## Auto Sync
+With QuickBooks Online auto-sync, once a non-reimbursable report is final approved in Expensify, it's automatically queued for export to QuickBooks Online. For expenses eligible for reimbursement with a linked business bank account, they'll sync when marked as reimbursed.
+
+## Newly Imported Categories
+
+This setting determines the default status of newly imported categories from QuickBooks Online to Expensify, either enabled or disabled.
+
+## Invite Employees
+
+Enabling this automatically invites all Employees from QuickBooks Online to the connected Expensify Company Workspace. If not, you can manually invite or import them using a CSV file.
+
+## Automatically Create Entities
+
+When exporting reimbursable expenses as Vendor Bills or Journal Entries, Expensify will automatically create a vendor in QuickBooks if one doesn't exist. It will also generate a customer when exporting Invoices.
+
+## Sync Reimbursed Reports
+
+Enabling this marks the Vendor Bill as paid in QuickBooks Online when you reimburse a report via ACH direct deposit in Expensify. If reimbursing outside Expensify, marking the Vendor Bill as paid will automatically in QuickBooks Online update the report as reimbursed in Expensify. Note: After enabling this feature, select your QuickBooks Account in the drop-down, indicating the bank account for reimbursements.
+
+## Collection Account
+
+If you are exporting Invoices from Expensify to Quickbooks Online, this is the account the Invoice will appear against once marked as Paid.
+
+# Deep Dive
+
+## Preventing Duplicate Transactions in QuickBooks
+
+When importing a banking feed directly into QuickBooks Online while also importing transactions from Expensify, it's possible to encounter duplicate entries in QuickBooks. To prevent this, follow these steps:
+
+Step 1: Complete the Approval Process in Expensify
+
+- Before exporting any expenses to QuickBooks Online, ensure they are added to a report and the report receives approval. Depending on your Workspace setup, reports may require approval from one or more individuals. The approval process concludes when the last user who views the report selects "Final Approve."
+
+Step 2: Exporting Reports to QuickBooks Online
+
+- To ensure expenses exported from Expensify match seamlessly in the QuickBooks Banking platform, make sure these expenses are marked as non-reimbursable within Expensify and that “Credit Card” is selected as the non-reimbursable export option for your expenses.
+
+Step 3: Importing Your Credit Card Transactions into QuickBooks Online
+
+- After completing Steps 1 and 2, you can import your credit card transactions into QuickBooks Online. These imported banking transactions will align with the ones brought in from Expensify. QuickBooks Online will guide you through the process of matching these transactions, similar to the example below:
+
+## Tax in QuickBooks Online
+
+If your country applies taxes on sales (like GST, HST, or VAT), you can utilize Expensify's Tax Tracking along with your QuickBooks Online tax rates. Please note: Tax Tracking is not available for Workspaces linked to the US version of QuickBooks Online. If you need assistance applying taxes after reports are exported, contact QuickBooks.
+
+To get started:
+
+- Go to Settings > Workpaces > Group > [Workspace Name] > Connections, and click Configure.
+- Navigate to the Coding tab.
+- Turn on 'T.''.
+- Click Save. This imports the Tax Name and rate from QuickBooks Online.
+- Visit Settings > Workspaces > Group > [Workspace Name] > Tax to view the imported taxes.
+- Use the enable/disable button in the Tax tab to choose which taxes your employees can use.
+
+Remember, you can also set a default tax rate for the entire Workspace. This will be automatically applied to all new expenses. The user can still choose a different tax rate for each expense.
+
+Tax information can't be sent to Journal Entries in QuickBooks Online. Also, when dealing with multiple tax rates, where one receipt has different tax rates (like in the EU, UK, and Canada), users should split the expense into the respective parts and set the appropriate tax rate for each part.
+
+## Multi-currency
+
+When working with QuickBooks Online Multi-Currency, there are some things to remember when exporting Vendor Bills and Check! Make sure the vendor's currency and the Accounts Payable (A/P) bank account match.
+
+In QuickBooks Online, the currency conversion rates are not applied when exporting. All transactions will be exported with a 1:1 conversion rate, so for example, if a vendor's currency is CAD (Canadian Dollar) and the home currency is USD (US Dollar), the export will show these currencies without applying conversion rates.
+
+To correct this, you must manually update the conversion rate after the report has been exported to QuickBooks Online.
+
+Specifically for Vendor Bills:
+
+If multi-currency is enabled and the Vendor's currency is different from the Workspace currency, OR if QuickBooks Online home currency is foreign from the Workspace currency, then:
+
+- We create the Vendor Bill in the Vendor's currency (this is a QuickBooks Online requirement - we don't have a choice)
+- We set the exchange rate between the home currency and the Vendor's currency
+- We convert line item amounts to the vendor's currency
+
+Let's consider this example:
+
+- QuickBooks Online home currency is USD
+- Vendor's currency is VND
+- Workspace (report) currency is JPY
+
+Upon export, we:
+
+1. Specified the bill is in VND
+2. Set the exchange rate between VND and USD (home currency), computed at the time of export.
+3. Converted line items from JPY (currency in Expensify) to VND
+4. QuickBooks Online automatically computed the USD amount (home currency) based on the exchange rate we specified
+5. Journal Entries, Credit Card, and Debit Card:
+
+Multi-currency exports will fail as the account currency must match both the vendor and home currencies.
+
+## Report Fields
+
+Report fields are a handy way to collect specific information for a report tailored to your organization's needs. They can specify a project, business trip, client, location, and more!
+
+When integrating Expensify with Your Accounting Software, you can create your report fields in your accounting software so the next time you sync your Workspace, these fields will be imported into Expensify.
+
+To select how a specific field imports to Expensify, head to Settings > Workspaces > Group >
+[Workspace Name] > Connections > Accounting Integrations > QuickBooks Online > Configure > Coding.
+
+Here are the QuickBooks Online fields that can be mapped as a report field within Expensify:
+
+- Classes
+- Customers/Projects
+- Locations
+
+# FAQ
+
+## What happens if the report can't be exported to QuickBooks Online automatically?
+
+If a report encounters an issue during automatic export to QuickBooks Online, you'll receive an email with details about the problem, including any specific error messages. These messages will also be recorded in the report's history section.
+
+The report will be placed in your Home for your attention. You can address the issues there. If you need further assistance, refer to our QuickBooks Online Export Errors page or export the report manually.
+
+## How can I ensure that I final approve reports before they're exported to QuickBooks Online?
+
+To ensure reports are reviewed before export, set up your Workspaces with the appropriate workflow in Expensify. Additionally, consider changing your Workspace settings to enforce expense Workspace workflows strictly. This guarantees that your Workspace's workflow is consistently followed.
+
+## What happens to existing approved and reimbursed reports if I enable Auto Sync?
+
+- If Auto Sync was disabled when your Workspace was linked to QuickBooks Online, enabling it won't impact existing reports that haven't been exported.
+- If a report has been exported and reimbursed via ACH, it will be automatically marked as paid in QuickBooks Online during the next sync.
+- If a report has been exported and marked as paid in QuickBooks Online, it will be automatically marked as reimbursed in Expensify during the next sync.
+- Reports that have yet to be exported to QuickBooks Online won't be automatically exported.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
index ac6b1e452a4b..2a3de088f934 100644
--- a/index.js
+++ b/index.js
@@ -1,9 +1,8 @@
/**
* @format
*/
-
-import {enableLegacyWebImplementation} from 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
+import {enableLegacyWebImplementation} from 'react-native-gesture-handler';
import App from './src/App';
import Config from './src/CONFIG';
import additionalAppSetup from './src/setup';
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 759364765b4c..10c7e43c98f1 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -19,7 +19,7 @@
CFBundlePackageTypeAPPLCFBundleShortVersionString
- 1.3.92
+ 1.3.93CFBundleSignature????CFBundleURLTypes
@@ -40,7 +40,7 @@
CFBundleVersion
- 1.3.92.0
+ 1.3.93.0ITSAppUsesNonExemptEncryptionLSApplicationQueriesSchemes
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 6dd2088565cb..ad90d11e41f0 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
CFBundlePackageTypeBNDLCFBundleShortVersionString
- 1.3.92
+ 1.3.93CFBundleSignature????CFBundleVersion
- 1.3.92.0
+ 1.3.93.0
diff --git a/jest/setup.js b/jest/setup.js
index a54a90678491..38b4b55a68b3 100644
--- a/jest/setup.js
+++ b/jest/setup.js
@@ -1,8 +1,8 @@
-import 'setimmediate';
-import 'react-native-gesture-handler/jestSetup';
+import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock';
import '@shopify/flash-list/jestSetup';
+import 'react-native-gesture-handler/jestSetup';
import * as reanimatedJestUtils from 'react-native-reanimated/src/reanimated2/jestUtils';
-import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock';
+import 'setimmediate';
import setupMockImages from './setupMockImages';
setupMockImages();
diff --git a/package-lock.json b/package-lock.json
index f852bc4ddee4..690e658fa476 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "new.expensify",
- "version": "1.3.92-0",
+ "version": "1.3.93-0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "new.expensify",
- "version": "1.3.92-0",
+ "version": "1.3.93-0",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@@ -136,6 +136,7 @@
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.21.5",
"@babel/runtime": "^7.20.0",
+ "@dword-design/eslint-plugin-import-alias": "^4.0.8",
"@electron/notarize": "^1.2.3",
"@jest/globals": "^29.5.0",
"@octokit/core": "4.0.4",
@@ -155,6 +156,7 @@
"@svgr/webpack": "^6.0.0",
"@testing-library/jest-native": "5.4.1",
"@testing-library/react-native": "11.5.1",
+ "@trivago/prettier-plugin-sort-imports": "^4.2.0",
"@types/concurrently": "^7.0.0",
"@types/jest": "^29.5.2",
"@types/jest-when": "^3.5.2",
@@ -384,11 +386,11 @@
}
},
"node_modules/@babel/code-frame": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
- "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+ "version": "7.22.13",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+ "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
"dependencies": {
- "@babel/highlight": "^7.22.10",
+ "@babel/highlight": "^7.22.13",
"chalk": "^2.4.2"
},
"engines": {
@@ -441,11 +443,11 @@
}
},
"node_modules/@babel/generator": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
- "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
+ "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
"dependencies": {
- "@babel/types": "^7.22.10",
+ "@babel/types": "^7.23.0",
"@jridgewell/gen-mapping": "^0.3.2",
"@jridgewell/trace-mapping": "^0.3.17",
"jsesc": "^2.5.1"
@@ -605,20 +607,20 @@
}
},
"node_modules/@babel/helper-environment-visitor": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
- "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+ "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-function-name": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
- "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+ "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
"dependencies": {
- "@babel/template": "^7.22.5",
- "@babel/types": "^7.22.5"
+ "@babel/template": "^7.22.15",
+ "@babel/types": "^7.23.0"
},
"engines": {
"node": ">=6.9.0"
@@ -769,9 +771,9 @@
}
},
"node_modules/@babel/helper-validator-identifier": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
- "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+ "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
"engines": {
"node": ">=6.9.0"
}
@@ -812,11 +814,11 @@
}
},
"node_modules/@babel/highlight": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
- "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+ "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
"dependencies": {
- "@babel/helper-validator-identifier": "^7.22.5",
+ "@babel/helper-validator-identifier": "^7.22.20",
"chalk": "^2.4.2",
"js-tokens": "^4.0.0"
},
@@ -825,9 +827,9 @@
}
},
"node_modules/@babel/parser": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
- "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+ "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
"bin": {
"parser": "bin/babel-parser.js"
},
@@ -2553,31 +2555,31 @@
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
},
"node_modules/@babel/template": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
- "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+ "version": "7.22.15",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
+ "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
"dependencies": {
- "@babel/code-frame": "^7.22.5",
- "@babel/parser": "^7.22.5",
- "@babel/types": "^7.22.5"
+ "@babel/code-frame": "^7.22.13",
+ "@babel/parser": "^7.22.15",
+ "@babel/types": "^7.22.15"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/traverse": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.11.tgz",
- "integrity": "sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==",
+ "version": "7.23.2",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+ "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
"dependencies": {
- "@babel/code-frame": "^7.22.10",
- "@babel/generator": "^7.22.10",
- "@babel/helper-environment-visitor": "^7.22.5",
- "@babel/helper-function-name": "^7.22.5",
+ "@babel/code-frame": "^7.22.13",
+ "@babel/generator": "^7.23.0",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
"@babel/helper-hoist-variables": "^7.22.5",
"@babel/helper-split-export-declaration": "^7.22.6",
- "@babel/parser": "^7.22.11",
- "@babel/types": "^7.22.11",
+ "@babel/parser": "^7.23.0",
+ "@babel/types": "^7.23.0",
"debug": "^4.1.0",
"globals": "^11.1.0"
},
@@ -2586,12 +2588,12 @@
}
},
"node_modules/@babel/types": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
- "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+ "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
"dependencies": {
"@babel/helper-string-parser": "^7.22.5",
- "@babel/helper-validator-identifier": "^7.22.5",
+ "@babel/helper-validator-identifier": "^7.22.20",
"to-fast-properties": "^2.0.0"
},
"engines": {
@@ -2940,6 +2942,63 @@
"node": ">=10.0.0"
}
},
+ "node_modules/@dword-design/dedent": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/@dword-design/dedent/-/dedent-0.7.0.tgz",
+ "integrity": "sha512-OFmAmzKiDUh9m7WRMYcoEOPI7b5tS5hdqQmtKDwF+ZssVJv8a+GHo9VOtFsmlw3h8Roh/9QzFWIsjSFZyQUMdg==",
+ "dev": true,
+ "dependencies": {
+ "babel-plugin-add-module-exports": "^1.0.2"
+ }
+ },
+ "node_modules/@dword-design/endent": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/@dword-design/endent/-/endent-1.4.1.tgz",
+ "integrity": "sha512-e2sCTzth5kyRdM0o+yEb5wBVzUdJL8Y6HblRGRV0Bif0knf1ZjRLhUjdCrqM+Muirb68X/xJzgdRDJVmLqgXGA==",
+ "dev": true,
+ "dependencies": {
+ "@dword-design/dedent": "^0.7.0",
+ "fast-json-parse": "^1.0.3",
+ "objectorarray": "^1.0.3"
+ }
+ },
+ "node_modules/@dword-design/eslint-plugin-import-alias": {
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/@dword-design/eslint-plugin-import-alias/-/eslint-plugin-import-alias-4.0.8.tgz",
+ "integrity": "sha512-u20BC0eJ6MHhGen+lG38nf/dvlQI7g1GdXLZbgJfOeGT+GKYey7SVTdotY0X4iKWFGGqElkW0bbOuF07T90VOA==",
+ "dev": true,
+ "dependencies": {
+ "@babel/core": "^7.10.2",
+ "@dword-design/functions": "^5.0.22",
+ "babel-plugin-module-resolver": "^5.0.0",
+ "deepmerge": "^4.3.1",
+ "jiti": "^1.18.2"
+ },
+ "engines": {
+ "node": ">=16"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/dword-design"
+ }
+ },
+ "node_modules/@dword-design/functions": {
+ "version": "5.0.26",
+ "resolved": "https://registry.npmjs.org/@dword-design/functions/-/functions-5.0.26.tgz",
+ "integrity": "sha512-7MxBcG1zP42LR+45kdRvb+P56u48INNKSolGsdmYMFd367btOP/BLHHHTVU1M+uI3KmH7o2J/oasEPtYquravw==",
+ "dev": true,
+ "dependencies": {
+ "@dword-design/endent": "^1.0.0",
+ "delay": "^5.0.0",
+ "lodash": "^4.17.15",
+ "tinycolor2": "^1.4.1"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/dword-design"
+ }
+ },
"node_modules/@egjs/hammerjs": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@@ -19086,6 +19145,65 @@
"node": ">= 10"
}
},
+ "node_modules/@trivago/prettier-plugin-sort-imports": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.2.1.tgz",
+ "integrity": "sha512-iuy2MPVURGdxILTchHr15VAioItuYBejKfcTmQFlxIuqA7jeaT6ngr5aUIG6S6U096d6a6lJCgaOwlRrPLlOPg==",
+ "dev": true,
+ "dependencies": {
+ "@babel/generator": "7.17.7",
+ "@babel/parser": "^7.20.5",
+ "@babel/traverse": "7.23.2",
+ "@babel/types": "7.17.0",
+ "javascript-natural-sort": "0.7.1",
+ "lodash": "^4.17.21"
+ },
+ "peerDependencies": {
+ "@vue/compiler-sfc": "3.x",
+ "prettier": "2.x - 3.x"
+ },
+ "peerDependenciesMeta": {
+ "@vue/compiler-sfc": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/generator": {
+ "version": "7.17.7",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
+ "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.17.0",
+ "jsesc": "^2.5.1",
+ "source-map": "^0.5.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/types": {
+ "version": "7.17.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+ "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-validator-identifier": "^7.16.7",
+ "to-fast-properties": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/source-map": {
+ "version": "0.5.7",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+ "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+ "dev": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/@trysound/sax": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -22682,6 +22800,12 @@
"babel-runtime": "^6.22.0"
}
},
+ "node_modules/babel-plugin-add-module-exports": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-1.0.4.tgz",
+ "integrity": "sha512-g+8yxHUZ60RcyaUpfNzy56OtWW+x9cyEe9j+CranqLiqbju2yf/Cy6ZtYK40EZxtrdHllzlVZgLmcOUCTlJ7Jg==",
+ "dev": true
+ },
"node_modules/babel-plugin-add-react-displayname": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz",
@@ -26924,6 +27048,18 @@
"rimraf": "bin.js"
}
},
+ "node_modules/delay": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/delay/-/delay-5.0.0.tgz",
+ "integrity": "sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==",
+ "dev": true,
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -36945,6 +37081,15 @@
"node": ">=8"
}
},
+ "node_modules/jiti": {
+ "version": "1.20.0",
+ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz",
+ "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
+ "dev": true,
+ "bin": {
+ "jiti": "bin/jiti.js"
+ }
+ },
"node_modules/joi": {
"version": "17.10.2",
"resolved": "https://registry.npmjs.org/joi/-/joi-17.10.2.tgz",
@@ -49874,6 +50019,12 @@
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
"license": "MIT"
},
+ "node_modules/tinycolor2": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+ "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+ "dev": true
+ },
"node_modules/tinyqueue": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
@@ -53376,11 +53527,11 @@
}
},
"@babel/code-frame": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
- "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+ "version": "7.22.13",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+ "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
"requires": {
- "@babel/highlight": "^7.22.10",
+ "@babel/highlight": "^7.22.13",
"chalk": "^2.4.2"
}
},
@@ -53419,11 +53570,11 @@
}
},
"@babel/generator": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
- "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
+ "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
"requires": {
- "@babel/types": "^7.22.10",
+ "@babel/types": "^7.23.0",
"@jridgewell/gen-mapping": "^0.3.2",
"@jridgewell/trace-mapping": "^0.3.17",
"jsesc": "^2.5.1"
@@ -53548,17 +53699,17 @@
}
},
"@babel/helper-environment-visitor": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
- "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q=="
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+ "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA=="
},
"@babel/helper-function-name": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
- "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+ "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
"requires": {
- "@babel/template": "^7.22.5",
- "@babel/types": "^7.22.5"
+ "@babel/template": "^7.22.15",
+ "@babel/types": "^7.23.0"
}
},
"@babel/helper-hoist-variables": {
@@ -53661,9 +53812,9 @@
"integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
},
"@babel/helper-validator-identifier": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
- "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ=="
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+ "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A=="
},
"@babel/helper-validator-option": {
"version": "7.22.5",
@@ -53692,19 +53843,19 @@
}
},
"@babel/highlight": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
- "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+ "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
"requires": {
- "@babel/helper-validator-identifier": "^7.22.5",
+ "@babel/helper-validator-identifier": "^7.22.20",
"chalk": "^2.4.2",
"js-tokens": "^4.0.0"
}
},
"@babel/parser": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
- "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g=="
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+ "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
},
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
"version": "7.22.5",
@@ -54782,39 +54933,39 @@
}
},
"@babel/template": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
- "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+ "version": "7.22.15",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
+ "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
"requires": {
- "@babel/code-frame": "^7.22.5",
- "@babel/parser": "^7.22.5",
- "@babel/types": "^7.22.5"
+ "@babel/code-frame": "^7.22.13",
+ "@babel/parser": "^7.22.15",
+ "@babel/types": "^7.22.15"
}
},
"@babel/traverse": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.11.tgz",
- "integrity": "sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==",
+ "version": "7.23.2",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+ "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
"requires": {
- "@babel/code-frame": "^7.22.10",
- "@babel/generator": "^7.22.10",
- "@babel/helper-environment-visitor": "^7.22.5",
- "@babel/helper-function-name": "^7.22.5",
+ "@babel/code-frame": "^7.22.13",
+ "@babel/generator": "^7.23.0",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
"@babel/helper-hoist-variables": "^7.22.5",
"@babel/helper-split-export-declaration": "^7.22.6",
- "@babel/parser": "^7.22.11",
- "@babel/types": "^7.22.11",
+ "@babel/parser": "^7.23.0",
+ "@babel/types": "^7.23.0",
"debug": "^4.1.0",
"globals": "^11.1.0"
}
},
"@babel/types": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
- "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+ "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
"requires": {
"@babel/helper-string-parser": "^7.22.5",
- "@babel/helper-validator-identifier": "^7.22.5",
+ "@babel/helper-validator-identifier": "^7.22.20",
"to-fast-properties": "^2.0.0"
}
},
@@ -55081,6 +55232,51 @@
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
"dev": true
},
+ "@dword-design/dedent": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/@dword-design/dedent/-/dedent-0.7.0.tgz",
+ "integrity": "sha512-OFmAmzKiDUh9m7WRMYcoEOPI7b5tS5hdqQmtKDwF+ZssVJv8a+GHo9VOtFsmlw3h8Roh/9QzFWIsjSFZyQUMdg==",
+ "dev": true,
+ "requires": {
+ "babel-plugin-add-module-exports": "^1.0.2"
+ }
+ },
+ "@dword-design/endent": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/@dword-design/endent/-/endent-1.4.1.tgz",
+ "integrity": "sha512-e2sCTzth5kyRdM0o+yEb5wBVzUdJL8Y6HblRGRV0Bif0knf1ZjRLhUjdCrqM+Muirb68X/xJzgdRDJVmLqgXGA==",
+ "dev": true,
+ "requires": {
+ "@dword-design/dedent": "^0.7.0",
+ "fast-json-parse": "^1.0.3",
+ "objectorarray": "^1.0.3"
+ }
+ },
+ "@dword-design/eslint-plugin-import-alias": {
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/@dword-design/eslint-plugin-import-alias/-/eslint-plugin-import-alias-4.0.8.tgz",
+ "integrity": "sha512-u20BC0eJ6MHhGen+lG38nf/dvlQI7g1GdXLZbgJfOeGT+GKYey7SVTdotY0X4iKWFGGqElkW0bbOuF07T90VOA==",
+ "dev": true,
+ "requires": {
+ "@babel/core": "^7.10.2",
+ "@dword-design/functions": "^5.0.22",
+ "babel-plugin-module-resolver": "^5.0.0",
+ "deepmerge": "^4.3.1",
+ "jiti": "^1.18.2"
+ }
+ },
+ "@dword-design/functions": {
+ "version": "5.0.26",
+ "resolved": "https://registry.npmjs.org/@dword-design/functions/-/functions-5.0.26.tgz",
+ "integrity": "sha512-7MxBcG1zP42LR+45kdRvb+P56u48INNKSolGsdmYMFd367btOP/BLHHHTVU1M+uI3KmH7o2J/oasEPtYquravw==",
+ "dev": true,
+ "requires": {
+ "@dword-design/endent": "^1.0.0",
+ "delay": "^5.0.0",
+ "lodash": "^4.17.15",
+ "tinycolor2": "^1.4.1"
+ }
+ },
"@egjs/hammerjs": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@@ -66591,6 +66787,49 @@
"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
"dev": true
},
+ "@trivago/prettier-plugin-sort-imports": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.2.1.tgz",
+ "integrity": "sha512-iuy2MPVURGdxILTchHr15VAioItuYBejKfcTmQFlxIuqA7jeaT6ngr5aUIG6S6U096d6a6lJCgaOwlRrPLlOPg==",
+ "dev": true,
+ "requires": {
+ "@babel/generator": "7.17.7",
+ "@babel/parser": "^7.20.5",
+ "@babel/traverse": "7.23.2",
+ "@babel/types": "7.17.0",
+ "javascript-natural-sort": "0.7.1",
+ "lodash": "^4.17.21"
+ },
+ "dependencies": {
+ "@babel/generator": {
+ "version": "7.17.7",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
+ "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.17.0",
+ "jsesc": "^2.5.1",
+ "source-map": "^0.5.0"
+ }
+ },
+ "@babel/types": {
+ "version": "7.17.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+ "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-validator-identifier": "^7.16.7",
+ "to-fast-properties": "^2.0.0"
+ }
+ },
+ "source-map": {
+ "version": "0.5.7",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+ "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+ "dev": true
+ }
+ }
+ },
"@trysound/sax": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -69330,6 +69569,12 @@
"babel-runtime": "^6.22.0"
}
},
+ "babel-plugin-add-module-exports": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-1.0.4.tgz",
+ "integrity": "sha512-g+8yxHUZ60RcyaUpfNzy56OtWW+x9cyEe9j+CranqLiqbju2yf/Cy6ZtYK40EZxtrdHllzlVZgLmcOUCTlJ7Jg==",
+ "dev": true
+ },
"babel-plugin-add-react-displayname": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz",
@@ -72422,6 +72667,12 @@
}
}
},
+ "delay": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/delay/-/delay-5.0.0.tgz",
+ "integrity": "sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==",
+ "dev": true
+ },
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -79534,6 +79785,12 @@
}
}
},
+ "jiti": {
+ "version": "1.20.0",
+ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz",
+ "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
+ "dev": true
+ },
"joi": {
"version": "17.10.2",
"resolved": "https://registry.npmjs.org/joi/-/joi-17.10.2.tgz",
@@ -88857,6 +89114,12 @@
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
+ "tinycolor2": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+ "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+ "dev": true
+ },
"tinyqueue": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
diff --git a/package.json b/package.json
index a5d189bf943c..a8143fd2a809 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "new.expensify",
- "version": "1.3.92-0",
+ "version": "1.3.93-0",
"author": "Expensify, Inc.",
"homepage": "https://new.expensify.com",
"description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -173,6 +173,8 @@
"underscore": "^1.13.1"
},
"devDependencies": {
+ "@dword-design/eslint-plugin-import-alias": "^4.0.8",
+ "@trivago/prettier-plugin-sort-imports": "^4.2.0",
"@actions/core": "1.10.0",
"@actions/github": "5.1.1",
"@babel/core": "^7.20.0",
diff --git a/src/App.js b/src/App.js
index 27e8105c2189..bff766c1235f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,32 +1,32 @@
-import '../wdyr';
+import {PortalProvider} from '@gorhom/portal';
import React from 'react';
import {LogBox} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
import Onyx from 'react-native-onyx';
-import {PortalProvider} from '@gorhom/portal';
import {PickerStateProvider} from 'react-native-picker-select';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import '../wdyr';
+import ComposeProviders from './components/ComposeProviders';
import CustomStatusBar from './components/CustomStatusBar';
import ErrorBoundary from './components/ErrorBoundary';
-import Expensify from './Expensify';
+import HTMLEngineProvider from './components/HTMLEngineProvider';
import {LocaleContextProvider} from './components/LocaleContextProvider';
import OnyxProvider from './components/OnyxProvider';
-import HTMLEngineProvider from './components/HTMLEngineProvider';
import PopoverContextProvider from './components/PopoverProvider';
-import ComposeProviders from './components/ComposeProviders';
import SafeArea from './components/SafeArea';
-import * as Environment from './libs/Environment/Environment';
-import {WindowDimensionsProvider} from './components/withWindowDimensions';
-import {KeyboardStateProvider} from './components/withKeyboardState';
-import ThemeProvider from './styles/themes/ThemeProvider';
-import ThemeStylesProvider from './styles/ThemeStylesProvider';
import {CurrentReportIDContextProvider} from './components/withCurrentReportID';
import {EnvironmentProvider} from './components/withEnvironment';
-import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
-import * as Session from './libs/actions/Session';
+import {KeyboardStateProvider} from './components/withKeyboardState';
+import {WindowDimensionsProvider} from './components/withWindowDimensions';
+import Expensify from './Expensify';
import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
+import * as Session from './libs/actions/Session';
+import * as Environment from './libs/Environment/Environment';
+import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
import {SidebarNavigationContextProvider} from './pages/home/sidebar/SidebarNavigationContext';
+import ThemeProvider from './styles/themes/ThemeProvider';
+import ThemeStylesProvider from './styles/ThemeStylesProvider';
// For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
if (window && Environment.isDevelopment()) {
diff --git a/src/CONFIG.ts b/src/CONFIG.ts
index 8b1dab5b3d71..61e347671269 100644
--- a/src/CONFIG.ts
+++ b/src/CONFIG.ts
@@ -1,8 +1,8 @@
import {Platform} from 'react-native';
import Config, {NativeConfig} from 'react-native-config';
+import CONST from './CONST';
import getPlatform from './libs/getPlatform';
import * as Url from './libs/Url';
-import CONST from './CONST';
// react-native-config doesn't trim whitespace on iOS for some reason so we
// add a trim() call to prevent headaches
diff --git a/src/CONST.ts b/src/CONST.ts
index 6602df7fa5eb..3989d2b5cbff 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -171,6 +171,10 @@ const CONST = {
ERROR: {
TOO_MANY_ATTEMPTS: 'Too many attempts',
},
+ EVENTS_NAME: {
+ OPEN: 'OPEN',
+ EXIT: 'EXIT',
+ },
},
ERROR: {
MISSING_ROUTING_NUMBER: '402 Missing routingNumber',
diff --git a/src/Expensify.js b/src/Expensify.js
index 6010824cf275..b7e3f0f60567 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -1,42 +1,41 @@
-import _ from 'underscore';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
-import React, {useCallback, useState, useEffect, useRef, useLayoutEffect, useMemo} from 'react';
+import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
import {AppState, Linking} from 'react-native';
import Onyx, {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import ConfirmModal from './components/ConfirmModal';
+import DeeplinkWrapper from './components/DeeplinkWrapper';
+import EmojiPicker from './components/EmojiPicker/EmojiPicker';
+import GrowlNotification from './components/GrowlNotification';
+import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
+import SplashScreenHider from './components/SplashScreenHider';
+import UpdateAppModal from './components/UpdateAppModal';
+import withLocalize, {withLocalizePropTypes} from './components/withLocalize';
+import * as DemoActions from './libs/actions/DemoActions';
+import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
import * as Report from './libs/actions/Report';
-import BootSplash from './libs/BootSplash';
+import * as User from './libs/actions/User';
import * as ActiveClientManager from './libs/ActiveClientManager';
-import ONYXKEYS from './ONYXKEYS';
-import NavigationRoot from './libs/Navigation/NavigationRoot';
-import migrateOnyx from './libs/migrateOnyx';
-import PushNotification from './libs/Notification/PushNotification';
-import UpdateAppModal from './components/UpdateAppModal';
-import Visibility from './libs/Visibility';
-import GrowlNotification from './components/GrowlNotification';
+import BootSplash from './libs/BootSplash';
+import compose from './libs/compose';
import * as Growl from './libs/Growl';
-import StartupTimer from './libs/StartupTimer';
import Log from './libs/Log';
-import ConfirmModal from './components/ConfirmModal';
-import compose from './libs/compose';
-import withLocalize, {withLocalizePropTypes} from './components/withLocalize';
-import * as User from './libs/actions/User';
-import NetworkConnection from './libs/NetworkConnection';
+import migrateOnyx from './libs/migrateOnyx';
import Navigation from './libs/Navigation/Navigation';
-import PopoverReportActionContextMenu from './pages/home/report/ContextMenu/PopoverReportActionContextMenu';
-import * as ReportActionContextMenu from './pages/home/report/ContextMenu/ReportActionContextMenu';
-import SplashScreenHider from './components/SplashScreenHider';
-import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
-import EmojiPicker from './components/EmojiPicker/EmojiPicker';
-import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
-import * as DemoActions from './libs/actions/DemoActions';
-import DeeplinkWrapper from './components/DeeplinkWrapper';
-
+import NavigationRoot from './libs/Navigation/NavigationRoot';
+import NetworkConnection from './libs/NetworkConnection';
+import PushNotification from './libs/Notification/PushNotification';
+// eslint-disable-next-line no-unused-vars
+import subscribePushNotification from './libs/Notification/PushNotification/subscribePushNotification';
+import StartupTimer from './libs/StartupTimer';
// This lib needs to be imported, but it has nothing to export since all it contains is an Onyx connection
// eslint-disable-next-line no-unused-vars
import UnreadIndicatorUpdater from './libs/UnreadIndicatorUpdater';
-// eslint-disable-next-line no-unused-vars
-import subscribePushNotification from './libs/Notification/PushNotification/subscribePushNotification';
+import Visibility from './libs/Visibility';
+import ONYXKEYS from './ONYXKEYS';
+import PopoverReportActionContextMenu from './pages/home/report/ContextMenu/PopoverReportActionContextMenu';
+import * as ReportActionContextMenu from './pages/home/report/ContextMenu/ReportActionContextMenu';
Onyx.registerLogger(({level, message}) => {
if (level === 'alert') {
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index cd8c3f325ab3..9cd43badac6b 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -1,8 +1,8 @@
-import {ValueOf} from 'type-fest';
import {OnyxEntry} from 'react-native-onyx/lib/types';
-import DeepValueOf from './types/utils/DeepValueOf';
-import * as OnyxTypes from './types/onyx';
+import {ValueOf} from 'type-fest';
import CONST from './CONST';
+import * as OnyxTypes from './types/onyx';
+import DeepValueOf from './types/utils/DeepValueOf';
/**
* This is a file containing constants for all the top level keys in our store
@@ -119,6 +119,9 @@ const ONYXKEYS = {
/** Token needed to initialize Plaid link */
PLAID_LINK_TOKEN: 'plaidLinkToken',
+ /** Capture Plaid event */
+ PLAID_CURRENT_EVENT: 'plaidCurrentEvent',
+
/** Token needed to initialize Onfido */
ONFIDO_TOKEN: 'onfidoToken',
diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js
index 2c3af95a3fad..252c8380b062 100644
--- a/src/components/AddPaymentMethodMenu.js
+++ b/src/components/AddPaymentMethodMenu.js
@@ -1,16 +1,16 @@
-import _ from 'underscore';
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import compose from '@libs/compose';
+import Permissions from '@libs/Permissions';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import * as Expensicons from './Icon/Expensicons';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import compose from '../libs/compose';
-import ONYXKEYS from '../ONYXKEYS';
-import CONST from '../CONST';
-import withWindowDimensions from './withWindowDimensions';
-import Permissions from '../libs/Permissions';
import PopoverMenu from './PopoverMenu';
import refPropTypes from './refPropTypes';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import withWindowDimensions from './withWindowDimensions';
const propTypes = {
/** Should the component be visible? */
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index dbe7e46ff6aa..f9667807106b 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -1,26 +1,26 @@
-import _ from 'underscore';
-import React, {useEffect, useRef, useCallback} from 'react';
-import {ActivityIndicator, View} from 'react-native';
+import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useRef} from 'react';
+import {ActivityIndicator, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
-import Log from '../libs/Log';
-import PlaidLink from './PlaidLink';
-import * as App from '../libs/actions/App';
-import * as BankAccounts from '../libs/actions/BankAccounts';
-import ONYXKEYS from '../ONYXKEYS';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
+import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import Log from '@libs/Log';
+import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import * as App from '@userActions/App';
+import * as BankAccounts from '@userActions/BankAccounts';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
+import Icon from './Icon';
+import getBankIcon from './Icon/BankIcons';
import Picker from './Picker';
-import {plaidDataPropTypes} from '../pages/ReimbursementAccount/plaidDataPropTypes';
+import PlaidLink from './PlaidLink';
import Text from './Text';
-import getBankIcon from './Icon/BankIcons';
-import Icon from './Icon';
-import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
-import CONST from '../CONST';
-import KeyboardShortcut from '../libs/KeyboardShortcut';
-import useLocalize from '../hooks/useLocalize';
-import useNetwork from '../hooks/useNetwork';
const propTypes = {
/** If the user has been throttled from Plaid */
@@ -203,6 +203,7 @@ function AddPlaidBankAccount({
Log.hmmm('[PlaidLink] Error: ', error.message);
}}
onEvent={(event, metadata) => {
+ BankAccounts.setPlaidEvent(event);
// Handle Plaid login errors (will potentially reset plaid token and item depending on the error)
if (event === 'ERROR') {
Log.hmmm('[PlaidLink] Error: ', metadata);
diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index 893ec031ab7f..326b82d31e8f 100644
--- a/src/components/AddressSearch/CurrentLocationButton.js
+++ b/src/components/AddressSearch/CurrentLocationButton.js
@@ -1,14 +1,14 @@
import PropTypes from 'prop-types';
import React from 'react';
import {Text} from 'react-native';
-import colors from '../../styles/colors';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
-import getButtonState from '../../libs/getButtonState';
-import * as StyleUtils from '../../styles/StyleUtils';
-import useLocalize from '../../hooks/useLocalize';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import useLocalize from '@hooks/useLocalize';
+import getButtonState from '@libs/getButtonState';
+import colors from '@styles/colors';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
const propTypes = {
/** Callback that runs when location button is clicked */
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index 28c61076332a..3e122e029969 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -1,26 +1,26 @@
-import _ from 'underscore';
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
-import {Keyboard, LogBox, ScrollView, View, Text, ActivityIndicator} from 'react-native';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {ActivityIndicator, Keyboard, LogBox, ScrollView, Text, View} from 'react-native';
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
-import lodashGet from 'lodash/get';
-import compose from '../../libs/compose';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
-import TextInput from '../TextInput';
-import * as ApiUtils from '../../libs/ApiUtils';
-import * as GooglePlacesUtils from '../../libs/GooglePlacesUtils';
-import getCurrentPosition from '../../libs/getCurrentPosition';
-import CONST from '../../CONST';
-import * as StyleUtils from '../../styles/StyleUtils';
-import isCurrentTargetInsideContainer from './isCurrentTargetInsideContainer';
-import variables from '../../styles/variables';
-import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import LocationErrorMessage from '../LocationErrorMessage';
-import {withNetwork} from '../OnyxProvider';
-import networkPropTypes from '../networkPropTypes';
+import _ from 'underscore';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import LocationErrorMessage from '@components/LocationErrorMessage';
+import networkPropTypes from '@components/networkPropTypes';
+import {withNetwork} from '@components/OnyxProvider';
+import TextInput from '@components/TextInput';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import * as ApiUtils from '@libs/ApiUtils';
+import compose from '@libs/compose';
+import getCurrentPosition from '@libs/getCurrentPosition';
+import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
import CurrentLocationButton from './CurrentLocationButton';
+import isCurrentTargetInsideContainer from './isCurrentTargetInsideContainer';
// The error that's being thrown below will be ignored until we fork the
// react-native-google-places-autocomplete repo and replace the
diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
index d110fe39cd6c..5899e68bedb3 100644
--- a/src/components/AmountTextInput.js
+++ b/src/components/AmountTextInput.js
@@ -1,9 +1,9 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import TextInput from './TextInput';
-import styles from '../styles/styles';
-import CONST from '../CONST';
+import React from 'react';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import refPropTypes from './refPropTypes';
+import TextInput from './TextInput';
const propTypes = {
/** Formatted amount in local currency */
diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
index 46576bc62e7a..fd6c3d358a33 100644
--- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
+++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
@@ -1,16 +1,16 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
-import {propTypes as anchorForAttachmentsOnlyPropTypes, defaultProps as anchorForAttachmentsOnlyDefaultProps} from './anchorForAttachmentsOnlyPropTypes';
-import CONST from '../../CONST';
-import ONYXKEYS from '../../ONYXKEYS';
-import AttachmentView from '../Attachments/AttachmentView';
-import * as Download from '../../libs/actions/Download';
-import fileDownload from '../../libs/fileDownload';
-import addEncryptedAuthTokenToURL from '../../libs/addEncryptedAuthTokenToURL';
-import {ShowContextMenuContext, showContextMenuForReport} from '../ShowContextMenuContext';
-import * as ReportUtils from '../../libs/ReportUtils';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import AttachmentView from '@components/Attachments/AttachmentView';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
+import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
+import fileDownload from '@libs/fileDownload';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as Download from '@userActions/Download';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {defaultProps as anchorForAttachmentsOnlyDefaultProps, propTypes as anchorForAttachmentsOnlyPropTypes} from './anchorForAttachmentsOnlyPropTypes';
const propTypes = {
/** Press in handler for the link */
diff --git a/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js b/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js
index a17f0a27ce4d..9452e615d31c 100644
--- a/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js
+++ b/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import stylePropTypes from '../../styles/stylePropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
const propTypes = {
/** The URL of the attachment */
diff --git a/src/components/AnchorForAttachmentsOnly/index.js b/src/components/AnchorForAttachmentsOnly/index.js
index 1a58aa4b3ae1..1dae62e771ef 100644
--- a/src/components/AnchorForAttachmentsOnly/index.js
+++ b/src/components/AnchorForAttachmentsOnly/index.js
@@ -1,8 +1,8 @@
import React from 'react';
+import ControlSelection from '@libs/ControlSelection';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import ControlSelection from '../../libs/ControlSelection';
function AnchorForAttachmentsOnly(props) {
return (
diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js
index f27aad641186..91e1b864544d 100644
--- a/src/components/AnchorForAttachmentsOnly/index.native.js
+++ b/src/components/AnchorForAttachmentsOnly/index.native.js
@@ -1,7 +1,7 @@
import React from 'react';
+import styles from '@styles/styles';
import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
-import styles from '../../styles/styles';
function AnchorForAttachmentsOnly(props) {
return (
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 9cfe9d893d8e..d79faf4dee9c 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -1,20 +1,20 @@
-import _ from 'underscore';
+import Str from 'expensify-common/lib/str';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React, {useEffect} from 'react';
import {StyleSheet} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import Str from 'expensify-common/lib/str';
-import Text from '../Text';
-import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
-import * as ReportActionContextMenu from '../../pages/home/report/ContextMenu/ReportActionContextMenu';
-import * as ContextMenuActions from '../../pages/home/report/ContextMenu/ContextMenuActions';
-import Tooltip from '../Tooltip';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
+import _ from 'underscore';
+import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
+import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
import {propTypes as anchorForCommentsOnlyPropTypes} from './anchorForCommentsOnlyPropTypes';
-import CONST from '../../CONST';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
const propTypes = {
/** Press in handler for the link */
diff --git a/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js b/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js
index 10b5a40c853d..6bf1d094497d 100644
--- a/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js
+++ b/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import stylePropTypes from '../../styles/stylePropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
const propTypes = {
/** The URL to open */
diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js
index 6c72621deeea..24a903dca5fa 100644
--- a/src/components/AnchorForCommentsOnly/index.js
+++ b/src/components/AnchorForCommentsOnly/index.js
@@ -1,8 +1,8 @@
import React from 'react';
+import ControlSelection from '@libs/ControlSelection';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import ControlSelection from '../../libs/ControlSelection';
function AnchorForCommentsOnly(props) {
return (
diff --git a/src/components/AnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/index.native.js
index 69211b75e855..b9dc74b7ba05 100644
--- a/src/components/AnchorForCommentsOnly/index.native.js
+++ b/src/components/AnchorForCommentsOnly/index.native.js
@@ -1,7 +1,6 @@
import React from 'react';
import {Linking} from 'react-native';
import _ from 'underscore';
-
import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
diff --git a/src/components/AnimatedStep/AnimatedStepProvider.js b/src/components/AnimatedStep/AnimatedStepProvider.js
index 86d40b5bddeb..eb4797655344 100644
--- a/src/components/AnimatedStep/AnimatedStepProvider.js
+++ b/src/components/AnimatedStep/AnimatedStepProvider.js
@@ -1,7 +1,7 @@
-import React, {useMemo, useState} from 'react';
import PropTypes from 'prop-types';
+import React, {useMemo, useState} from 'react';
+import CONST from '@src/CONST';
import AnimatedStepContext from './AnimatedStepContext';
-import CONST from '../../CONST';
const propTypes = {
children: PropTypes.node.isRequired,
diff --git a/src/components/AnimatedStep/index.js b/src/components/AnimatedStep/index.js
index 5b0dc8bc78fa..e916cbe1b84c 100644
--- a/src/components/AnimatedStep/index.js
+++ b/src/components/AnimatedStep/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import * as Animatable from 'react-native-animatable';
-import CONST from '../../CONST';
-import styles from '../../styles/styles';
-import useNativeDriver from '../../libs/useNativeDriver';
+import useNativeDriver from '@libs/useNativeDriver';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
const propTypes = {
/** Children to wrap in AnimatedStep. */
diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js
index 43933210dc0b..2dc4159d1627 100644
--- a/src/components/AnonymousReportFooter.js
+++ b/src/components/AnonymousReportFooter.js
@@ -1,14 +1,14 @@
-import React from 'react';
-import {View, Text} from 'react-native';
import PropTypes from 'prop-types';
-import Button from './Button';
+import React from 'react';
+import {Text, View} from 'react-native';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import * as Session from '@userActions/Session';
import AvatarWithDisplayName from './AvatarWithDisplayName';
+import Button from './Button';
import ExpensifyWordmark from './ExpensifyWordmark';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import reportPropTypes from '../pages/reportPropTypes';
-import styles from '../styles/styles';
-import * as Session from '../libs/actions/Session';
import participantPropTypes from './participantPropTypes';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
/** The report currently being looked at */
diff --git a/src/components/ArchivedReportFooter.js b/src/components/ArchivedReportFooter.js
index 71d331b68db0..52484355a242 100644
--- a/src/components/ArchivedReportFooter.js
+++ b/src/components/ArchivedReportFooter.js
@@ -1,19 +1,19 @@
+import _ from 'lodash';
import lodashGet from 'lodash/get';
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {withOnyx} from 'react-native-onyx';
-import _ from 'lodash';
-import CONST from '../CONST';
+import compose from '@libs/compose';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import personalDetailsPropType from '@pages/personalDetailsPropType';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import Banner from './Banner';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import compose from '../libs/compose';
-import personalDetailsPropType from '../pages/personalDetailsPropType';
-import ONYXKEYS from '../ONYXKEYS';
-import * as ReportUtils from '../libs/ReportUtils';
-import reportPropTypes from '../pages/reportPropTypes';
-import * as ReportActionsUtils from '../libs/ReportActionsUtils';
-import styles from '../styles/styles';
-import * as PersonalDetailsUtils from '../libs/PersonalDetailsUtils';
const propTypes = {
/** The reason this report was archived */
diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js
index b8c726e75af6..19dc3a7ac614 100644
--- a/src/components/ArrowKeyFocusManager.js
+++ b/src/components/ArrowKeyFocusManager.js
@@ -1,7 +1,7 @@
-import {Component} from 'react';
import PropTypes from 'prop-types';
-import CONST from '../CONST';
-import KeyboardShortcut from '../libs/KeyboardShortcut';
+import {Component} from 'react';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import CONST from '@src/CONST';
const propTypes = {
/** Children to render. */
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index f8c4122dddb0..8231dd7c4fe2 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -1,44 +1,44 @@
-import React, {useState, useCallback, useRef, useMemo, useEffect} from 'react';
-import PropTypes from 'prop-types';
-import {View, Animated, Keyboard} from 'react-native';
import Str from 'expensify-common/lib/str';
-import lodashGet from 'lodash/get';
import lodashExtend from 'lodash/extend';
-import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {Animated, Keyboard, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import CONST from '../CONST';
-import Modal from './Modal';
-import AttachmentView from './Attachments/AttachmentView';
+import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
+import compose from '@libs/compose';
+import fileDownload from '@libs/fileDownload';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import useNativeDriver from '@libs/useNativeDriver';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import * as IOU from '@userActions/IOU';
+import * as Policy from '@userActions/Policy';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import AttachmentCarousel from './Attachments/AttachmentCarousel';
-import useLocalize from '../hooks/useLocalize';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import * as FileUtils from '../libs/fileDownload/FileUtils';
-import themeColors from '../styles/themes/default';
-import compose from '../libs/compose';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import AttachmentView from './Attachments/AttachmentView';
import Button from './Button';
-import HeaderWithBackButton from './HeaderWithBackButton';
-import fileDownload from '../libs/fileDownload';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
import ConfirmModal from './ConfirmModal';
import HeaderGap from './HeaderGap';
-import SafeAreaConsumer from './SafeAreaConsumer';
-import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
-import reportPropTypes from '../pages/reportPropTypes';
+import HeaderWithBackButton from './HeaderWithBackButton';
import * as Expensicons from './Icon/Expensicons';
-import useWindowDimensions from '../hooks/useWindowDimensions';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import useNativeDriver from '../libs/useNativeDriver';
-import * as ReportActionsUtils from '../libs/ReportActionsUtils';
-import * as ReportUtils from '../libs/ReportUtils';
-import ONYXKEYS from '../ONYXKEYS';
-import * as Policy from '../libs/actions/Policy';
-import useNetwork from '../hooks/useNetwork';
-import * as IOU from '../libs/actions/IOU';
+import Modal from './Modal';
+import SafeAreaConsumer from './SafeAreaConsumer';
import transactionPropTypes from './transactionPropTypes';
-import * as TransactionUtils from '../libs/TransactionUtils';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
/**
* Modal render prop component that exposes modal launching triggers that can be used
diff --git a/src/components/AttachmentPicker/attachmentPickerPropTypes.js b/src/components/AttachmentPicker/attachmentPickerPropTypes.js
index 3b6fb7d041c5..a3a346f5ea27 100644
--- a/src/components/AttachmentPicker/attachmentPickerPropTypes.js
+++ b/src/components/AttachmentPicker/attachmentPickerPropTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
const propTypes = {
/**
diff --git a/src/components/AttachmentPicker/index.js b/src/components/AttachmentPicker/index.js
index 9930fa49a909..24024eae6515 100644
--- a/src/components/AttachmentPicker/index.js
+++ b/src/components/AttachmentPicker/index.js
@@ -1,7 +1,7 @@
import React, {useRef} from 'react';
-import CONST from '../../CONST';
-import {propTypes, defaultProps} from './attachmentPickerPropTypes';
-import Visibility from '../../libs/Visibility';
+import Visibility from '@libs/Visibility';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes} from './attachmentPickerPropTypes';
/**
* Returns acceptable FileTypes based on ATTACHMENT_PICKER_TYPE
diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js
index 063314a4268c..0e723d4cf048 100644
--- a/src/components/AttachmentPicker/index.native.js
+++ b/src/components/AttachmentPicker/index.native.js
@@ -1,23 +1,23 @@
-import _ from 'underscore';
-import React, {useState, useRef, useCallback, useMemo} from 'react';
+import lodashCompact from 'lodash/compact';
import PropTypes from 'prop-types';
-import {View, Alert} from 'react-native';
-import RNDocumentPicker from 'react-native-document-picker';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
+import {Alert, View} from 'react-native';
import RNFetchBlob from 'react-native-blob-util';
-import lodashCompact from 'lodash/compact';
+import RNDocumentPicker from 'react-native-document-picker';
import {launchImageLibrary} from 'react-native-image-picker';
-import {propTypes as basePropTypes, defaultProps as baseDefaultProps} from './attachmentPickerPropTypes';
-import CONST from '../../CONST';
-import * as FileUtils from '../../libs/fileDownload/FileUtils';
-import * as Expensicons from '../Icon/Expensicons';
+import _ from 'underscore';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
+import Popover from '@components/Popover';
+import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
+import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import {defaultProps as baseDefaultProps, propTypes as basePropTypes} from './attachmentPickerPropTypes';
import launchCamera from './launchCamera';
-import Popover from '../Popover';
-import MenuItem from '../MenuItem';
-import styles from '../../styles/styles';
-import useLocalize from '../../hooks/useLocalize';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
-import useKeyboardShortcut from '../../hooks/useKeyboardShortcut';
-import useArrowKeyFocusManager from '../../hooks/useArrowKeyFocusManager';
const propTypes = {
...basePropTypes,
diff --git a/src/components/AttachmentPicker/launchCamera.ios.js b/src/components/AttachmentPicker/launchCamera.ios.js
index 7ac3708c5dd3..d6e3518d7188 100644
--- a/src/components/AttachmentPicker/launchCamera.ios.js
+++ b/src/components/AttachmentPicker/launchCamera.ios.js
@@ -1,5 +1,5 @@
-import {PERMISSIONS, request, RESULTS} from 'react-native-permissions';
import {launchCamera} from 'react-native-image-picker';
+import {PERMISSIONS, request, RESULTS} from 'react-native-permissions';
/**
* Launching the camera for iOS involves checking for permissions
diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
index 2c698d5c8a61..673bb7c224e2 100644
--- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
+++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
@@ -1,8 +1,8 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import {View, PixelRatio} from 'react-native';
-import useWindowDimensions from '../../../hooks/useWindowDimensions';
-import styles from '../../../styles/styles';
+import React from 'react';
+import {PixelRatio, View} from 'react-native';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import styles from '@styles/styles';
const propTypes = {
/** Cell Container styles */
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselActions.js b/src/components/Attachments/AttachmentCarousel/CarouselActions.js
index 8861039b8501..cf5309222c4e 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselActions.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselActions.js
@@ -1,8 +1,8 @@
-import {useEffect} from 'react';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
-import KeyboardShortcut from '../../../libs/KeyboardShortcut';
-import CONST from '../../../CONST';
+import {useEffect} from 'react';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import CONST from '@src/CONST';
const propTypes = {
/** Callback to cycle through attachments */
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
index d33659fd04ae..9bef889e61a1 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
@@ -1,15 +1,15 @@
import PropTypes from 'prop-types';
import React from 'react';
-import _ from 'underscore';
import {View} from 'react-native';
-import * as Expensicons from '../../Icon/Expensicons';
-import Tooltip from '../../Tooltip';
-import Button from '../../Button';
-import styles from '../../../styles/styles';
-import themeColors from '../../../styles/themes/default';
-import * as AttachmentCarouselViewPropTypes from '../propTypes';
-import useLocalize from '../../../hooks/useLocalize';
-import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import _ from 'underscore';
+import * as AttachmentCarouselViewPropTypes from '@components/Attachments/propTypes';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Tooltip from '@components/Tooltip';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
const propTypes = {
/** Where the arrows should be visible */
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
index 2fe62a00b90f..2d271aa6d4c4 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
@@ -1,16 +1,16 @@
+import PropTypes from 'prop-types';
import React, {useContext, useState} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import CONST from '../../../CONST';
-import styles from '../../../styles/styles';
-import useLocalize from '../../../hooks/useLocalize';
-import PressableWithoutFeedback from '../../Pressable/PressableWithoutFeedback';
-import Text from '../../Text';
-import Button from '../../Button';
-import AttachmentView from '../AttachmentView';
-import SafeAreaConsumer from '../../SafeAreaConsumer';
-import ReportAttachmentsContext from '../../../pages/home/report/ReportAttachmentsContext';
-import * as AttachmentsPropTypes from '../propTypes';
+import AttachmentView from '@components/Attachments/AttachmentView';
+import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
+import Button from '@components/Button';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
const propTypes = {
/** Attachment required information such as the source and file name */
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js
index 580c7eaac732..2ded34829a08 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js
@@ -1,12 +1,12 @@
/* eslint-disable es/no-optional-chaining */
+import PropTypes from 'prop-types';
import React, {useContext, useEffect, useRef, useState} from 'react';
import {ActivityIndicator, PixelRatio, StyleSheet, View} from 'react-native';
-import PropTypes from 'prop-types';
-import Image from '../../../Image';
+import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
+import Image from '@components/Image';
import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
import ImageTransformer from './ImageTransformer';
import ImageWrapper from './ImageWrapper';
-import * as AttachmentsPropTypes from '../../propTypes';
function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}) {
const imageScaleX = canvasWidth / imageWidth;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
index b1c2864a05f6..5bf8b79dae77 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
@@ -1,7 +1,7 @@
/* eslint-disable es/no-optional-chaining */
-import React, {useContext, useEffect, useRef, useState, useMemo} from 'react';
-import {View} from 'react-native';
import PropTypes from 'prop-types';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
import {Gesture, GestureDetector} from 'react-native-gesture-handler';
import Animated, {
cancelAnimation,
@@ -15,7 +15,7 @@ import Animated, {
withDecay,
withSpring,
} from 'react-native-reanimated';
-import styles from '../../../../styles/styles';
+import styles from '@styles/styles';
import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
import ImageWrapper from './ImageWrapper';
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js b/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
index a6a935bbba01..10f2ae94340a 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
@@ -1,9 +1,9 @@
/* eslint-disable es/no-optional-chaining */
+import PropTypes from 'prop-types';
import React from 'react';
import {StyleSheet} from 'react-native';
-import PropTypes from 'prop-types';
import Animated from 'react-native-reanimated';
-import styles from '../../../../styles/styles';
+import styles from '@styles/styles';
const imageWrapperPropTypes = {
children: PropTypes.node.isRequired,
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.js b/src/components/Attachments/AttachmentCarousel/Pager/index.js
index e5feaedf63b7..e4659caf24f0 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.js
@@ -1,14 +1,14 @@
/* eslint-disable es/no-optional-chaining */
-import React, {useRef, useState, useImperativeHandle, useMemo} from 'react';
-import {View} from 'react-native';
import PropTypes from 'prop-types';
-import {GestureHandlerRootView, createNativeWrapper} from 'react-native-gesture-handler';
-import Animated, {runOnJS, useAnimatedProps, useAnimatedReaction, useEvent, useHandler, useSharedValue} from 'react-native-reanimated';
+import React, {useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
+import {createNativeWrapper, GestureHandlerRootView} from 'react-native-gesture-handler';
import PagerView from 'react-native-pager-view';
+import Animated, {runOnJS, useAnimatedProps, useAnimatedReaction, useEvent, useHandler, useSharedValue} from 'react-native-reanimated';
import _ from 'underscore';
-import styles from '../../../../styles/styles';
+import refPropTypes from '@components/refPropTypes';
+import styles from '@styles/styles';
import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
-import refPropTypes from '../../../refPropTypes';
const AnimatedPagerView = Animated.createAnimatedComponent(createNativeWrapper(PagerView));
diff --git a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
index 81f22f684243..8048773de42c 100644
--- a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
+++ b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
-import reportPropTypes from '../../../pages/reportPropTypes';
-import reportActionPropTypes from '../../../pages/home/report/reportActionPropTypes';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import reportPropTypes from '@pages/reportPropTypes';
const propTypes = {
/** source is used to determine the starting index in the array of attachments */
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
index 8420a9e7831b..6f0dd335c2bb 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
@@ -1,11 +1,11 @@
import {Parser as HtmlParser} from 'htmlparser2';
-import _ from 'underscore';
import lodashGet from 'lodash/get';
-import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
-import * as TransactionUtils from '../../../libs/TransactionUtils';
-import * as ReceiptUtils from '../../../libs/ReceiptUtils';
-import CONST from '../../../CONST';
-import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
+import _ from 'underscore';
+import * as ReceiptUtils from '@libs/ReceiptUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
+import CONST from '@src/CONST';
/**
* Constructs the initial component state from report actions
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
index 131c57d4c345..99a23835fd97 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.js
@@ -1,25 +1,25 @@
-import React, {useRef, useCallback, useState, useEffect} from 'react';
-import {View, FlatList, PixelRatio, Keyboard} from 'react-native';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {FlatList, Keyboard, PixelRatio, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import styles from '../../../styles/styles';
+import BlockingView from '@components/BlockingViews/BlockingView';
+import * as Illustrations from '@components/Icon/Illustrations';
+import withLocalize from '@components/withLocalize';
+import withWindowDimensions from '@components/withWindowDimensions';
+import compose from '@libs/compose';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
+import ONYXKEYS from '@src/ONYXKEYS';
import AttachmentCarouselCellRenderer from './AttachmentCarouselCellRenderer';
+import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
import CarouselActions from './CarouselActions';
-import withWindowDimensions from '../../withWindowDimensions';
import CarouselButtons from './CarouselButtons';
+import CarouselItem from './CarouselItem';
import extractAttachmentsFromReport from './extractAttachmentsFromReport';
-import {propTypes, defaultProps} from './attachmentCarouselPropTypes';
-import ONYXKEYS from '../../../ONYXKEYS';
-import withLocalize from '../../withLocalize';
-import compose from '../../../libs/compose';
import useCarouselArrows from './useCarouselArrows';
-import CarouselItem from './CarouselItem';
-import Navigation from '../../../libs/Navigation/Navigation';
-import BlockingView from '../../BlockingViews/BlockingView';
-import * as Illustrations from '../../Icon/Illustrations';
-import variables from '../../../styles/variables';
-import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
-import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
const viewabilityConfig = {
// To facilitate paging through the attachments, we want to consider an item "viewable" when it is
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
index bcea50698b3b..8c6957c9371a 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.js
+++ b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -1,22 +1,22 @@
import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {View, Keyboard, PixelRatio} from 'react-native';
+import {Keyboard, PixelRatio, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import AttachmentCarouselPager from './Pager';
-import styles from '../../../styles/styles';
+import BlockingView from '@components/BlockingViews/BlockingView';
+import * as Illustrations from '@components/Icon/Illustrations';
+import withLocalize from '@components/withLocalize';
+import compose from '@libs/compose';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
import CarouselButtons from './CarouselButtons';
-import ONYXKEYS from '../../../ONYXKEYS';
-import {propTypes, defaultProps} from './attachmentCarouselPropTypes';
+import CarouselItem from './CarouselItem';
import extractAttachmentsFromReport from './extractAttachmentsFromReport';
+import AttachmentCarouselPager from './Pager';
import useCarouselArrows from './useCarouselArrows';
-import CarouselItem from './CarouselItem';
-import Navigation from '../../../libs/Navigation/Navigation';
-import BlockingView from '../../BlockingViews/BlockingView';
-import * as Illustrations from '../../Icon/Illustrations';
-import variables from '../../../styles/variables';
-import compose from '../../../libs/compose';
-import withLocalize from '../../withLocalize';
-import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, setDownloadButtonVisibility, translate}) {
const pagerRef = useRef(null);
diff --git a/src/components/Attachments/AttachmentCarousel/useCarouselArrows.js b/src/components/Attachments/AttachmentCarousel/useCarouselArrows.js
index 64c97fa99819..0c55c3ae519d 100644
--- a/src/components/Attachments/AttachmentCarousel/useCarouselArrows.js
+++ b/src/components/Attachments/AttachmentCarousel/useCarouselArrows.js
@@ -1,6 +1,6 @@
import {useCallback, useEffect, useRef, useState} from 'react';
-import CONST from '../../../CONST';
-import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import CONST from '@src/CONST';
function useCarouselArrows() {
const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
index 48ac954ced7f..23049915a8d9 100755
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
@@ -1,11 +1,11 @@
import React, {memo} from 'react';
-import styles from '../../../../styles/styles';
-import ImageView from '../../../ImageView';
-import withLocalize, {withLocalizePropTypes} from '../../../withLocalize';
-import compose from '../../../../libs/compose';
-import PressableWithoutFeedback from '../../../Pressable/PressableWithoutFeedback';
-import CONST from '../../../../CONST';
-import {attachmentViewImagePropTypes, attachmentViewImageDefaultProps} from './propTypes';
+import ImageView from '@components/ImageView';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import compose from '@libs/compose';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
const propTypes = {
...attachmentViewImagePropTypes,
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
index 7334e5391bc1..faf2f21c133d 100755
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
@@ -1,12 +1,12 @@
import React, {memo} from 'react';
-import styles from '../../../../styles/styles';
-import withLocalize, {withLocalizePropTypes} from '../../../withLocalize';
-import ImageView from '../../../ImageView';
-import compose from '../../../../libs/compose';
-import PressableWithoutFeedback from '../../../Pressable/PressableWithoutFeedback';
-import CONST from '../../../../CONST';
-import AttachmentCarouselPage from '../../AttachmentCarousel/Pager/AttachmentCarouselPage';
-import {attachmentViewImagePropTypes, attachmentViewImageDefaultProps} from './propTypes';
+import AttachmentCarouselPage from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage';
+import ImageView from '@components/ImageView';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import compose from '@libs/compose';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
const propTypes = {
...attachmentViewImagePropTypes,
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js
index 661b940da207..184d3ae1a367 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import {attachmentViewPropTypes, attachmentViewDefaultProps} from '../propTypes';
+import {attachmentViewDefaultProps, attachmentViewPropTypes} from '@components/Attachments/AttachmentView/propTypes';
const attachmentViewImagePropTypes = {
...attachmentViewPropTypes,
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js
index 1d1de83951ee..c3d1423b17c9 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js
@@ -1,6 +1,6 @@
import React, {memo} from 'react';
-import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes';
-import PDFView from '../../../PDFView';
+import PDFView from '@components/PDFView';
+import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
return (
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js
index fea72a3fe37a..9ab0b45f8c8f 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js
@@ -1,7 +1,7 @@
import React, {memo, useCallback, useContext, useEffect} from 'react';
-import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes';
-import PDFView from '../../../PDFView';
-import AttachmentCarouselPagerContext from '../../AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
+import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
+import PDFView from '@components/PDFView';
+import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
index 07203cc2fe74..a34010f0ba8b 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
-import * as AttachmentsPropTypes from '../../propTypes';
-import stylePropTypes from '../../../../styles/stylePropTypes';
+import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
+import stylePropTypes from '@styles/stylePropTypes';
const attachmentViewPdfPropTypes = {
/** File object maybe be instance of File or Object */
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 66d7b2fa89d6..98086dcc4a0c 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -1,29 +1,29 @@
-import React, {memo, useState} from 'react';
-import {View, ScrollView, ActivityIndicator} from 'react-native';
-import _ from 'underscore';
-import PropTypes from 'prop-types';
import Str from 'expensify-common/lib/str';
+import PropTypes from 'prop-types';
+import React, {memo, useState} from 'react';
+import {ActivityIndicator, ScrollView, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import styles from '../../../styles/styles';
-import Icon from '../../Icon';
-import * as Expensicons from '../../Icon/Expensicons';
-import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
-import compose from '../../../libs/compose';
-import Text from '../../Text';
-import Tooltip from '../../Tooltip';
-import themeColors from '../../../styles/themes/default';
-import variables from '../../../styles/variables';
+import _ from 'underscore';
+import DistanceEReceipt from '@components/DistanceEReceipt';
+import EReceipt from '@components/EReceipt';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useNetwork from '@hooks/useNetwork';
+import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
+import compose from '@libs/compose';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import cursor from '@styles/utilities/cursor';
+import variables from '@styles/variables';
+import ONYXKEYS from '@src/ONYXKEYS';
import AttachmentViewImage from './AttachmentViewImage';
import AttachmentViewPdf from './AttachmentViewPdf';
-import addEncryptedAuthTokenToURL from '../../../libs/addEncryptedAuthTokenToURL';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import {attachmentViewPropTypes, attachmentViewDefaultProps} from './propTypes';
-import * as TransactionUtils from '../../../libs/TransactionUtils';
-import DistanceEReceipt from '../../DistanceEReceipt';
-import useNetwork from '../../../hooks/useNetwork';
-import ONYXKEYS from '../../../ONYXKEYS';
-import EReceipt from '../../EReceipt';
-import cursor from '../../../styles/utilities/cursor';
+import {attachmentViewDefaultProps, attachmentViewPropTypes} from './propTypes';
const propTypes = {
...attachmentViewPropTypes,
diff --git a/src/components/Attachments/AttachmentView/propTypes.js b/src/components/Attachments/AttachmentView/propTypes.js
index 71ae3639b61c..0c7c8814267f 100644
--- a/src/components/Attachments/AttachmentView/propTypes.js
+++ b/src/components/Attachments/AttachmentView/propTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import * as AttachmentsPropTypes from '../propTypes';
+import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
const attachmentViewPropTypes = {
/** Whether source url requires authentication */
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
index 7ba1e51bcdd3..c024b025c80e 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
@@ -1,12 +1,12 @@
import React, {useEffect, useRef} from 'react';
-import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
// We take FlatList from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
import {FlatList} from 'react-native-gesture-handler';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
-import CONST from '../../CONST';
+import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
import {propTypes} from './autoCompleteSuggestionsPropTypes';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
/**
* @param {Number} numRows
diff --git a/src/components/AutoCompleteSuggestions/index.js b/src/components/AutoCompleteSuggestions/index.js
index 9234d04f4507..30654caf5708 100644
--- a/src/components/AutoCompleteSuggestions/index.js
+++ b/src/components/AutoCompleteSuggestions/index.js
@@ -1,11 +1,11 @@
import React from 'react';
-import {View} from 'react-native';
import ReactDOM from 'react-dom';
-import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
+import {View} from 'react-native';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import * as StyleUtils from '@styles/StyleUtils';
import {propTypes} from './autoCompleteSuggestionsPropTypes';
-import * as StyleUtils from '../../styles/StyleUtils';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
+import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
/**
* On the mobile-web platform, when long-pressing on auto-complete suggestions,
diff --git a/src/components/AutoCompleteSuggestions/index.native.js b/src/components/AutoCompleteSuggestions/index.native.js
index f5ff4636f395..439fa45eae78 100644
--- a/src/components/AutoCompleteSuggestions/index.native.js
+++ b/src/components/AutoCompleteSuggestions/index.native.js
@@ -1,7 +1,7 @@
-import React from 'react';
import {Portal} from '@gorhom/portal';
-import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
+import React from 'react';
import {propTypes} from './autoCompleteSuggestionsPropTypes';
+import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
function AutoCompleteSuggestions({measureParentContainer, ...props}) {
return (
diff --git a/src/components/AutoEmailLink.js b/src/components/AutoEmailLink.js
index 9f39997bce13..eece1a16ca5a 100644
--- a/src/components/AutoEmailLink.js
+++ b/src/components/AutoEmailLink.js
@@ -1,10 +1,10 @@
-import React from 'react';
+import {CONST} from 'expensify-common/lib/CONST';
import PropTypes from 'prop-types';
+import React from 'react';
import _ from 'underscore';
-import {CONST} from 'expensify-common/lib/CONST';
+import styles from '@styles/styles';
import Text from './Text';
import TextLink from './TextLink';
-import styles from '../styles/styles';
const propTypes = {
text: PropTypes.string.isRequired,
diff --git a/src/components/AutoUpdateTime.js b/src/components/AutoUpdateTime.js
index e7d8b133e903..c85f14ed2c29 100644
--- a/src/components/AutoUpdateTime.js
+++ b/src/components/AutoUpdateTime.js
@@ -2,13 +2,13 @@
* Displays the user's local time and updates it every minute.
* The time auto-update logic is extracted to this component to avoid re-rendering a more complex component, e.g. DetailsPage.
*/
-import {View} from 'react-native';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import PropTypes from 'prop-types';
-import styles from '../styles/styles';
-import DateUtils from '../libs/DateUtils';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
+import DateUtils from '@libs/DateUtils';
+import styles from '@styles/styles';
import Text from './Text';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
/** Timezone of the user from their personal details */
diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 4f0eb60eb2e0..546387031643 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -1,17 +1,17 @@
+import PropTypes from 'prop-types';
import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import _ from 'underscore';
-import stylePropTypes from '../styles/stylePropTypes';
+import useNetwork from '@hooks/useNetwork';
+import * as ReportUtils from '@libs/ReportUtils';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import Icon from './Icon';
-import themeColors from '../styles/themes/default';
-import CONST from '../CONST';
-import * as StyleUtils from '../styles/StyleUtils';
import * as Expensicons from './Icon/Expensicons';
import Image from './Image';
-import styles from '../styles/styles';
-import * as ReportUtils from '../libs/ReportUtils';
-import useNetwork from '../hooks/useNetwork';
const propTypes = {
/** Source for the avatar. Can be a URL or an icon. */
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index 10e8a76f756d..c8bd7f6f7bc8 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -2,27 +2,27 @@ import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useState} from 'react';
import {ActivityIndicator, Image, View} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import {runOnUI, interpolate, useAnimatedGestureHandler, useSharedValue, useWorkletCallback} from 'react-native-reanimated';
-import CONST from '../../CONST';
-import compose from '../../libs/compose';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
-import Button from '../Button';
-import HeaderWithBackButton from '../HeaderWithBackButton';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import Modal from '../Modal';
-import Text from '../Text';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import {interpolate, runOnUI, useAnimatedGestureHandler, useSharedValue, useWorkletCallback} from 'react-native-reanimated';
+import Button from '@components/Button';
+import HeaderGap from '@components/HeaderGap';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Modal from '@components/Modal';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import compose from '@libs/compose';
+import cropOrRotateImage from '@libs/cropOrRotateImage';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import ImageCropView from './ImageCropView';
import Slider from './Slider';
-import cropOrRotateImage from '../../libs/cropOrRotateImage';
-import HeaderGap from '../HeaderGap';
-import * as StyleUtils from '../../styles/StyleUtils';
-import Tooltip from '../Tooltip';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import ScreenWrapper from '../ScreenWrapper';
const propTypes = {
/** Link to image for cropping */
diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js
index be19109d7379..cb135cc76c69 100644
--- a/src/components/AvatarCropModal/ImageCropView.js
+++ b/src/components/AvatarCropModal/ImageCropView.js
@@ -3,12 +3,12 @@ import React from 'react';
import {View} from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';
import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import * as StyleUtils from '../../styles/StyleUtils';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import ControlSelection from '@libs/ControlSelection';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
import gestureHandlerPropTypes from './gestureHandlerPropTypes';
-import ControlSelection from '../../libs/ControlSelection';
const propTypes = {
/** Link to image for cropping */
diff --git a/src/components/AvatarCropModal/Slider.js b/src/components/AvatarCropModal/Slider.js
index 573ee781e5f8..4281da1e7b99 100644
--- a/src/components/AvatarCropModal/Slider.js
+++ b/src/components/AvatarCropModal/Slider.js
@@ -3,11 +3,11 @@ import React, {useState} from 'react';
import {View} from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';
import Animated, {useAnimatedStyle} from 'react-native-reanimated';
-import styles from '../../styles/styles';
+import Tooltip from '@components/Tooltip';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import ControlSelection from '@libs/ControlSelection';
+import styles from '@styles/styles';
import gestureHandlerPropTypes from './gestureHandlerPropTypes';
-import ControlSelection from '../../libs/ControlSelection';
-import Tooltip from '../Tooltip';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
const propTypes = {
/** React-native-reanimated lib handler which executes when the user is panning slider */
diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
index 03ae8f51bfb6..a7647aef5e99 100644
--- a/src/components/AvatarWithDisplayName.js
+++ b/src/components/AvatarWithDisplayName.js
@@ -1,28 +1,28 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import CONST from '../CONST';
-import reportPropTypes from '../pages/reportPropTypes';
-import participantPropTypes from './participantPropTypes';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import SubscriptAvatar from './SubscriptAvatar';
-import * as ReportUtils from '../libs/ReportUtils';
-import MultipleAvatars from './MultipleAvatars';
+import compose from '@libs/compose';
+import Navigation from '@libs/Navigation/Navigation';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
import DisplayNames from './DisplayNames';
-import compose from '../libs/compose';
-import * as OptionsListUtils from '../libs/OptionsListUtils';
-import Text from './Text';
-import * as StyleUtils from '../styles/StyleUtils';
+import MultipleAvatars from './MultipleAvatars';
import ParentNavigationSubtitle from './ParentNavigationSubtitle';
+import participantPropTypes from './participantPropTypes';
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import * as ReportActionsUtils from '../libs/ReportActionsUtils';
+import SubscriptAvatar from './SubscriptAvatar';
+import Text from './Text';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
const propTypes = {
/** The report currently being looked at */
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index 3dd23d9051eb..871d967e23dc 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -1,31 +1,31 @@
-import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import * as Browser from '@libs/Browser';
+import compose from '@libs/compose';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
+import getImageResolution from '@libs/fileDownload/getImageResolution';
+import SpinningIndicatorAnimation from '@styles/animation/SpinningIndicatorAnimation';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import AttachmentModal from './AttachmentModal';
+import AttachmentPicker from './AttachmentPicker';
import Avatar from './Avatar';
+import AvatarCropModal from './AvatarCropModal/AvatarCropModal';
+import DotIndicatorMessage from './DotIndicatorMessage';
import Icon from './Icon';
-import PopoverMenu from './PopoverMenu';
import * as Expensicons from './Icon/Expensicons';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import AttachmentPicker from './AttachmentPicker';
-import AvatarCropModal from './AvatarCropModal/AvatarCropModal';
import OfflineWithFeedback from './OfflineWithFeedback';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import variables from '../styles/variables';
-import CONST from '../CONST';
-import SpinningIndicatorAnimation from '../styles/animation/SpinningIndicatorAnimation';
-import Tooltip from './Tooltip/PopoverAnchorTooltip';
-import stylePropTypes from '../styles/stylePropTypes';
-import * as FileUtils from '../libs/fileDownload/FileUtils';
-import getImageResolution from '../libs/fileDownload/getImageResolution';
+import PopoverMenu from './PopoverMenu';
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
-import AttachmentModal from './AttachmentModal';
-import DotIndicatorMessage from './DotIndicatorMessage';
-import * as Browser from '../libs/Browser';
+import Tooltip from './Tooltip/PopoverAnchorTooltip';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
import withNavigationFocus from './withNavigationFocus';
-import compose from '../libs/compose';
const propTypes = {
/** Avatar source to display */
diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js
index 5e7b8d1ee632..c2a8d5346e13 100644
--- a/src/components/AvatarWithIndicator.js
+++ b/src/components/AvatarWithIndicator.js
@@ -1,12 +1,12 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
+import * as UserUtils from '@libs/UserUtils';
+import styles from '@styles/styles';
import Avatar from './Avatar';
-import styles from '../styles/styles';
-import Tooltip from './Tooltip';
-import * as UserUtils from '../libs/UserUtils';
-import Indicator from './Indicator';
import * as Expensicons from './Icon/Expensicons';
+import Indicator from './Indicator';
+import Tooltip from './Tooltip';
const propTypes = {
/** URL for the avatar */
diff --git a/src/components/Badge.js b/src/components/Badge.js
index 942733baff37..0a6b72201655 100644
--- a/src/components/Badge.js
+++ b/src/components/Badge.js
@@ -1,11 +1,11 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import Text from './Text';
-import CONST from '../CONST';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import Text from './Text';
const propTypes = {
/** Is Success type */
diff --git a/src/components/Banner.js b/src/components/Banner.js
index 7ff1ab8210dc..df1be45a96c5 100644
--- a/src/components/Banner.js
+++ b/src/components/Banner.js
@@ -1,19 +1,19 @@
-import React, {memo} from 'react';
import PropTypes from 'prop-types';
+import React, {memo} from 'react';
import {View} from 'react-native';
-import compose from '../libs/compose';
+import compose from '@libs/compose';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
import Hoverable from './Hoverable';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
import RenderHTML from './RenderHTML';
import Text from './Text';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import getButtonState from '../libs/getButtonState';
import Tooltip from './Tooltip';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import CONST from '../CONST';
const propTypes = {
/** Text to display in the banner. */
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index cf7ff4d95b07..b8d7a4a7484b 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -1,15 +1,15 @@
-import {View} from 'react-native';
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
import _ from 'underscore';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import getButtonState from '../libs/getButtonState';
-import variables from '../styles/variables';
-import Tooltip from './Tooltip/PopoverAnchorTooltip';
+import DomUtils from '@libs/DomUtils';
+import getButtonState from '@libs/getButtonState';
+import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import variables from '@styles/variables';
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
-import ReportActionComposeFocusManager from '../libs/ReportActionComposeFocusManager';
-import DomUtils from '../libs/DomUtils';
+import Tooltip from './Tooltip/PopoverAnchorTooltip';
const propTypes = {
/**
diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index 5587808a09fd..ecbde3a5afe6 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -1,12 +1,12 @@
+import PropTypes from 'prop-types';
import React, {useState} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import ControlSelection from '@libs/ControlSelection';
+import styles from '@styles/styles';
import Button from './Button';
-import ControlSelection from '../libs/ControlSelection';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import useWindowDimensions from '../hooks/useWindowDimensions';
const propTypes = {
/** Callback to inform parent modal with key pressed */
diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index 5cb342b0fada..14daddea5f9c 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -1,15 +1,15 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import variables from '../../styles/variables';
-import Icon from '../Icon';
-import Text from '../Text';
-import themeColors from '../../styles/themes/default';
-import TextLink from '../TextLink';
-import Navigation from '../../libs/Navigation/Navigation';
-import AutoEmailLink from '../AutoEmailLink';
-import useLocalize from '../../hooks/useLocalize';
+import AutoEmailLink from '@components/AutoEmailLink';
+import Icon from '@components/Icon';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
const propTypes = {
/** Expensicon for the page */
diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js
index a9c4bf63b65e..5232b5eca8dd 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.js
+++ b/src/components/BlockingViews/FullPageNotFoundView.js
@@ -1,14 +1,14 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Illustrations from '@components/Icon/Illustrations';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
+import ROUTES from '@src/ROUTES';
import BlockingView from './BlockingView';
-import * as Illustrations from '../Icon/Illustrations';
-import HeaderWithBackButton from '../HeaderWithBackButton';
-import Navigation from '../../libs/Navigation/Navigation';
-import variables from '../../styles/variables';
-import styles from '../../styles/styles';
-import useLocalize from '../../hooks/useLocalize';
-import ROUTES from '../../ROUTES';
const propTypes = {
/** Child elements */
diff --git a/src/components/BlockingViews/FullPageOfflineBlockingView.js b/src/components/BlockingViews/FullPageOfflineBlockingView.js
index 148c7c751bee..5a876ecb8b1c 100644
--- a/src/components/BlockingViews/FullPageOfflineBlockingView.js
+++ b/src/components/BlockingViews/FullPageOfflineBlockingView.js
@@ -1,10 +1,10 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import networkPropTypes from '../networkPropTypes';
-import {withNetwork} from '../OnyxProvider';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import * as Expensicons from '../Icon/Expensicons';
-import compose from '../../libs/compose';
+import React from 'react';
+import * as Expensicons from '@components/Icon/Expensicons';
+import networkPropTypes from '@components/networkPropTypes';
+import {withNetwork} from '@components/OnyxProvider';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import compose from '@libs/compose';
import BlockingView from './BlockingView';
const propTypes = {
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 26d33b1431b8..2039157d3f08 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -1,21 +1,21 @@
+import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {ActivityIndicator, View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
-import Text from '../Text';
-import KeyboardShortcut from '../../libs/KeyboardShortcut';
-import Icon from '../Icon';
-import CONST from '../../CONST';
-import * as StyleUtils from '../../styles/StyleUtils';
-import HapticFeedback from '../../libs/HapticFeedback';
-import withNavigationFallback from '../withNavigationFallback';
-import compose from '../../libs/compose';
-import * as Expensicons from '../Icon/Expensicons';
-import withNavigationFocus from '../withNavigationFocus';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import refPropTypes from '@components/refPropTypes';
+import Text from '@components/Text';
+import withNavigationFallback from '@components/withNavigationFallback';
+import withNavigationFocus from '@components/withNavigationFocus';
+import compose from '@libs/compose';
+import HapticFeedback from '@libs/HapticFeedback';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import validateSubmitShortcut from './validateSubmitShortcut';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
-import refPropTypes from '../refPropTypes';
const propTypes = {
/** Should the press event bubble across multiple instances when Enter key triggers it. */
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 04bc3f6fb54a..7c88d9202b78 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -1,16 +1,16 @@
-import React, {useState, useRef, useEffect} from 'react';
import PropTypes from 'prop-types';
+import React, {useEffect, useRef, useState} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import useWindowDimensions from '../hooks/useWindowDimensions';
-import styles from '../styles/styles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import Button from './Button';
-import PopoverMenu from './PopoverMenu';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
-import themeColors from '../styles/themes/default';
-import CONST from '../CONST';
-import * as StyleUtils from '../styles/StyleUtils';
+import PopoverMenu from './PopoverMenu';
const propTypes = {
/** Text to display for the menu header */
diff --git a/src/components/CardPreview.js b/src/components/CardPreview.js
index 4f774d67360c..9f59ca140ce5 100644
--- a/src/components/CardPreview.js
+++ b/src/components/CardPreview.js
@@ -1,13 +1,13 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
+import ExpensifyCardImage from '@assets/images/expensify-card.svg';
+import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
+import ONYXKEYS from '@src/ONYXKEYS';
import Text from './Text';
-import usePrivatePersonalDetails from '../hooks/usePrivatePersonalDetails';
-import ONYXKEYS from '../ONYXKEYS';
-import ExpensifyCardImage from '../../assets/images/expensify-card.svg';
-import variables from '../styles/variables';
const propTypes = {
/** User's private personal details */
diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js
index 6f2800a5d98f..0bc116bf45cc 100644
--- a/src/components/CategoryPicker/categoryPickerPropTypes.js
+++ b/src/components/CategoryPicker/categoryPickerPropTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import categoryPropTypes from '../categoryPropTypes';
+import categoryPropTypes from '@components/categoryPropTypes';
const propTypes = {
/** The policyID we are getting categories for */
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index e7f68e7011fc..f3127131b9b2 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -1,14 +1,14 @@
+import lodashGet from 'lodash/get';
import React, {useMemo, useState} from 'react';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import lodashGet from 'lodash/get';
-import ONYXKEYS from '../../ONYXKEYS';
-import {propTypes, defaultProps} from './categoryPickerPropTypes';
-import styles from '../../styles/styles';
-import CONST from '../../CONST';
-import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import OptionsSelector from '../OptionsSelector';
-import useLocalize from '../../hooks/useLocalize';
+import OptionsSelector from '@components/OptionsSelector';
+import useLocalize from '@hooks/useLocalize';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {defaultProps, propTypes} from './categoryPickerPropTypes';
function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, onSubmit}) {
const {translate} = useLocalize();
diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
index b4ffd7a6b062..51b9212133a4 100644
--- a/src/components/Checkbox.js
+++ b/src/components/Checkbox.js
@@ -1,13 +1,13 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import stylePropTypes from '../styles/stylePropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
-import * as StyleUtils from '../styles/StyleUtils';
-import CONST from '../CONST';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
import refPropTypes from './refPropTypes';
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index c10966934b9d..4bffadecb733 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -1,13 +1,13 @@
-import React, {useState} from 'react';
import PropTypes from 'prop-types';
+import React, {useState} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import styles from '../styles/styles';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
import Checkbox from './Checkbox';
-import Text from './Text';
import FormHelpMessage from './FormHelpMessage';
-import variables from '../styles/variables';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import Text from './Text';
/**
* Returns an error if the required props are not provided
diff --git a/src/components/CheckboxWithTooltip/CheckboxWithTooltipForMobileWebAndNative.js b/src/components/CheckboxWithTooltip/CheckboxWithTooltipForMobileWebAndNative.js
index f5bc097d95f7..61a2d6feaa4b 100644
--- a/src/components/CheckboxWithTooltip/CheckboxWithTooltipForMobileWebAndNative.js
+++ b/src/components/CheckboxWithTooltip/CheckboxWithTooltipForMobileWebAndNative.js
@@ -1,9 +1,9 @@
import React from 'react';
import {View} from 'react-native';
-import Checkbox from '../Checkbox';
-import {propTypes, defaultProps} from './checkboxWithTooltipPropTypes';
-import Growl from '../../libs/Growl';
-import withWindowDimensions from '../withWindowDimensions';
+import Checkbox from '@components/Checkbox';
+import withWindowDimensions from '@components/withWindowDimensions';
+import Growl from '@libs/Growl';
+import {defaultProps, propTypes} from './checkboxWithTooltipPropTypes';
class CheckboxWithTooltipForMobileWebAndNative extends React.Component {
constructor(props) {
diff --git a/src/components/CheckboxWithTooltip/checkboxWithTooltipPropTypes.js b/src/components/CheckboxWithTooltip/checkboxWithTooltipPropTypes.js
index 1656fa7a82cc..67588d00ef65 100644
--- a/src/components/CheckboxWithTooltip/checkboxWithTooltipPropTypes.js
+++ b/src/components/CheckboxWithTooltip/checkboxWithTooltipPropTypes.js
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
-import {windowDimensionsPropTypes} from '../withWindowDimensions';
-import CONST from '../../CONST';
-import stylePropTypes from '../../styles/stylePropTypes';
+import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import stylePropTypes from '@styles/stylePropTypes';
+import CONST from '@src/CONST';
const propTypes = {
/** Whether the checkbox is checked */
diff --git a/src/components/CheckboxWithTooltip/index.js b/src/components/CheckboxWithTooltip/index.js
index 70b1f345fb61..06e4e0412eba 100644
--- a/src/components/CheckboxWithTooltip/index.js
+++ b/src/components/CheckboxWithTooltip/index.js
@@ -1,10 +1,10 @@
import React from 'react';
import {View} from 'react-native';
+import Checkbox from '@components/Checkbox';
+import Tooltip from '@components/Tooltip';
+import withWindowDimensions from '@components/withWindowDimensions';
import CheckboxWithTooltipForMobileWebAndNative from './CheckboxWithTooltipForMobileWebAndNative';
-import Checkbox from '../Checkbox';
-import {propTypes, defaultProps} from './checkboxWithTooltipPropTypes';
-import Tooltip from '../Tooltip';
-import withWindowDimensions from '../withWindowDimensions';
+import {defaultProps, propTypes} from './checkboxWithTooltipPropTypes';
function CheckboxWithTooltip(props) {
if (props.isSmallScreenWidth || props.isMediumScreenWidth) {
diff --git a/src/components/CheckboxWithTooltip/index.native.js b/src/components/CheckboxWithTooltip/index.native.js
index 61d171d1717a..46ce0bbd131e 100644
--- a/src/components/CheckboxWithTooltip/index.native.js
+++ b/src/components/CheckboxWithTooltip/index.native.js
@@ -1,7 +1,7 @@
import React from 'react';
-import {propTypes, defaultProps} from './checkboxWithTooltipPropTypes';
-import withWindowDimensions from '../withWindowDimensions';
+import withWindowDimensions from '@components/withWindowDimensions';
import CheckboxWithTooltipForMobileWebAndNative from './CheckboxWithTooltipForMobileWebAndNative';
+import {defaultProps, propTypes} from './checkboxWithTooltipPropTypes';
function CheckboxWithTooltip(props) {
return (
diff --git a/src/components/CollapsibleSection/Collapsible/index.native.js b/src/components/CollapsibleSection/Collapsible/index.native.js
index 022d2a2a2ff9..9b800304beeb 100644
--- a/src/components/CollapsibleSection/Collapsible/index.native.js
+++ b/src/components/CollapsibleSection/Collapsible/index.native.js
@@ -1,6 +1,6 @@
-import CollapsibleRN from 'react-native-collapsible';
import PropTypes from 'prop-types';
import React from 'react';
+import CollapsibleRN from 'react-native-collapsible';
const propTypes = {
/** Whether the section should start expanded. False by default */
diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js
index 7009d1905e1d..32d422297ca4 100644
--- a/src/components/CollapsibleSection/index.js
+++ b/src/components/CollapsibleSection/index.js
@@ -1,13 +1,13 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import Collapsible from './Collapsible';
-import Text from '../Text';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
-import CONST from '../../CONST';
const propTypes = {
/** Title of the Collapsible section */
diff --git a/src/components/CommunicationsLink.js b/src/components/CommunicationsLink.js
index c8ca37f51c0f..f09fecea5239 100644
--- a/src/components/CommunicationsLink.js
+++ b/src/components/CommunicationsLink.js
@@ -1,10 +1,10 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
-import * as Expensicons from './Icon/Expensicons';
-import Clipboard from '../libs/Clipboard';
+import Clipboard from '@libs/Clipboard';
+import styles from '@styles/styles';
import ContextMenuItem from './ContextMenuItem';
+import * as Expensicons from './Icon/Expensicons';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
diff --git a/src/components/ComposeProviders.tsx b/src/components/ComposeProviders.tsx
index bff36db25533..2c73719358d8 100644
--- a/src/components/ComposeProviders.tsx
+++ b/src/components/ComposeProviders.tsx
@@ -1,5 +1,5 @@
import React, {ComponentType, ReactNode} from 'react';
-import ChildrenProps from '../types/utils/ChildrenProps';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
type ComposeProvidersProps = ChildrenProps & {
/** Provider components go here */
diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
index d5013e9340e3..aca2a9d06f7a 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -1,10 +1,10 @@
-import React, {useEffect, useCallback, useRef, useMemo} from 'react';
-import {StyleSheet} from 'react-native';
import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import {StyleSheet} from 'react-native';
import _ from 'underscore';
-import RNTextInput from '../RNTextInput';
-import themeColors from '../../styles/themes/default';
-import * as ComposerUtils from '../../libs/ComposerUtils';
+import RNTextInput from '@components/RNTextInput';
+import * as ComposerUtils from '@libs/ComposerUtils';
+import themeColors from '@styles/themes/default';
const propTypes = {
/** Maximum number of lines in the text input */
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index d073ad8287f6..e5dab3756594 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -1,10 +1,10 @@
-import React, {useEffect, useRef, useMemo, useCallback} from 'react';
-import {StyleSheet} from 'react-native';
import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import {StyleSheet} from 'react-native';
import _ from 'underscore';
-import RNTextInput from '../RNTextInput';
-import themeColors from '../../styles/themes/default';
-import * as ComposerUtils from '../../libs/ComposerUtils';
+import RNTextInput from '@components/RNTextInput';
+import * as ComposerUtils from '@libs/ComposerUtils';
+import themeColors from '@styles/themes/default';
const propTypes = {
/** If the input should clear, it actually gets intercepted instead of .clear() */
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index 2872060afba5..02042d86a6e0 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -1,25 +1,25 @@
-import React, {useState, useRef, useEffect, useCallback, useMemo} from 'react';
-import {StyleSheet, View} from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
import ExpensiMark from 'expensify-common/lib/ExpensiMark';
+import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {flushSync} from 'react-dom';
-import RNTextInput from '../RNTextInput';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import themeColors from '../../styles/themes/default';
-import updateIsFullComposerAvailable from '../../libs/ComposerUtils/updateIsFullComposerAvailable';
-import * as ComposerUtils from '../../libs/ComposerUtils';
-import * as Browser from '../../libs/Browser';
-import * as StyleUtils from '../../styles/StyleUtils';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import compose from '../../libs/compose';
-import styles from '../../styles/styles';
-import Text from '../Text';
-import isEnterWhileComposition from '../../libs/KeyboardShortcut/isEnterWhileComposition';
-import CONST from '../../CONST';
-import withNavigation from '../withNavigation';
-import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
+import {StyleSheet, View} from 'react-native';
+import _ from 'underscore';
+import RNTextInput from '@components/RNTextInput';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import withNavigation from '@components/withNavigation';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import * as Browser from '@libs/Browser';
+import compose from '@libs/compose';
+import * as ComposerUtils from '@libs/ComposerUtils';
+import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
+import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
const propTypes = {
/** Maximum number of lines in the text input */
diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index 469efb4f25d9..6142322848d0 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -1,15 +1,15 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import PropTypes from 'prop-types';
-import Header from './Header';
-import styles from '../styles/styles';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
import Button from './Button';
-import useLocalize from '../hooks/useLocalize';
-import useNetwork from '../hooks/useNetwork';
-import Text from './Text';
-import variables from '../styles/variables';
+import Header from './Header';
import Icon from './Icon';
+import Text from './Text';
const propTypes = {
/** Title of the modal */
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index 705a05ec2058..3fe3838c8c81 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -1,9 +1,9 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
+import CONST from '@src/CONST';
+import ConfirmContent from './ConfirmContent';
import Modal from './Modal';
-import CONST from '../CONST';
import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import ConfirmContent from './ConfirmContent';
const propTypes = {
/** Title of the modal */
diff --git a/src/components/ConfirmPopover.js b/src/components/ConfirmPopover.js
index 88df6347f850..83001736b471 100644
--- a/src/components/ConfirmPopover.js
+++ b/src/components/ConfirmPopover.js
@@ -1,8 +1,8 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
+import ConfirmContent from './ConfirmContent';
import Popover from './Popover';
import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import ConfirmContent from './ConfirmContent';
const propTypes = {
/** Title of the modal */
diff --git a/src/components/ConfirmationPage.js b/src/components/ConfirmationPage.js
index 4549d6ca6072..bc154923e926 100644
--- a/src/components/ConfirmationPage.js
+++ b/src/components/ConfirmationPage.js
@@ -1,12 +1,12 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
+import styles from '@styles/styles';
+import Button from './Button';
+import FixedFooter from './FixedFooter';
import Lottie from './Lottie';
import * as LottieAnimations from './LottieAnimations';
import Text from './Text';
-import styles from '../styles/styles';
-import Button from './Button';
-import FixedFooter from './FixedFooter';
const propTypes = {
/** The asset to render */
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 8544de62eeb9..656e419449b3 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -1,21 +1,20 @@
-import React, {useEffect} from 'react';
-import PropTypes from 'prop-types';
-
-import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
import lodashIsNil from 'lodash/isNil';
+import PropTypes from 'prop-types';
+import React, {useEffect} from 'react';
+import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import ONYXKEYS from '../ONYXKEYS';
-import CONST from '../CONST';
-import * as MapboxToken from '../libs/actions/MapboxToken';
-import * as TransactionUtils from '../libs/TransactionUtils';
+import useNetwork from '@hooks/useNetwork';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import styles from '@styles/styles';
+import theme from '@styles/themes/default';
+import * as MapboxToken from '@userActions/MapboxToken';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import DistanceMapView from './DistanceMapView';
import * as Expensicons from './Icon/Expensicons';
-import theme from '../styles/themes/default';
-import styles from '../styles/styles';
-import transactionPropTypes from './transactionPropTypes';
import PendingMapView from './MapView/PendingMapView';
-import useNetwork from '../hooks/useNetwork';
-import DistanceMapView from './DistanceMapView';
+import transactionPropTypes from './transactionPropTypes';
const propTypes = {
/** Transaction that stores the distance request data */
diff --git a/src/components/ConnectBankAccountButton.js b/src/components/ConnectBankAccountButton.js
index f5e0afe1d52e..64d2421c7d37 100644
--- a/src/components/ConnectBankAccountButton.js
+++ b/src/components/ConnectBankAccountButton.js
@@ -1,16 +1,16 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
-import * as ReimbursementAccount from '../libs/actions/ReimbursementAccount';
-import * as Expensicons from './Icon/Expensicons';
-import styles from '../styles/styles';
+import compose from '@libs/compose';
+import Navigation from '@libs/Navigation/Navigation';
+import styles from '@styles/styles';
+import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
import Button from './Button';
-import {withNetwork} from './OnyxProvider';
-import compose from '../libs/compose';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import * as Expensicons from './Icon/Expensicons';
import networkPropTypes from './networkPropTypes';
+import {withNetwork} from './OnyxProvider';
import Text from './Text';
-import Navigation from '../libs/Navigation/Navigation';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
...withLocalizePropTypes,
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index 010e971784cb..80d4855392a4 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -1,14 +1,14 @@
-import React, {forwardRef, useImperativeHandle} from 'react';
import PropTypes from 'prop-types';
-import MenuItem from './MenuItem';
-import Icon from './Icon';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import getButtonState from '../libs/getButtonState';
-import useThrottledButtonState from '../hooks/useThrottledButtonState';
+import React, {forwardRef, useImperativeHandle} from 'react';
+import useThrottledButtonState from '@hooks/useThrottledButtonState';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import getButtonState from '@libs/getButtonState';
+import getContextMenuItemStyles from '@styles/getContextMenuItemStyles';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
-import useWindowDimensions from '../hooks/useWindowDimensions';
-import getContextMenuItemStyles from '../styles/getContextMenuItemStyles';
+import Icon from './Icon';
+import MenuItem from './MenuItem';
const propTypes = {
/** Icon Component */
diff --git a/src/components/CopyTextToClipboard.js b/src/components/CopyTextToClipboard.js
index 6adc45cbdf52..ac396c6cedf4 100644
--- a/src/components/CopyTextToClipboard.js
+++ b/src/components/CopyTextToClipboard.js
@@ -1,8 +1,8 @@
-import React, {useCallback} from 'react';
import PropTypes from 'prop-types';
+import React, {useCallback} from 'react';
+import Clipboard from '@libs/Clipboard';
import * as Expensicons from './Icon/Expensicons';
import PressableWithDelayToggle from './Pressable/PressableWithDelayToggle';
-import Clipboard from '../libs/Clipboard';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
diff --git a/src/components/CountrySelector.js b/src/components/CountrySelector.js
index 3dac127b1963..93a90dcf6be9 100644
--- a/src/components/CountrySelector.js
+++ b/src/components/CountrySelector.js
@@ -1,12 +1,12 @@
-import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
+import React, {useEffect} from 'react';
import {View} from 'react-native';
-import styles from '../styles/styles';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import useLocalize from '../hooks/useLocalize';
-import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import styles from '@styles/styles';
+import ROUTES from '@src/ROUTES';
import FormHelpMessage from './FormHelpMessage';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
const propTypes = {
/** Form error text. e.g when no country is selected */
diff --git a/src/components/CurrencySymbolButton.js b/src/components/CurrencySymbolButton.js
index 446641ab158c..695cb2bc10c8 100644
--- a/src/components/CurrencySymbolButton.js
+++ b/src/components/CurrencySymbolButton.js
@@ -1,11 +1,11 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
import Text from './Text';
-import styles from '../styles/styles';
import Tooltip from './Tooltip';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
-import CONST from '../CONST';
-import useLocalize from '../hooks/useLocalize';
const propTypes = {
/** Currency symbol of selected currency */
diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
index cc305a628820..f2d7a8b71897 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
@@ -1,14 +1,14 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import _ from 'underscore';
+import React from 'react';
import SkeletonViewContentLoader from 'react-content-loader/native';
-import {Circle, Rect} from 'react-native-svg';
import {View} from 'react-native';
-import * as StyleUtils from '../../styles/StyleUtils';
-import CONST from '../../CONST';
-import themeColors from '../../styles/themes/default';
-import variables from '../../styles/variables';
-import styles from '../../styles/styles';
+import {Circle, Rect} from 'react-native-svg';
+import _ from 'underscore';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
const propTypes = {
/** Whether to animate the skeleton view */
diff --git a/src/components/CurrentWalletBalance.js b/src/components/CurrentWalletBalance.js
index 642e6937f1bf..c73c0815a003 100644
--- a/src/components/CurrentWalletBalance.js
+++ b/src/components/CurrentWalletBalance.js
@@ -1,12 +1,12 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {withOnyx} from 'react-native-onyx';
-import styles from '../styles/styles';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import compose from '../libs/compose';
-import ONYXKEYS from '../ONYXKEYS';
+import compose from '@libs/compose';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import styles from '@styles/styles';
+import ONYXKEYS from '@src/ONYXKEYS';
import Text from './Text';
-import * as CurrencyUtils from '../libs/CurrencyUtils';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
/** The user's wallet account */
diff --git a/src/components/CustomDevMenu/index.native.js b/src/components/CustomDevMenu/index.native.js
index 52ca0e43782c..c8d0e1e099d4 100644
--- a/src/components/CustomDevMenu/index.native.js
+++ b/src/components/CustomDevMenu/index.native.js
@@ -1,6 +1,6 @@
import {useEffect} from 'react';
import DevMenu from 'react-native-dev-menu';
-import toggleTestToolsModal from '../../libs/actions/TestTool';
+import toggleTestToolsModal from '@userActions/TestTool';
function CustomDevMenu() {
useEffect(() => {
diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js
index 4848e6e35f59..2ffd763bf088 100644
--- a/src/components/CustomStatusBar/index.js
+++ b/src/components/CustomStatusBar/index.js
@@ -1,7 +1,7 @@
import React, {useEffect} from 'react';
-import StatusBar from '../../libs/StatusBar';
-import Navigation, {navigationRef} from '../../libs/Navigation/Navigation';
-import themeColors from '../../styles/themes/default';
+import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
+import StatusBar from '@libs/StatusBar';
+import themeColors from '@styles/themes/default';
function CustomStatusBar() {
useEffect(() => {
diff --git a/src/components/DatePicker/datepickerPropTypes.js b/src/components/DatePicker/datepickerPropTypes.js
index 8bd5d890c42c..c895d919cd33 100644
--- a/src/components/DatePicker/datepickerPropTypes.js
+++ b/src/components/DatePicker/datepickerPropTypes.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
-import {propTypes as fieldPropTypes, defaultProps as defaultFieldPropTypes} from '../TextInput/baseTextInputPropTypes';
-import CONST from '../../CONST';
+import {defaultProps as defaultFieldPropTypes, propTypes as fieldPropTypes} from '@components/TextInput/baseTextInputPropTypes';
+import CONST from '@src/CONST';
const propTypes = {
...fieldPropTypes,
diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js
index 4c034038305d..002cf5587e44 100644
--- a/src/components/DatePicker/index.android.js
+++ b/src/components/DatePicker/index.android.js
@@ -1,11 +1,11 @@
-import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
-import {Keyboard} from 'react-native';
import RNDatePicker from '@react-native-community/datetimepicker';
import moment from 'moment';
-import TextInput from '../TextInput';
-import CONST from '../../CONST';
-import {propTypes, defaultProps} from './datepickerPropTypes';
-import styles from '../../styles/styles';
+import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
+import {Keyboard} from 'react-native';
+import TextInput from '@components/TextInput';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes} from './datepickerPropTypes';
function DatePicker({value, defaultValue, label, placeholder, errorText, containerStyles, disabled, onBlur, onInputChange, maxDate, minDate}, outerRef) {
const ref = useRef();
diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
index ea53492b34a6..705792b0fad8 100644
--- a/src/components/DatePicker/index.ios.js
+++ b/src/components/DatePicker/index.ios.js
@@ -1,16 +1,16 @@
-import React, {useState, useRef, useCallback, useEffect} from 'react';
-import {Button, View, Keyboard} from 'react-native';
import RNDatePicker from '@react-native-community/datetimepicker';
-import moment from 'moment';
import isFunction from 'lodash/isFunction';
-import TextInput from '../TextInput';
-import Popover from '../Popover';
-import CONST from '../../CONST';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
-import {propTypes, defaultProps} from './datepickerPropTypes';
-import useKeyboardState from '../../hooks/useKeyboardState';
-import useLocalize from '../../hooks/useLocalize';
+import moment from 'moment';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {Button, Keyboard, View} from 'react-native';
+import Popover from '@components/Popover';
+import TextInput from '@components/TextInput';
+import useKeyboardState from '@hooks/useKeyboardState';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes} from './datepickerPropTypes';
function DatePicker({value, defaultValue, innerRef, onInputChange, preferredLocale, minDate, maxDate, label, disabled, onBlur, placeholder, containerStyles, errorText}) {
const [isPickerVisible, setIsPickerVisible] = useState(false);
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
index 163f120b8b98..a5b282b22c73 100644
--- a/src/components/DatePicker/index.js
+++ b/src/components/DatePicker/index.js
@@ -1,10 +1,10 @@
-import React, {useEffect, useRef} from 'react';
import moment from 'moment';
+import React, {useEffect, useRef} from 'react';
import _ from 'underscore';
-import TextInput from '../TextInput';
-import CONST from '../../CONST';
-import * as Browser from '../../libs/Browser';
-import {propTypes, defaultProps} from './datepickerPropTypes';
+import TextInput from '@components/TextInput';
+import * as Browser from '@libs/Browser';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes} from './datepickerPropTypes';
import './styles.css';
function DatePicker({maxDate, minDate, onInputChange, innerRef, label, value, placeholder, errorText, containerStyles, disabled, onBlur}) {
diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
index 61614c7e49e6..671744a3d59c 100644
--- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
+++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
@@ -1,19 +1,19 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import TextLink from '../TextLink';
-import Text from '../Text';
-import Icon from '../Icon';
-import * as Illustrations from '../Icon/Illustrations';
-import * as Expensicons from '../Icon/Expensicons';
-import themeColors from '../../styles/themes/default';
-import styles from '../../styles/styles';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import compose from '../../libs/compose';
-import ONYXKEYS from '../../ONYXKEYS';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import compose from '@libs/compose';
+import Navigation from '@libs/Navigation/Navigation';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
const propTypes = {
openLinkInBrowser: PropTypes.func.isRequired,
diff --git a/src/components/DeeplinkWrapper/index.website.js b/src/components/DeeplinkWrapper/index.website.js
index 0cd7bfd93241..166818e4ae27 100644
--- a/src/components/DeeplinkWrapper/index.website.js
+++ b/src/components/DeeplinkWrapper/index.website.js
@@ -1,15 +1,15 @@
-import PropTypes from 'prop-types';
-import {useRef, useState, useEffect} from 'react';
import Str from 'expensify-common/lib/str';
+import PropTypes from 'prop-types';
+import {useEffect, useRef, useState} from 'react';
import _ from 'underscore';
-import * as Browser from '../../libs/Browser';
-import ROUTES from '../../ROUTES';
-import * as App from '../../libs/actions/App';
-import CONST from '../../CONST';
-import CONFIG from '../../CONFIG';
-import shouldPreventDeeplinkPrompt from '../../libs/Navigation/shouldPreventDeeplinkPrompt';
-import navigationRef from '../../libs/Navigation/navigationRef';
-import Navigation from '../../libs/Navigation/Navigation';
+import * as Browser from '@libs/Browser';
+import Navigation from '@libs/Navigation/Navigation';
+import navigationRef from '@libs/Navigation/navigationRef';
+import shouldPreventDeeplinkPrompt from '@libs/Navigation/shouldPreventDeeplinkPrompt';
+import * as App from '@userActions/App';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
const propTypes = {
/** Children to render. */
diff --git a/src/components/DisplayNames/DisplayNamesTooltipItem.js b/src/components/DisplayNames/DisplayNamesTooltipItem.js
index 16f0f3a6420d..bc4d35777185 100644
--- a/src/components/DisplayNames/DisplayNamesTooltipItem.js
+++ b/src/components/DisplayNames/DisplayNamesTooltipItem.js
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React, {useCallback} from 'react';
-import styles from '../../styles/styles';
-import Text from '../Text';
-import UserDetailsTooltip from '../UserDetailsTooltip';
+import Text from '@components/Text';
+import UserDetailsTooltip from '@components/UserDetailsTooltip';
+import styles from '@styles/styles';
const propTypes = {
index: PropTypes.number,
diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.js b/src/components/DisplayNames/DisplayNamesWithTooltip.js
index 0e8c435f4457..254ad3ff824f 100644
--- a/src/components/DisplayNames/DisplayNamesWithTooltip.js
+++ b/src/components/DisplayNames/DisplayNamesWithTooltip.js
@@ -1,12 +1,12 @@
+import lodashGet from 'lodash/get';
import React, {Fragment, useCallback, useRef} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import lodashGet from 'lodash/get';
-import styles from '../../styles/styles';
-import Text from '../Text';
-import Tooltip from '../Tooltip';
-import DisplayNamesTooltipItem from './DisplayNamesTooltipItem';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import styles from '@styles/styles';
import {defaultProps, propTypes} from './displayNamesPropTypes';
+import DisplayNamesTooltipItem from './DisplayNamesTooltipItem';
function DisplayNamesWithToolTip(props) {
const containerRef = useRef(null);
diff --git a/src/components/DisplayNames/DisplayNamesWithoutTooltip.js b/src/components/DisplayNames/DisplayNamesWithoutTooltip.js
index 66604d09673c..bdc26d4c3f8d 100644
--- a/src/components/DisplayNames/DisplayNamesWithoutTooltip.js
+++ b/src/components/DisplayNames/DisplayNamesWithoutTooltip.js
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
-import styles from '../../styles/styles';
-import Text from '../Text';
+import Text from '@components/Text';
+import styles from '@styles/styles';
const propTypes = {
/** The full title of the DisplayNames component (not split up) */
diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index 197940d80ca6..52ec6fb89de2 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -1,7 +1,7 @@
import React from 'react';
-import DisplayNamesWithToolTip from './DisplayNamesWithTooltip';
-import DisplayNamesWithoutTooltip from './DisplayNamesWithoutTooltip';
import {defaultProps, propTypes} from './displayNamesPropTypes';
+import DisplayNamesWithoutTooltip from './DisplayNamesWithoutTooltip';
+import DisplayNamesWithToolTip from './DisplayNamesWithTooltip';
function DisplayNames(props) {
if (!props.tooltipEnabled) {
diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js
index f1b1d7d0b7b5..e0f9635c0132 100644
--- a/src/components/DisplayNames/index.native.js
+++ b/src/components/DisplayNames/index.native.js
@@ -1,6 +1,6 @@
import React from 'react';
-import {propTypes, defaultProps} from './displayNamesPropTypes';
-import Text from '../Text';
+import Text from '@components/Text';
+import {defaultProps, propTypes} from './displayNamesPropTypes';
// As we don't have to show tooltips of the Native platform so we simply render the full display names list.
function DisplayNames(props) {
diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js
index 98f50b1f682f..9a63ff3a9df5 100644
--- a/src/components/DistanceEReceipt.js
+++ b/src/components/DistanceEReceipt.js
@@ -1,23 +1,23 @@
-import React, {useMemo} from 'react';
-import {View, ScrollView} from 'react-native';
import lodashGet from 'lodash/get';
+import React, {useMemo} from 'react';
+import {ScrollView, View} from 'react-native';
import _ from 'underscore';
-import Text from './Text';
-import styles from '../styles/styles';
-import transactionPropTypes from './transactionPropTypes';
-import * as ReceiptUtils from '../libs/ReceiptUtils';
-import * as ReportUtils from '../libs/ReportUtils';
-import * as CurrencyUtils from '../libs/CurrencyUtils';
-import * as TransactionUtils from '../libs/TransactionUtils';
-import tryResolveUrlFromApiRoot from '../libs/tryResolveUrlFromApiRoot';
-import ThumbnailImage from './ThumbnailImage';
-import useLocalize from '../hooks/useLocalize';
+import EReceiptBackground from '@assets/images/eReceipt_background.svg';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as ReceiptUtils from '@libs/ReceiptUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
import Icon from './Icon';
-import themeColors from '../styles/themes/default';
import * as Expensicons from './Icon/Expensicons';
-import EReceiptBackground from '../../assets/images/eReceipt_background.svg';
-import useNetwork from '../hooks/useNetwork';
import PendingMapView from './MapView/PendingMapView';
+import Text from './Text';
+import ThumbnailImage from './ThumbnailImage';
+import transactionPropTypes from './transactionPropTypes';
const propTypes = {
/** The transaction for the distance request */
diff --git a/src/components/DistanceMapView/index.android.js b/src/components/DistanceMapView/index.android.js
index ea72fb4de299..358b2f483a2b 100644
--- a/src/components/DistanceMapView/index.android.js
+++ b/src/components/DistanceMapView/index.android.js
@@ -1,13 +1,13 @@
import React, {useState} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import BlockingView from '../BlockingViews/BlockingView';
-import MapView from '../MapView';
-import styles from '../../styles/styles';
-import useNetwork from '../../hooks/useNetwork';
-import useLocalize from '../../hooks/useLocalize';
-import * as Expensicons from '../Icon/Expensicons';
-import * as StyleUtils from '../../styles/StyleUtils';
+import BlockingView from '@components/BlockingViews/BlockingView';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MapView from '@components/MapView';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
import * as distanceMapViewPropTypes from './distanceMapViewPropTypes';
function DistanceMapView(props) {
diff --git a/src/components/DistanceMapView/index.js b/src/components/DistanceMapView/index.js
index 24bdf99382d1..49f47122dd4a 100644
--- a/src/components/DistanceMapView/index.js
+++ b/src/components/DistanceMapView/index.js
@@ -1,6 +1,6 @@
import React from 'react';
import _ from 'underscore';
-import MapView from '../MapView';
+import MapView from '@components/MapView';
import * as distanceMapViewPropTypes from './distanceMapViewPropTypes';
function DistanceMapView(props) {
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js
index eaa02968c388..e476b2fa6d34 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.js
+++ b/src/components/DistanceRequest/DistanceRequestFooter.js
@@ -1,22 +1,22 @@
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
import lodashIsNil from 'lodash/isNil';
import PropTypes from 'prop-types';
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import CONST from '../../CONST';
-import ONYXKEYS from '../../ONYXKEYS';
-import styles from '../../styles/styles';
-import useNetwork from '../../hooks/useNetwork';
-import useLocalize from '../../hooks/useLocalize';
-import theme from '../../styles/themes/default';
-import * as TransactionUtils from '../../libs/TransactionUtils';
-import Button from '../Button';
-import DistanceMapView from '../DistanceMapView';
-import * as Expensicons from '../Icon/Expensicons';
-import PendingMapView from '../MapView/PendingMapView';
-import transactionPropTypes from '../transactionPropTypes';
+import Button from '@components/Button';
+import DistanceMapView from '@components/DistanceMapView';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PendingMapView from '@components/MapView/PendingMapView';
+import transactionPropTypes from '@components/transactionPropTypes';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import styles from '@styles/styles';
+import theme from '@styles/themes/default';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
const MAX_WAYPOINTS = 25;
diff --git a/src/components/DistanceRequest/DistanceRequestRenderItem.js b/src/components/DistanceRequest/DistanceRequestRenderItem.js
index 0e54635e82cc..0ee45febb21a 100644
--- a/src/components/DistanceRequest/DistanceRequestRenderItem.js
+++ b/src/components/DistanceRequest/DistanceRequestRenderItem.js
@@ -1,11 +1,11 @@
-import React from 'react';
import lodashGet from 'lodash/get';
-import _ from 'underscore';
import PropTypes from 'prop-types';
-import * as Expensicons from '../Icon/Expensicons';
-import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
-import theme from '../../styles/themes/default';
-import useLocalize from '../../hooks/useLocalize';
+import React from 'react';
+import _ from 'underscore';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import useLocalize from '@hooks/useLocalize';
+import theme from '@styles/themes/default';
const propTypes = {
/** The waypoints for the distance request */
diff --git a/src/components/DistanceRequest/index.js b/src/components/DistanceRequest/index.js
index bd35678273ec..3a41d52eb7f4 100644
--- a/src/components/DistanceRequest/index.js
+++ b/src/components/DistanceRequest/index.js
@@ -1,32 +1,32 @@
-import React, {useCallback, useEffect, useMemo, useState, useRef} from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import ROUTES from '../../ROUTES';
-import ONYXKEYS from '../../ONYXKEYS';
-import styles from '../../styles/styles';
-import variables from '../../styles/variables';
-import * as MapboxToken from '../../libs/actions/MapboxToken';
-import useNetwork from '../../hooks/useNetwork';
-import useLocalize from '../../hooks/useLocalize';
-import Navigation from '../../libs/Navigation/Navigation';
-import reportPropTypes from '../../pages/reportPropTypes';
-import usePrevious from '../../hooks/usePrevious';
-import * as Transaction from '../../libs/actions/Transaction';
-import * as TransactionUtils from '../../libs/TransactionUtils';
-import * as IOUUtils from '../../libs/IOUUtils';
-import * as ErrorUtils from '../../libs/ErrorUtils';
-import Button from '../Button';
-import DraggableList from '../DraggableList';
-import transactionPropTypes from '../transactionPropTypes';
-import ScreenWrapper from '../ScreenWrapper';
-import FullPageNotFoundView from '../BlockingViews/FullPageNotFoundView';
-import HeaderWithBackButton from '../HeaderWithBackButton';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import Button from '@components/Button';
+import DotIndicatorMessage from '@components/DotIndicatorMessage';
+import DraggableList from '@components/DraggableList';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import transactionPropTypes from '@components/transactionPropTypes';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import usePrevious from '@hooks/usePrevious';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import * as IOUUtils from '@libs/IOUUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
+import * as MapboxToken from '@userActions/MapboxToken';
+import * as Transaction from '@userActions/Transaction';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import DistanceRequestFooter from './DistanceRequestFooter';
import DistanceRequestRenderItem from './DistanceRequestRenderItem';
-import DotIndicatorMessage from '../DotIndicatorMessage';
const propTypes = {
/** The transactionID of this request */
diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.js
index fc4d74339d6e..26e42c0b9ec7 100644
--- a/src/components/DotIndicatorMessage.js
+++ b/src/components/DotIndicatorMessage.js
@@ -1,14 +1,14 @@
-import React from 'react';
-import _ from 'underscore';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
-import styles from '../styles/styles';
-import stylePropTypes from '../styles/stylePropTypes';
+import _ from 'underscore';
+import * as Localize from '@libs/Localize';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
-import themeColors from '../styles/themes/default';
import Text from './Text';
-import * as Localize from '../libs/Localize';
const propTypes = {
/**
diff --git a/src/components/DragAndDrop/Consumer/index.js b/src/components/DragAndDrop/Consumer/index.js
index cf21afe627f4..5c9f16bc0bed 100644
--- a/src/components/DragAndDrop/Consumer/index.js
+++ b/src/components/DragAndDrop/Consumer/index.js
@@ -1,7 +1,7 @@
-import React, {useContext, useEffect} from 'react';
import {Portal} from '@gorhom/portal';
+import React, {useContext, useEffect} from 'react';
+import {DragAndDropContext} from '@components/DragAndDrop/Provider';
import dragAndDropConsumerPropTypes from './dragAndDropConsumerPropTypes';
-import {DragAndDropContext} from '../Provider';
function DragAndDropConsumer({children, onDrop}) {
const {isDraggingOver, setOnDropHandler, dropZoneID} = useContext(DragAndDropContext);
diff --git a/src/components/DragAndDrop/NoDropZone/index.js b/src/components/DragAndDrop/NoDropZone/index.js
index 5573136a3bc7..ac5b759dee63 100644
--- a/src/components/DragAndDrop/NoDropZone/index.js
+++ b/src/components/DragAndDrop/NoDropZone/index.js
@@ -1,8 +1,8 @@
+import PropTypes from 'prop-types';
import React, {useRef} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../../../styles/styles';
-import useDragAndDrop from '../../../hooks/useDragAndDrop';
+import useDragAndDrop from '@hooks/useDragAndDrop';
+import styles from '@styles/styles';
const propTypes = {
/** Content */
diff --git a/src/components/DragAndDrop/Provider/index.js b/src/components/DragAndDrop/Provider/index.js
index f76bf13c99fd..c31b83a7d605 100644
--- a/src/components/DragAndDrop/Provider/index.js
+++ b/src/components/DragAndDrop/Provider/index.js
@@ -1,11 +1,11 @@
-import _ from 'underscore';
-import React, {useRef, useCallback, useEffect, useMemo} from 'react';
-import {View} from 'react-native';
import {PortalHost} from '@gorhom/portal';
import Str from 'expensify-common/lib/str';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import useDragAndDrop from '@hooks/useDragAndDrop';
+import styles from '@styles/styles';
import dragAndDropProviderPropTypes from './dragAndDropProviderPropTypes';
-import styles from '../../../styles/styles';
-import useDragAndDrop from '../../../hooks/useDragAndDrop';
const DragAndDropContext = React.createContext({});
diff --git a/src/components/DraggableList/index.native.tsx b/src/components/DraggableList/index.native.tsx
index e3b7558c1e21..d7e42a5f5525 100644
--- a/src/components/DraggableList/index.native.tsx
+++ b/src/components/DraggableList/index.native.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import DraggableFlatList from 'react-native-draggable-flatlist';
import {FlatList} from 'react-native-gesture-handler';
+import styles from '@styles/styles';
import type {DraggableListProps} from './types';
-import styles from '../../styles/styles';
function DraggableList({renderClone, shouldUsePortal, ...viewProps}: DraggableListProps, ref: React.ForwardedRef>) {
return (
diff --git a/src/components/DraggableList/index.tsx b/src/components/DraggableList/index.tsx
index ea9ac548e850..287b549d6d0a 100644
--- a/src/components/DraggableList/index.tsx
+++ b/src/components/DraggableList/index.tsx
@@ -1,9 +1,9 @@
import React, {useCallback} from 'react';
-import {DragDropContext, Droppable, Draggable, type OnDragEndResponder} from 'react-beautiful-dnd';
+import {DragDropContext, Draggable, Droppable, type OnDragEndResponder} from 'react-beautiful-dnd';
import {ScrollView} from 'react-native';
-import useDraggableInPortal from './useDraggableInPortal';
+import styles from '@styles/styles';
import type {DraggableListProps} from './types';
-import styles from '../../styles/styles';
+import useDraggableInPortal from './useDraggableInPortal';
type ReorderParams = {
list: T[];
diff --git a/src/components/DraggableList/useDraggableInPortal.ts b/src/components/DraggableList/useDraggableInPortal.ts
index 6b7f958d6a3e..3b4610ce1e5e 100644
--- a/src/components/DraggableList/useDraggableInPortal.ts
+++ b/src/components/DraggableList/useDraggableInPortal.ts
@@ -1,5 +1,5 @@
-import type {DraggableChildrenFn} from 'react-beautiful-dnd';
import {useEffect, useRef} from 'react';
+import type {DraggableChildrenFn} from 'react-beautiful-dnd';
import {createPortal} from 'react-dom';
type DraggableInPortal = {
diff --git a/src/components/EReceipt.js b/src/components/EReceipt.js
index 84daabb96c9b..7c186216a1fa 100644
--- a/src/components/EReceipt.js
+++ b/src/components/EReceipt.js
@@ -1,21 +1,21 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
-import ONYXKEYS from '../ONYXKEYS';
-import * as StyleUtils from '../styles/StyleUtils';
-import transactionPropTypes from './transactionPropTypes';
-import styles from '../styles/styles';
-import * as Expensicons from './Icon/Expensicons';
+import useLocalize from '@hooks/useLocalize';
+import * as CardUtils from '@libs/CardUtils';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import EReceiptThumbnail from './EReceiptThumbnail';
import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
import Text from './Text';
-import * as ReportUtils from '../libs/ReportUtils';
-import * as CurrencyUtils from '../libs/CurrencyUtils';
-import * as CardUtils from '../libs/CardUtils';
-import variables from '../styles/variables';
-import useLocalize from '../hooks/useLocalize';
-import EReceiptThumbnail from './EReceiptThumbnail';
-import CONST from '../CONST';
+import transactionPropTypes from './transactionPropTypes';
const propTypes = {
/* TransactionID of the transaction this EReceipt corresponds to */
diff --git a/src/components/EReceiptThumbnail.js b/src/components/EReceiptThumbnail.js
index f1bb5b025e2f..fc69601983f8 100644
--- a/src/components/EReceiptThumbnail.js
+++ b/src/components/EReceiptThumbnail.js
@@ -1,19 +1,19 @@
+import PropTypes from 'prop-types';
import React, {useState} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
-import ONYXKEYS from '../ONYXKEYS';
-import * as StyleUtils from '../styles/StyleUtils';
-import transactionPropTypes from './transactionPropTypes';
-import styles from '../styles/styles';
-import * as Expensicons from './Icon/Expensicons';
-import * as MCCIcons from './Icon/MCCIcons';
+import * as ReportUtils from '@libs/ReportUtils';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import Icon from './Icon';
-import * as ReportUtils from '../libs/ReportUtils';
-import variables from '../styles/variables';
import * as eReceiptBGs from './Icon/EReceiptBGs';
+import * as Expensicons from './Icon/Expensicons';
+import * as MCCIcons from './Icon/MCCIcons';
import Image from './Image';
-import CONST from '../CONST';
+import transactionPropTypes from './transactionPropTypes';
const propTypes = {
/* TransactionID of the transaction this EReceipt corresponds to */
diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js
index 00fee688f986..bab1e344da40 100644
--- a/src/components/EmojiPicker/CategoryShortcutBar.js
+++ b/src/components/EmojiPicker/CategoryShortcutBar.js
@@ -1,8 +1,8 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import styles from '../../styles/styles';
+import styles from '@styles/styles';
import CategoryShortcutButton from './CategoryShortcutButton';
const propTypes = {
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index a7658ae0542d..132da7c540c2 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -1,15 +1,15 @@
-import React, {useState} from 'react';
import PropTypes from 'prop-types';
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-import useLocalize from '../../hooks/useLocalize';
-import variables from '../../styles/variables';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
-import getButtonState from '../../libs/getButtonState';
-import themeColors from '../../styles/themes/default';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import CONST from '../../CONST';
+import React, {useState} from 'react';
+import Icon from '@components/Icon';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Tooltip from '@components/Tooltip';
+import useLocalize from '@hooks/useLocalize';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
const propTypes = {
/** The emoji code of the category header */
diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index 5c2f65e24b01..d0ba8f80f94b 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -1,15 +1,15 @@
-import React, {useState, useEffect, useRef, forwardRef, useImperativeHandle} from 'react';
+import PropTypes from 'prop-types';
+import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
import {Dimensions} from 'react-native';
import _ from 'underscore';
-import PropTypes from 'prop-types';
+import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
+import withViewportOffsetTop from '@components/withViewportOffsetTop';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import calculateAnchorPosition from '@libs/calculateAnchorPosition';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
import EmojiPickerMenu from './EmojiPickerMenu';
-import CONST from '../../CONST';
-import styles from '../../styles/styles';
-import PopoverWithMeasuredContent from '../PopoverWithMeasuredContent';
-import withViewportOffsetTop from '../withViewportOffsetTop';
-import * as StyleUtils from '../../styles/StyleUtils';
-import calculateAnchorPosition from '../../libs/calculateAnchorPosition';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
const DEFAULT_ANCHOR_ORIGIN = {
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index 0d1426cbf987..0989e4df88c6 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -1,14 +1,14 @@
-import React, {useEffect, useRef} from 'react';
import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
-import getButtonState from '../../libs/getButtonState';
-import * as Expensicons from '../Icon/Expensicons';
-import Tooltip from '../Tooltip/PopoverAnchorTooltip';
-import Icon from '../Icon';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import React, {useEffect, useRef} from 'react';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
const propTypes = {
/** Flag to disable the emoji picker button */
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
index a1a22d8c50dd..8a5a66444fda 100644
--- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
+++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -1,17 +1,17 @@
-import React, {useRef, useEffect} from 'react';
import PropTypes from 'prop-types';
+import React, {useEffect, useRef} from 'react';
import {View} from 'react-native';
-import styles from '../../styles/styles';
-import CONST from '../../CONST';
-import * as StyleUtils from '../../styles/StyleUtils';
-import getButtonState from '../../libs/getButtonState';
-import * as Expensicons from '../Icon/Expensicons';
-import Tooltip from '../Tooltip';
-import Text from '../Text';
-import Icon from '../Icon';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
+import CONST from '@src/CONST';
const propTypes = {
/** Flag to disable the emoji picker button */
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 38a47c9b2914..7dc53e958849 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -1,28 +1,28 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {View, FlatList} from 'react-native';
+import {FlatList, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
import _ from 'underscore';
-import lodashGet from 'lodash/get';
-import CONST from '../../../CONST';
-import ONYXKEYS from '../../../ONYXKEYS';
-import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import emojiAssets from '../../../../assets/emojis';
-import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
-import Text from '../../Text';
-import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
-import compose from '../../../libs/compose';
-import getOperatingSystem from '../../../libs/getOperatingSystem';
-import * as User from '../../../libs/actions/User';
-import EmojiSkinToneList from '../EmojiSkinToneList';
-import * as EmojiUtils from '../../../libs/EmojiUtils';
-import * as Browser from '../../../libs/Browser';
-import CategoryShortcutBar from '../CategoryShortcutBar';
-import TextInput from '../../TextInput';
-import isEnterWhileComposition from '../../../libs/KeyboardShortcut/isEnterWhileComposition';
-import canFocusInputOnScreenFocus from '../../../libs/canFocusInputOnScreenFocus';
-import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import emojiAssets from '@assets/emojis';
+import CategoryShortcutBar from '@components/EmojiPicker/CategoryShortcutBar';
+import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem';
+import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
+import Text from '@components/Text';
+import TextInput from '@components/TextInput';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as Browser from '@libs/Browser';
+import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
+import compose from '@libs/compose';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import getOperatingSystem from '@libs/getOperatingSystem';
+import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import * as User from '@userActions/User';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
const propTypes = {
/** Function to add the selected emoji to the main compose text input */
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
index b54b67294d40..140dd8f2625c 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -1,25 +1,25 @@
-import React, {useState, useMemo, useEffect} from 'react';
+import PropTypes from 'prop-types';
+import React, {useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
import Animated, {runOnUI, scrollTo, useAnimatedRef} from 'react-native-reanimated';
-import useWindowDimensions from '../../../hooks/useWindowDimensions';
-import compose from '../../../libs/compose';
-import CONST from '../../../CONST';
-import ONYXKEYS from '../../../ONYXKEYS';
-import styles from '../../../styles/styles';
-import emojis from '../../../../assets/emojis';
-import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
-import Text from '../../Text';
-import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
-import EmojiSkinToneList from '../EmojiSkinToneList';
-import * as EmojiUtils from '../../../libs/EmojiUtils';
-import * as User from '../../../libs/actions/User';
-import TextInput from '../../TextInput';
-import CategoryShortcutBar from '../CategoryShortcutBar';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import useSingleExecution from '../../../hooks/useSingleExecution';
+import _ from 'underscore';
+import emojis from '@assets/emojis';
+import CategoryShortcutBar from '@components/EmojiPicker/CategoryShortcutBar';
+import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem';
+import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
+import Text from '@components/Text';
+import TextInput from '@components/TextInput';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useSingleExecution from '@hooks/useSingleExecution';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import compose from '@libs/compose';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import * as User from '@userActions/User';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
const propTypes = {
/** Function to add the selected emoji to the main compose text input */
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
index 1b3e457f7525..90f7f966172f 100644
--- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
@@ -1,12 +1,12 @@
-import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
-import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import getButtonState from '../../../libs/getButtonState';
-import Text from '../../Text';
-import PressableWithoutFeedback from '../../Pressable/PressableWithoutFeedback';
-import CONST from '../../../CONST';
-import * as Browser from '../../../libs/Browser';
+import React, {PureComponent} from 'react';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Text from '@components/Text';
+import * as Browser from '@libs/Browser';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
const propTypes = {
/** The unicode that is used to display the emoji */
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js
index 54416a4a2518..099adf620af7 100644
--- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js
@@ -1,11 +1,11 @@
-import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
-import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import getButtonState from '../../../libs/getButtonState';
-import Text from '../../Text';
-import PressableWithoutFeedback from '../../Pressable/PressableWithoutFeedback';
-import CONST from '../../../CONST';
+import React, {PureComponent} from 'react';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Text from '@components/Text';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
const propTypes = {
/** The unicode that is used to display the emoji */
diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js
index 0c876910e746..edb8bf49e77f 100644
--- a/src/components/EmojiPicker/EmojiSkinToneList.js
+++ b/src/components/EmojiPicker/EmojiSkinToneList.js
@@ -1,15 +1,15 @@
-import _ from 'underscore';
-import React, {useState, useCallback} from 'react';
-import {View} from 'react-native';
import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import * as Emojis from '../../../assets/emojis';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import Text from '../Text';
+import React, {useCallback, useState} from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import * as Emojis from '@assets/emojis';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import EmojiPickerMenuItem from './EmojiPickerMenuItem';
import getSkinToneEmojiFromIndex from './getSkinToneEmojiFromIndex';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import CONST from '../../CONST';
const propTypes = {
/** Stores user's preferred skin tone */
diff --git a/src/components/EmojiPicker/getSkinToneEmojiFromIndex.js b/src/components/EmojiPicker/getSkinToneEmojiFromIndex.js
index 1b0731876f4e..48f9e2177a73 100644
--- a/src/components/EmojiPicker/getSkinToneEmojiFromIndex.js
+++ b/src/components/EmojiPicker/getSkinToneEmojiFromIndex.js
@@ -1,5 +1,5 @@
import _ from 'underscore';
-import * as Emojis from '../../../assets/emojis';
+import * as Emojis from '@assets/emojis';
/**
* Fetch the emoji code of selected skinTone
diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js
index d7f7a8d6091a..2a15cfba995e 100644
--- a/src/components/EmojiSuggestions.js
+++ b/src/components/EmojiSuggestions.js
@@ -1,13 +1,13 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import _ from 'underscore';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import * as EmojiUtils from '../libs/EmojiUtils';
-import Text from './Text';
-import getStyledTextArray from '../libs/GetStyledTextArray';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import getStyledTextArray from '@libs/GetStyledTextArray';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
import AutoCompleteSuggestions from './AutoCompleteSuggestions';
+import Text from './Text';
const propTypes = {
/** The index of the highlighted emoji */
diff --git a/src/components/EnvironmentBadge.js b/src/components/EnvironmentBadge.js
index a83fcedfabe4..a9236fc50abe 100644
--- a/src/components/EnvironmentBadge.js
+++ b/src/components/EnvironmentBadge.js
@@ -1,10 +1,10 @@
import React from 'react';
-import CONST from '../CONST';
-import Badge from './Badge';
-import styles from '../styles/styles';
-import * as Environment from '../libs/Environment/Environment';
+import useEnvironment from '@hooks/useEnvironment';
+import * as Environment from '@libs/Environment/Environment';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import pkg from '../../package.json';
-import useEnvironment from '../hooks/useEnvironment';
+import Badge from './Badge';
const ENVIRONMENT_SHORT_FORM = {
[CONST.ENVIRONMENT.DEV]: 'DEV',
diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.js b/src/components/ErrorBoundary/BaseErrorBoundary.js
index d626442e81dd..b532ca23b61b 100644
--- a/src/components/ErrorBoundary/BaseErrorBoundary.js
+++ b/src/components/ErrorBoundary/BaseErrorBoundary.js
@@ -1,8 +1,8 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {ErrorBoundary} from 'react-error-boundary';
-import BootSplash from '../../libs/BootSplash';
-import GenericErrorPage from '../../pages/ErrorPage/GenericErrorPage';
+import BootSplash from '@libs/BootSplash';
+import GenericErrorPage from '@pages/ErrorPage/GenericErrorPage';
const propTypes = {
/* A message posted to `logError` (along with error data) when this component intercepts an error */
diff --git a/src/components/ErrorBoundary/index.js b/src/components/ErrorBoundary/index.js
index 4a113fa040dd..c5498eb6f080 100644
--- a/src/components/ErrorBoundary/index.js
+++ b/src/components/ErrorBoundary/index.js
@@ -1,5 +1,5 @@
+import Log from '@libs/Log';
import BaseErrorBoundary from './BaseErrorBoundary';
-import Log from '../../libs/Log';
BaseErrorBoundary.defaultProps.logError = (errorMessage, error, errorInfo) => {
// Log the error to the server
diff --git a/src/components/ErrorBoundary/index.native.js b/src/components/ErrorBoundary/index.native.js
index 68815acf670f..a7f6a68bb01f 100644
--- a/src/components/ErrorBoundary/index.native.js
+++ b/src/components/ErrorBoundary/index.native.js
@@ -1,7 +1,6 @@
import crashlytics from '@react-native-firebase/crashlytics';
-
+import Log from '@libs/Log';
import BaseErrorBoundary from './BaseErrorBoundary';
-import Log from '../../libs/Log';
BaseErrorBoundary.defaultProps.logError = (errorMessage, error, errorInfo) => {
// Log the error to the server
diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js
index 9c785cec0395..43589be566ff 100644
--- a/src/components/ExceededCommentLength.js
+++ b/src/components/ExceededCommentLength.js
@@ -1,13 +1,13 @@
-import React, {useEffect, useState, useMemo} from 'react';
-import PropTypes from 'prop-types';
import {debounce} from 'lodash';
+import PropTypes from 'prop-types';
+import React, {useEffect, useMemo, useState} from 'react';
import {withOnyx} from 'react-native-onyx';
-import CONST from '../CONST';
-import * as ReportUtils from '../libs/ReportUtils';
-import useLocalize from '../hooks/useLocalize';
+import useLocalize from '@hooks/useLocalize';
+import * as ReportUtils from '@libs/ReportUtils';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import Text from './Text';
-import styles from '../styles/styles';
-import ONYXKEYS from '../ONYXKEYS';
const propTypes = {
/** Report ID to get the comment from (used in withOnyx) */
diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js
index dde792e87e22..1fe6aee91e67 100644
--- a/src/components/ExpensifyWordmark.js
+++ b/src/components/ExpensifyWordmark.js
@@ -1,18 +1,18 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import _ from 'underscore';
-import ProductionLogo from '../../assets/images/expensify-wordmark.svg';
-import DevLogo from '../../assets/images/expensify-logo--dev.svg';
-import StagingLogo from '../../assets/images/expensify-logo--staging.svg';
-import AdHocLogo from '../../assets/images/expensify-logo--adhoc.svg';
-import CONST from '../CONST';
+import AdHocLogo from '@assets/images/expensify-logo--adhoc.svg';
+import DevLogo from '@assets/images/expensify-logo--dev.svg';
+import StagingLogo from '@assets/images/expensify-logo--staging.svg';
+import ProductionLogo from '@assets/images/expensify-wordmark.svg';
+import useEnvironment from '@hooks/useEnvironment';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import themeColors from '../styles/themes/default';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import variables from '../styles/variables';
-import useEnvironment from '../hooks/useEnvironment';
const propTypes = {
/** Additional styles to add to the component */
diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js
index 3e468abea8cc..94bb309edc84 100644
--- a/src/components/FeatureList.js
+++ b/src/components/FeatureList.js
@@ -1,11 +1,11 @@
-import _ from 'underscore';
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import menuItemPropTypes from './menuItemPropTypes';
+import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
import MenuItem from './MenuItem';
-import styles from '../styles/styles';
-import useLocalize from '../hooks/useLocalize';
+import menuItemPropTypes from './menuItemPropTypes';
import Text from './Text';
const propTypes = {
diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx
index c44b9bf3d0e0..afda41f16d06 100644
--- a/src/components/FixedFooter.tsx
+++ b/src/components/FixedFooter.tsx
@@ -1,6 +1,6 @@
import React, {ReactNode} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
-import styles from '../styles/styles';
+import styles from '@styles/styles';
type FixedFooterProps = {
/** Children to wrap in FixedFooter. */
diff --git a/src/components/FlatList/index.android.js b/src/components/FlatList/index.android.js
index d047124da914..fdb3a24667aa 100644
--- a/src/components/FlatList/index.android.js
+++ b/src/components/FlatList/index.android.js
@@ -1,7 +1,7 @@
+import {useFocusEffect} from '@react-navigation/native';
+import PropTypes from 'prop-types';
import React, {forwardRef, useCallback, useState} from 'react';
import {FlatList} from 'react-native';
-import PropTypes from 'prop-types';
-import {useFocusEffect} from '@react-navigation/native';
const propTypes = {
/** Same as for FlatList */
diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js
index 947acf801f19..22f88cc53f59 100644
--- a/src/components/FloatingActionButton.js
+++ b/src/components/FloatingActionButton.js
@@ -1,15 +1,15 @@
+import PropTypes from 'prop-types';
import React, {PureComponent} from 'react';
import {Animated, Easing, View} from 'react-native';
-import PropTypes from 'prop-types';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import themeColors from '../styles/themes/default';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
import Tooltip from './Tooltip/PopoverAnchorTooltip';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import variables from '../styles/variables';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);
AnimatedIcon.displayName = 'AnimatedIcon';
diff --git a/src/components/Form.js b/src/components/Form.js
index 436af78a2b2c..4d3acf754715 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -1,23 +1,23 @@
-import React, {useState, useEffect, useCallback, useMemo, useRef} from 'react';
import lodashGet from 'lodash/get';
-import {Keyboard, ScrollView, StyleSheet} from 'react-native';
import PropTypes from 'prop-types';
-import _ from 'underscore';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {Keyboard, ScrollView, StyleSheet} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import compose from '../libs/compose';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import * as FormActions from '../libs/actions/FormActions';
-import * as ErrorUtils from '../libs/ErrorUtils';
-import styles from '../styles/styles';
-import CONST from '../CONST';
+import _ from 'underscore';
+import compose from '@libs/compose';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import Visibility from '@libs/Visibility';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import * as FormActions from '@userActions/FormActions';
+import CONST from '@src/CONST';
import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
import FormSubmit from './FormSubmit';
+import networkPropTypes from './networkPropTypes';
+import {withNetwork} from './OnyxProvider';
import SafeAreaConsumer from './SafeAreaConsumer';
import ScrollViewWithContext from './ScrollViewWithContext';
-import stylePropTypes from '../styles/stylePropTypes';
-import {withNetwork} from './OnyxProvider';
-import networkPropTypes from './networkPropTypes';
-import Visibility from '../libs/Visibility';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
/** A unique Onyx key identifying the form */
diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js
index ce402976d097..92baa9727832 100644
--- a/src/components/Form/FormProvider.js
+++ b/src/components/Form/FormProvider.js
@@ -1,17 +1,17 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React, {createRef, useCallback, useMemo, useRef, useState} from 'react';
-import _ from 'underscore';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import Visibility from '../../libs/Visibility';
-import * as FormActions from '../../libs/actions/FormActions';
+import _ from 'underscore';
+import networkPropTypes from '@components/networkPropTypes';
+import {withNetwork} from '@components/OnyxProvider';
+import compose from '@libs/compose';
+import Visibility from '@libs/Visibility';
+import stylePropTypes from '@styles/stylePropTypes';
+import * as FormActions from '@userActions/FormActions';
+import CONST from '@src/CONST';
import FormContext from './FormContext';
import FormWrapper from './FormWrapper';
-import compose from '../../libs/compose';
-import {withNetwork} from '../OnyxProvider';
-import stylePropTypes from '../../styles/stylePropTypes';
-import networkPropTypes from '../networkPropTypes';
-import CONST from '../../CONST';
const propTypes = {
/** A unique Onyx key identifying the form */
@@ -229,15 +229,19 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
.first()
.value() || '';
- const value = !_.isUndefined(inputValues[`${inputID}ToDisplay`]) ? inputValues[`${inputID}ToDisplay`] : inputValues[inputID];
-
return {
...propsToParse,
- ref: newRef,
+ ref:
+ typeof propsToParse.ref === 'function'
+ ? (node) => {
+ propsToParse.ref(node);
+ newRef.current = node;
+ }
+ : newRef,
inputID,
key: propsToParse.key || inputID,
errorText: errors[inputID] || fieldErrorMessage,
- value,
+ value: inputValues[inputID],
// As the text input is controlled, we never set the defaultValue prop
// as this is already happening by the value prop.
defaultValue: undefined,
@@ -277,19 +281,13 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
propsToParse.onBlur(event);
}
},
- onInputChange: (inputValue, key) => {
+ onInputChange: (value, key) => {
const inputKey = key || inputID;
setInputValues((prevState) => {
- const newState = _.isFunction(propsToParse.valueParser)
- ? {
- ...prevState,
- [inputKey]: propsToParse.valueParser(inputValue),
- [`${inputKey}ToDisplay`]: inputValue,
- }
- : {
- ...prevState,
- [inputKey]: inputValue,
- };
+ const newState = {
+ ...prevState,
+ [inputKey]: value,
+ };
if (shouldValidateOnChange) {
onValidate(newState);
@@ -298,11 +296,11 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
});
if (propsToParse.shouldSaveDraft) {
- FormActions.setDraftValues(propsToParse.formID, {[inputKey]: inputValue});
+ FormActions.setDraftValues(propsToParse.formID, {[inputKey]: value});
}
if (_.isFunction(propsToParse.onValueChange)) {
- propsToParse.onValueChange(inputValue, inputKey);
+ propsToParse.onValueChange(value, inputKey);
}
},
};
diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js
index 82e70b68b3f0..55abcc1fc923 100644
--- a/src/components/Form/FormWrapper.js
+++ b/src/components/Form/FormWrapper.js
@@ -1,16 +1,15 @@
+import PropTypes from 'prop-types';
import React, {useCallback, useMemo, useRef} from 'react';
import {Keyboard, ScrollView, StyleSheet} from 'react-native';
-import _ from 'underscore';
-import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
-import * as ErrorUtils from '../../libs/ErrorUtils';
-import FormSubmit from '../FormSubmit';
-import FormAlertWithSubmitButton from '../FormAlertWithSubmitButton';
-import styles from '../../styles/styles';
-import SafeAreaConsumer from '../SafeAreaConsumer';
-import ScrollViewWithContext from '../ScrollViewWithContext';
-
-import stylePropTypes from '../../styles/stylePropTypes';
+import _ from 'underscore';
+import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
+import FormSubmit from '@components/FormSubmit';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import ScrollViewWithContext from '@components/ScrollViewWithContext';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
import errorsPropType from './errorsPropType';
const propTypes = {
diff --git a/src/components/Form/InputWrapper.js b/src/components/Form/InputWrapper.js
index 74a741239a3f..99237fd8db43 100644
--- a/src/components/Form/InputWrapper.js
+++ b/src/components/Form/InputWrapper.js
@@ -1,5 +1,5 @@
-import React, {forwardRef, useContext} from 'react';
import PropTypes from 'prop-types';
+import React, {forwardRef, useContext} from 'react';
import FormContext from './FormContext';
const propTypes = {
@@ -7,13 +7,11 @@ const propTypes = {
inputID: PropTypes.string.isRequired,
valueType: PropTypes.string,
forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
- valueParser: PropTypes.func,
};
const defaultProps = {
forwardedRef: undefined,
valueType: 'string',
- valueParser: undefined,
};
function InputWrapper(props) {
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 33d188719d11..1ffbf0d667e2 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -1,8 +1,8 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import styles from '../styles/styles';
+import styles from '@styles/styles';
import Button from './Button';
import FormAlertWrapper from './FormAlertWrapper';
diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index 67e031ce6ab6..87304ee5dc3e 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -1,16 +1,16 @@
-import _ from 'underscore';
-import {View} from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import compose from '@libs/compose';
+import styles from '@styles/styles';
+import FormHelpMessage from './FormHelpMessage';
+import networkPropTypes from './networkPropTypes';
import {withNetwork} from './OnyxProvider';
import RenderHTML from './RenderHTML';
import Text from './Text';
import TextLink from './TextLink';
-import compose from '../libs/compose';
-import networkPropTypes from './networkPropTypes';
-import styles from '../styles/styles';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import FormHelpMessage from './FormHelpMessage';
const propTypes = {
/** Wrapped child components */
diff --git a/src/components/FormElement.js b/src/components/FormElement.js
index f46b24708c4c..cc9423a6147f 100644
--- a/src/components/FormElement.js
+++ b/src/components/FormElement.js
@@ -1,6 +1,6 @@
import React, {forwardRef} from 'react';
import {View} from 'react-native';
-import * as ComponentUtils from '../libs/ComponentUtils';
+import * as ComponentUtils from '@libs/ComponentUtils';
const FormElement = forwardRef((props, ref) => (
{
+ ref.current = el;
+ assignRef(child.ref, el);
+ };
+
if (!DeviceCapabilities.hasHoverSupport()) {
- return child;
+ return React.cloneElement(child, {
+ ref: hijackRef,
+ });
}
return React.cloneElement(child, {
- ref: (el) => {
- ref.current = el;
- assignRef(child.ref, el);
- },
+ ref: hijackRef,
onMouseEnter: enableHoveredOnMouseEnter,
onMouseLeave: disableHoveredOnMouseLeave,
onBlur: disableHoveredOnBlur,
diff --git a/src/components/Hoverable/index.native.js b/src/components/Hoverable/index.native.js
index 26d1d98863d6..1c5df276baa6 100644
--- a/src/components/Hoverable/index.native.js
+++ b/src/components/Hoverable/index.native.js
@@ -1,7 +1,7 @@
-import _ from 'underscore';
import React from 'react';
import {View} from 'react-native';
-import {propTypes, defaultProps} from './hoverablePropTypes';
+import _ from 'underscore';
+import {defaultProps, propTypes} from './hoverablePropTypes';
/**
* On mobile, there is no concept of hovering, so we return a plain wrapper around the component's children,
diff --git a/src/components/IFrame.js b/src/components/IFrame.js
index 5f7f657b0c09..aa85ad03ffbf 100644
--- a/src/components/IFrame.js
+++ b/src/components/IFrame.js
@@ -1,8 +1,8 @@
/* eslint-disable es/no-nullish-coalescing-operators */
+import PropTypes from 'prop-types';
import React, {useEffect, useState} from 'react';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
-import ONYXKEYS from '../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
function getNewDotURL(url) {
const urlObj = new URL(url);
diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts
index a30594d1ab3f..5d17e7f0c991 100644
--- a/src/components/Icon/BankIcons.ts
+++ b/src/components/Icon/BankIcons.ts
@@ -1,48 +1,48 @@
-import {SvgProps} from 'react-native-svg';
import {CSSProperties} from 'react';
import {ViewStyle} from 'react-native';
-import AmericanExpress from '../../../assets/images/bankicons/american-express.svg';
-import BankOfAmerica from '../../../assets/images/bankicons/bank-of-america.svg';
-import BB_T from '../../../assets/images/bankicons/bb-t.svg';
-import CapitalOne from '../../../assets/images/bankicons/capital-one.svg';
-import CharlesSchwab from '../../../assets/images/bankicons/charles-schwab.svg';
-import Chase from '../../../assets/images/bankicons/chase.svg';
-import CitiBank from '../../../assets/images/bankicons/citibank.svg';
-import CitizensBank from '../../../assets/images/bankicons/citizens-bank.svg';
-import Discover from '../../../assets/images/bankicons/discover.svg';
-import Fidelity from '../../../assets/images/bankicons/fidelity.svg';
-import HuntingtonBank from '../../../assets/images/bankicons/huntington-bank.svg';
-import GenericBank from '../../../assets/images/bankicons/generic-bank-account.svg';
-import NavyFederalCreditUnion from '../../../assets/images/bankicons/navy-federal-credit-union.svg';
-import PNC from '../../../assets/images/bankicons/pnc.svg';
-import RegionsBank from '../../../assets/images/bankicons/regions-bank.svg';
-import SunTrust from '../../../assets/images/bankicons/suntrust.svg';
-import TdBank from '../../../assets/images/bankicons/td-bank.svg';
-import USBank from '../../../assets/images/bankicons/us-bank.svg';
-import USAA from '../../../assets/images/bankicons/usaa.svg';
+import {SvgProps} from 'react-native-svg';
+import AmericanExpress from '@assets/images/bankicons/american-express.svg';
+import BankOfAmerica from '@assets/images/bankicons/bank-of-america.svg';
+import BB_T from '@assets/images/bankicons/bb-t.svg';
+import CapitalOne from '@assets/images/bankicons/capital-one.svg';
+import CharlesSchwab from '@assets/images/bankicons/charles-schwab.svg';
+import Chase from '@assets/images/bankicons/chase.svg';
+import CitiBank from '@assets/images/bankicons/citibank.svg';
+import CitizensBank from '@assets/images/bankicons/citizens-bank.svg';
+import Discover from '@assets/images/bankicons/discover.svg';
+import Fidelity from '@assets/images/bankicons/fidelity.svg';
+import GenericBank from '@assets/images/bankicons/generic-bank-account.svg';
+import HuntingtonBank from '@assets/images/bankicons/huntington-bank.svg';
+import NavyFederalCreditUnion from '@assets/images/bankicons/navy-federal-credit-union.svg';
+import PNC from '@assets/images/bankicons/pnc.svg';
+import RegionsBank from '@assets/images/bankicons/regions-bank.svg';
+import SunTrust from '@assets/images/bankicons/suntrust.svg';
+import TdBank from '@assets/images/bankicons/td-bank.svg';
+import USBank from '@assets/images/bankicons/us-bank.svg';
+import USAA from '@assets/images/bankicons/usaa.svg';
// Card Icons
-import AmericanExpressCard from '../../../assets/images/cardicons/american-express.svg';
-import BankOfAmericaCard from '../../../assets/images/cardicons/bank-of-america.svg';
-import BB_TCard from '../../../assets/images/cardicons/bb-t.svg';
-import CapitalOneCard from '../../../assets/images/cardicons/capital-one.svg';
-import CharlesSchwabCard from '../../../assets/images/cardicons/charles-schwab.svg';
-import ChaseCard from '../../../assets/images/cardicons/chase.svg';
-import CitiBankCard from '../../../assets/images/cardicons/citibank.svg';
-import CitizensBankCard from '../../../assets/images/cardicons/citizens.svg';
-import DiscoverCard from '../../../assets/images/cardicons/discover.svg';
-import FidelityCard from '../../../assets/images/cardicons/fidelity.svg';
-import HuntingtonBankCard from '../../../assets/images/cardicons/huntington-bank.svg';
-import GenericBankCard from '../../../assets/images/cardicons/generic-bank-card.svg';
-import NavyFederalCreditUnionCard from '../../../assets/images/cardicons/navy-federal-credit-union.svg';
-import PNCCard from '../../../assets/images/cardicons/pnc.svg';
-import RegionsBankCard from '../../../assets/images/cardicons/regions-bank.svg';
-import SunTrustCard from '../../../assets/images/cardicons/suntrust.svg';
-import TdBankCard from '../../../assets/images/cardicons/td-bank.svg';
-import USBankCard from '../../../assets/images/cardicons/us-bank.svg';
-import USAACard from '../../../assets/images/cardicons/usaa.svg';
-import ExpensifyCardImage from '../../../assets/images/cardicons/expensify-card-dark.svg';
-import styles from '../../styles/styles';
-import variables from '../../styles/variables';
+import AmericanExpressCard from '@assets/images/cardicons/american-express.svg';
+import BankOfAmericaCard from '@assets/images/cardicons/bank-of-america.svg';
+import BB_TCard from '@assets/images/cardicons/bb-t.svg';
+import CapitalOneCard from '@assets/images/cardicons/capital-one.svg';
+import CharlesSchwabCard from '@assets/images/cardicons/charles-schwab.svg';
+import ChaseCard from '@assets/images/cardicons/chase.svg';
+import CitiBankCard from '@assets/images/cardicons/citibank.svg';
+import CitizensBankCard from '@assets/images/cardicons/citizens.svg';
+import DiscoverCard from '@assets/images/cardicons/discover.svg';
+import ExpensifyCardImage from '@assets/images/cardicons/expensify-card-dark.svg';
+import FidelityCard from '@assets/images/cardicons/fidelity.svg';
+import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg';
+import HuntingtonBankCard from '@assets/images/cardicons/huntington-bank.svg';
+import NavyFederalCreditUnionCard from '@assets/images/cardicons/navy-federal-credit-union.svg';
+import PNCCard from '@assets/images/cardicons/pnc.svg';
+import RegionsBankCard from '@assets/images/cardicons/regions-bank.svg';
+import SunTrustCard from '@assets/images/cardicons/suntrust.svg';
+import TdBankCard from '@assets/images/cardicons/td-bank.svg';
+import USBankCard from '@assets/images/cardicons/us-bank.svg';
+import USAACard from '@assets/images/cardicons/usaa.svg';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
type BankIcon = {
icon: React.FC;
diff --git a/src/components/Icon/DefaultAvatars.js b/src/components/Icon/DefaultAvatars.js
index 2c143f68705d..698c2ce7368c 100644
--- a/src/components/Icon/DefaultAvatars.js
+++ b/src/components/Icon/DefaultAvatars.js
@@ -1,27 +1,27 @@
-import Avatar1 from '../../../assets/images/avatars/user/default-avatar_1.svg';
-import Avatar2 from '../../../assets/images/avatars/user/default-avatar_2.svg';
-import Avatar3 from '../../../assets/images/avatars/user/default-avatar_3.svg';
-import Avatar4 from '../../../assets/images/avatars/user/default-avatar_4.svg';
-import Avatar5 from '../../../assets/images/avatars/user/default-avatar_5.svg';
-import Avatar6 from '../../../assets/images/avatars/user/default-avatar_6.svg';
-import Avatar7 from '../../../assets/images/avatars/user/default-avatar_7.svg';
-import Avatar8 from '../../../assets/images/avatars/user/default-avatar_8.svg';
-import Avatar9 from '../../../assets/images/avatars/user/default-avatar_9.svg';
-import Avatar10 from '../../../assets/images/avatars/user/default-avatar_10.svg';
-import Avatar11 from '../../../assets/images/avatars/user/default-avatar_11.svg';
-import Avatar12 from '../../../assets/images/avatars/user/default-avatar_12.svg';
-import Avatar13 from '../../../assets/images/avatars/user/default-avatar_13.svg';
-import Avatar14 from '../../../assets/images/avatars/user/default-avatar_14.svg';
-import Avatar15 from '../../../assets/images/avatars/user/default-avatar_15.svg';
-import Avatar16 from '../../../assets/images/avatars/user/default-avatar_16.svg';
-import Avatar17 from '../../../assets/images/avatars/user/default-avatar_17.svg';
-import Avatar18 from '../../../assets/images/avatars/user/default-avatar_18.svg';
-import Avatar19 from '../../../assets/images/avatars/user/default-avatar_19.svg';
-import Avatar20 from '../../../assets/images/avatars/user/default-avatar_20.svg';
-import Avatar21 from '../../../assets/images/avatars/user/default-avatar_21.svg';
-import Avatar22 from '../../../assets/images/avatars/user/default-avatar_22.svg';
-import Avatar23 from '../../../assets/images/avatars/user/default-avatar_23.svg';
-import Avatar24 from '../../../assets/images/avatars/user/default-avatar_24.svg';
+import Avatar1 from '@assets/images/avatars/user/default-avatar_1.svg';
+import Avatar2 from '@assets/images/avatars/user/default-avatar_2.svg';
+import Avatar3 from '@assets/images/avatars/user/default-avatar_3.svg';
+import Avatar4 from '@assets/images/avatars/user/default-avatar_4.svg';
+import Avatar5 from '@assets/images/avatars/user/default-avatar_5.svg';
+import Avatar6 from '@assets/images/avatars/user/default-avatar_6.svg';
+import Avatar7 from '@assets/images/avatars/user/default-avatar_7.svg';
+import Avatar8 from '@assets/images/avatars/user/default-avatar_8.svg';
+import Avatar9 from '@assets/images/avatars/user/default-avatar_9.svg';
+import Avatar10 from '@assets/images/avatars/user/default-avatar_10.svg';
+import Avatar11 from '@assets/images/avatars/user/default-avatar_11.svg';
+import Avatar12 from '@assets/images/avatars/user/default-avatar_12.svg';
+import Avatar13 from '@assets/images/avatars/user/default-avatar_13.svg';
+import Avatar14 from '@assets/images/avatars/user/default-avatar_14.svg';
+import Avatar15 from '@assets/images/avatars/user/default-avatar_15.svg';
+import Avatar16 from '@assets/images/avatars/user/default-avatar_16.svg';
+import Avatar17 from '@assets/images/avatars/user/default-avatar_17.svg';
+import Avatar18 from '@assets/images/avatars/user/default-avatar_18.svg';
+import Avatar19 from '@assets/images/avatars/user/default-avatar_19.svg';
+import Avatar20 from '@assets/images/avatars/user/default-avatar_20.svg';
+import Avatar21 from '@assets/images/avatars/user/default-avatar_21.svg';
+import Avatar22 from '@assets/images/avatars/user/default-avatar_22.svg';
+import Avatar23 from '@assets/images/avatars/user/default-avatar_23.svg';
+import Avatar24 from '@assets/images/avatars/user/default-avatar_24.svg';
export {
Avatar1,
diff --git a/src/components/Icon/EReceiptBGs.js b/src/components/Icon/EReceiptBGs.js
index ff74c0fb83c2..16c23f4a99d4 100644
--- a/src/components/Icon/EReceiptBGs.js
+++ b/src/components/Icon/EReceiptBGs.js
@@ -1,8 +1,8 @@
-import EReceiptBG_Yellow from '../../../assets/images/eReceiptBGs/eReceiptBG_yellow.png';
-import EReceiptBG_Ice from '../../../assets/images/eReceiptBGs/eReceiptBG_navy.png';
-import EReceiptBG_Blue from '../../../assets/images/eReceiptBGs/eReceiptBG_blue.png';
-import EReceiptBG_Green from '../../../assets/images/eReceiptBGs/eReceiptBG_green.png';
-import EReceiptBG_Tangerine from '../../../assets/images/eReceiptBGs/eReceiptBG_tangerine.png';
-import EReceiptBG_Pink from '../../../assets/images/eReceiptBGs/eReceiptBG_pink.png';
+import EReceiptBG_Blue from '@assets/images/eReceiptBGs/eReceiptBG_blue.png';
+import EReceiptBG_Green from '@assets/images/eReceiptBGs/eReceiptBG_green.png';
+import EReceiptBG_Ice from '@assets/images/eReceiptBGs/eReceiptBG_navy.png';
+import EReceiptBG_Pink from '@assets/images/eReceiptBGs/eReceiptBG_pink.png';
+import EReceiptBG_Tangerine from '@assets/images/eReceiptBGs/eReceiptBG_tangerine.png';
+import EReceiptBG_Yellow from '@assets/images/eReceiptBGs/eReceiptBG_yellow.png';
export {EReceiptBG_Yellow, EReceiptBG_Ice, EReceiptBG_Blue, EReceiptBG_Green, EReceiptBG_Tangerine, EReceiptBG_Pink};
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index dd106c6b3c20..a4aa6b13cb29 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -1,130 +1,132 @@
-import ActiveRoomAvatar from '../../../assets/images/avatars/room.svg';
-import AdminRoomAvatar from '../../../assets/images/avatars/admin-room.svg';
-import Android from '../../../assets/images/android.svg';
-import AnnounceRoomAvatar from '../../../assets/images/avatars/announce-room.svg';
-import Apple from '../../../assets/images/apple.svg';
-import AppleLogo from '../../../assets/images/signIn/apple-logo.svg';
-import ArrowRight from '../../../assets/images/arrow-right.svg';
-import ArrowRightLong from '../../../assets/images/arrow-right-long.svg';
-import ArrowsUpDown from '../../../assets/images/arrows-updown.svg';
-import BackArrow from '../../../assets/images/back-left.svg';
-import Bank from '../../../assets/images/bank.svg';
-import Bill from '../../../assets/images/bill.svg';
-import Bolt from '../../../assets/images/bolt.svg';
-import Briefcase from '../../../assets/images/briefcase.svg';
-import Bug from '../../../assets/images/bug.svg';
-import Building from '../../../assets/images/building.svg';
-import Calendar from '../../../assets/images/calendar.svg';
-import Camera from '../../../assets/images/camera.svg';
-import Car from '../../../assets/images/car.svg';
-import Cash from '../../../assets/images/cash.svg';
-import ChatBubble from '../../../assets/images/chatbubble.svg';
-import ChatBubbles from '../../../assets/images/chatbubbles.svg';
-import Checkmark from '../../../assets/images/checkmark.svg';
-import Chair from '../../../assets/images/chair.svg';
-import Close from '../../../assets/images/close.svg';
-import ClosedSign from '../../../assets/images/closed-sign.svg';
-import Collapse from '../../../assets/images/collapse.svg';
-import Concierge from '../../../assets/images/concierge.svg';
-import ConciergeAvatar from '../../../assets/images/avatars/concierge-avatar.svg';
-import Connect from '../../../assets/images/connect.svg';
-import Copy from '../../../assets/images/copy.svg';
-import CreditCard from '../../../assets/images/creditcard.svg';
-import Document from '../../../assets/images/document.svg';
-import DeletedRoomAvatar from '../../../assets/images/avatars/deleted-room.svg';
-import DomainRoomAvatar from '../../../assets/images/avatars/domain-room.svg';
-import DotIndicator from '../../../assets/images/dot-indicator.svg';
-import DotIndicatorUnfilled from '../../../assets/images/dot-indicator-unfilled.svg';
-import DownArrow from '../../../assets/images/down.svg';
-import Download from '../../../assets/images/download.svg';
-import DragHandles from '../../../assets/images/drag-handles.svg';
-import Emoji from '../../../assets/images/emoji.svg';
-import EmptyStateRoutePending from '../../../assets/images/emptystate__routepending.svg';
-import Exclamation from '../../../assets/images/exclamation.svg';
-import Exit from '../../../assets/images/exit.svg';
-import ExpensifyCard from '../../../assets/images/expensifycard.svg';
-import ExpensifyWordmark from '../../../assets/images/expensify-wordmark.svg';
-import Expand from '../../../assets/images/expand.svg';
-import Eye from '../../../assets/images/eye.svg';
-import EyeDisabled from '../../../assets/images/eye-disabled.svg';
-import Flag from '../../../assets/images/flag.svg';
-import FlagLevelOne from '../../../assets/images/flag_level_01.svg';
-import FlagLevelTwo from '../../../assets/images/flag_level_02.svg';
-import FlagLevelThree from '../../../assets/images/flag_level_03.svg';
-import Gallery from '../../../assets/images/gallery.svg';
-import Gear from '../../../assets/images/gear.svg';
-import Globe from '../../../assets/images/globe.svg';
-import GoogleLogo from '../../../assets/images/signIn/google-logo.svg';
-import Hashtag from '../../../assets/images/hashtag.svg';
-import Heart from '../../../assets/images/heart.svg';
-import History from '../../../assets/images/history.svg';
-import Hourglass from '../../../assets/images/hourglass.svg';
-import ImageCropCircleMask from '../../../assets/images/image-crop-circle-mask.svg';
-import ImageCropSquareMask from '../../../assets/images/image-crop-square-mask.svg';
-import Info from '../../../assets/images/info.svg';
-import Invoice from '../../../assets/images/invoice.svg';
-import Key from '../../../assets/images/key.svg';
-import Keyboard from '../../../assets/images/keyboard.svg';
-import Link from '../../../assets/images/link.svg';
-import LinkCopy from '../../../assets/images/link-copy.svg';
-import Location from '../../../assets/images/location.svg';
-import Lock from '../../../assets/images/lock.svg';
+import AddReaction from '@assets/images/add-reaction.svg';
+import Android from '@assets/images/android.svg';
+import Apple from '@assets/images/apple.svg';
+import ArrowRightLong from '@assets/images/arrow-right-long.svg';
+import ArrowRight from '@assets/images/arrow-right.svg';
+import UpArrow from '@assets/images/arrow-up.svg';
+import ArrowsUpDown from '@assets/images/arrows-updown.svg';
+import AdminRoomAvatar from '@assets/images/avatars/admin-room.svg';
+import AnnounceRoomAvatar from '@assets/images/avatars/announce-room.svg';
+import ConciergeAvatar from '@assets/images/avatars/concierge-avatar.svg';
+import DeletedRoomAvatar from '@assets/images/avatars/deleted-room.svg';
+import DomainRoomAvatar from '@assets/images/avatars/domain-room.svg';
+import FallbackAvatar from '@assets/images/avatars/fallback-avatar.svg';
+import FallbackWorkspaceAvatar from '@assets/images/avatars/fallback-workspace-avatar.svg';
+import ActiveRoomAvatar from '@assets/images/avatars/room.svg';
+import BackArrow from '@assets/images/back-left.svg';
+import Bank from '@assets/images/bank.svg';
+import Bell from '@assets/images/bell.svg';
+import BellSlash from '@assets/images/bellSlash.svg';
+import Bill from '@assets/images/bill.svg';
+import Bolt from '@assets/images/bolt.svg';
+import Briefcase from '@assets/images/briefcase.svg';
+import Bug from '@assets/images/bug.svg';
+import Building from '@assets/images/building.svg';
+import Calendar from '@assets/images/calendar.svg';
+import Camera from '@assets/images/camera.svg';
+import Car from '@assets/images/car.svg';
+import Cash from '@assets/images/cash.svg';
+import Chair from '@assets/images/chair.svg';
+import ChatBubble from '@assets/images/chatbubble.svg';
+import ChatBubbles from '@assets/images/chatbubbles.svg';
+import Checkmark from '@assets/images/checkmark.svg';
+import Close from '@assets/images/close.svg';
+import ClosedSign from '@assets/images/closed-sign.svg';
+import Collapse from '@assets/images/collapse.svg';
+import Concierge from '@assets/images/concierge.svg';
+import Connect from '@assets/images/connect.svg';
+import Copy from '@assets/images/copy.svg';
+import CreditCard from '@assets/images/creditcard.svg';
+import Document from '@assets/images/document.svg';
+import DotIndicatorUnfilled from '@assets/images/dot-indicator-unfilled.svg';
+import DotIndicator from '@assets/images/dot-indicator.svg';
+import DownArrow from '@assets/images/down.svg';
+import Download from '@assets/images/download.svg';
+import DragAndDrop from '@assets/images/drag-and-drop.svg';
+import DragHandles from '@assets/images/drag-handles.svg';
+import Emoji from '@assets/images/emoji.svg';
+import EmptyStateRoutePending from '@assets/images/emptystate__routepending.svg';
+import EReceiptIcon from '@assets/images/eReceiptIcon.svg';
+import Exclamation from '@assets/images/exclamation.svg';
+import Exit from '@assets/images/exit.svg';
+import Expand from '@assets/images/expand.svg';
+import ExpensifyFooterLogoVertical from '@assets/images/expensify-footer-logo-vertical.svg';
+import ExpensifyFooterLogo from '@assets/images/expensify-footer-logo.svg';
+import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
+import ExpensifyCard from '@assets/images/expensifycard.svg';
+import EyeDisabled from '@assets/images/eye-disabled.svg';
+import Eye from '@assets/images/eye.svg';
+import Flag from '@assets/images/flag.svg';
+import FlagLevelOne from '@assets/images/flag_level_01.svg';
+import FlagLevelTwo from '@assets/images/flag_level_02.svg';
+import FlagLevelThree from '@assets/images/flag_level_03.svg';
+import Gallery from '@assets/images/gallery.svg';
+import Gear from '@assets/images/gear.svg';
+import Globe from '@assets/images/globe.svg';
+import Hashtag from '@assets/images/hashtag.svg';
+import Heart from '@assets/images/heart.svg';
+import History from '@assets/images/history.svg';
+import Hourglass from '@assets/images/hourglass.svg';
+import ImageCropCircleMask from '@assets/images/image-crop-circle-mask.svg';
+import ImageCropSquareMask from '@assets/images/image-crop-square-mask.svg';
+import Info from '@assets/images/info.svg';
+import Invoice from '@assets/images/invoice.svg';
+import Key from '@assets/images/key.svg';
+import Keyboard from '@assets/images/keyboard.svg';
+import LinkCopy from '@assets/images/link-copy.svg';
+import Link from '@assets/images/link.svg';
+import Location from '@assets/images/location.svg';
+import Lock from '@assets/images/lock.svg';
+import Luggage from '@assets/images/luggage.svg';
+import MagnifyingGlass from '@assets/images/magnifying-glass.svg';
+import Mail from '@assets/images/mail.svg';
+import Megaphone from '@assets/images/megaphone.svg';
+import Menu from '@assets/images/menu.svg';
+import MoneyBag from '@assets/images/money-bag.svg';
+import MoneyCircle from '@assets/images/money-circle.svg';
+import Monitor from '@assets/images/monitor.svg';
+import NewWindow from '@assets/images/new-window.svg';
+import NewWorkspace from '@assets/images/new-workspace.svg';
+import OfflineCloud from '@assets/images/offline-cloud.svg';
+import Offline from '@assets/images/offline.svg';
+import Paperclip from '@assets/images/paperclip.svg';
+import Paycheck from '@assets/images/paycheck.svg';
+import Pencil from '@assets/images/pencil.svg';
+import Phone from '@assets/images/phone.svg';
+import Pin from '@assets/images/pin.svg';
+import Plus from '@assets/images/plus.svg';
+import Printer from '@assets/images/printer.svg';
+import Profile from '@assets/images/profile.svg';
+import QrCode from '@assets/images/qrcode.svg';
+import QuestionMark from '@assets/images/question-mark-circle.svg';
+import ReceiptSearch from '@assets/images/receipt-search.svg';
+import Receipt from '@assets/images/receipt.svg';
+import Rotate from '@assets/images/rotate-image.svg';
+import RotateLeft from '@assets/images/rotate-left.svg';
+import Send from '@assets/images/send.svg';
+import Shield from '@assets/images/shield.svg';
+import AppleLogo from '@assets/images/signIn/apple-logo.svg';
+import GoogleLogo from '@assets/images/signIn/google-logo.svg';
+import Facebook from '@assets/images/social-facebook.svg';
+import Instagram from '@assets/images/social-instagram.svg';
+import Linkedin from '@assets/images/social-linkedin.svg';
+import Podcast from '@assets/images/social-podcast.svg';
+import Twitter from '@assets/images/social-twitter.svg';
+import Youtube from '@assets/images/social-youtube.svg';
+import Sync from '@assets/images/sync.svg';
+import Task from '@assets/images/task.svg';
+import ThreeDots from '@assets/images/three-dots.svg';
+import Transfer from '@assets/images/transfer.svg';
+import Trashcan from '@assets/images/trashcan.svg';
+import Unlock from '@assets/images/unlock.svg';
+import UploadAlt from '@assets/images/upload-alt.svg';
+import Upload from '@assets/images/upload.svg';
+import User from '@assets/images/user.svg';
+import Users from '@assets/images/users.svg';
+import Wallet from '@assets/images/wallet.svg';
+import Workspace from '@assets/images/workspace-default-avatar.svg';
+import Zoom from '@assets/images/zoom.svg';
import LoungeAccess from './svgs/LoungeAccessIcon';
-import Luggage from '../../../assets/images/luggage.svg';
-import MagnifyingGlass from '../../../assets/images/magnifying-glass.svg';
-import Mail from '../../../assets/images/mail.svg';
-import Megaphone from '../../../assets/images/megaphone.svg';
-import Menu from '../../../assets/images/menu.svg';
-import MoneyBag from '../../../assets/images/money-bag.svg';
-import MoneyCircle from '../../../assets/images/money-circle.svg';
-import Monitor from '../../../assets/images/monitor.svg';
-import NewWindow from '../../../assets/images/new-window.svg';
-import NewWorkspace from '../../../assets/images/new-workspace.svg';
-import Offline from '../../../assets/images/offline.svg';
-import OfflineCloud from '../../../assets/images/offline-cloud.svg';
-import Paperclip from '../../../assets/images/paperclip.svg';
-import Paycheck from '../../../assets/images/paycheck.svg';
-import Pencil from '../../../assets/images/pencil.svg';
-import Phone from '../../../assets/images/phone.svg';
-import Pin from '../../../assets/images/pin.svg';
-import Plus from '../../../assets/images/plus.svg';
-import Printer from '../../../assets/images/printer.svg';
-import Profile from '../../../assets/images/profile.svg';
-import QrCode from '../../../assets/images/qrcode.svg';
-import QuestionMark from '../../../assets/images/question-mark-circle.svg';
-import Receipt from '../../../assets/images/receipt.svg';
-import ReceiptSearch from '../../../assets/images/receipt-search.svg';
-import Rotate from '../../../assets/images/rotate-image.svg';
-import RotateLeft from '../../../assets/images/rotate-left.svg';
-import Send from '../../../assets/images/send.svg';
-import Shield from '../../../assets/images/shield.svg';
-import Sync from '../../../assets/images/sync.svg';
-import ThreeDots from '../../../assets/images/three-dots.svg';
-import Transfer from '../../../assets/images/transfer.svg';
-import Trashcan from '../../../assets/images/trashcan.svg';
-import Unlock from '../../../assets/images/unlock.svg';
-import UpArrow from '../../../assets/images/arrow-up.svg';
-import Upload from '../../../assets/images/upload.svg';
-import UploadAlt from '../../../assets/images/upload-alt.svg';
-import User from '../../../assets/images/user.svg';
-import Users from '../../../assets/images/users.svg';
-import Wallet from '../../../assets/images/wallet.svg';
-import Workspace from '../../../assets/images/workspace-default-avatar.svg';
-import Zoom from '../../../assets/images/zoom.svg';
-import FallbackAvatar from '../../../assets/images/avatars/fallback-avatar.svg';
-import FallbackWorkspaceAvatar from '../../../assets/images/avatars/fallback-workspace-avatar.svg';
-import DragAndDrop from '../../../assets/images/drag-and-drop.svg';
-import ExpensifyFooterLogo from '../../../assets/images/expensify-footer-logo.svg';
-import ExpensifyFooterLogoVertical from '../../../assets/images/expensify-footer-logo-vertical.svg';
-import Twitter from '../../../assets/images/social-twitter.svg';
-import Youtube from '../../../assets/images/social-youtube.svg';
-import Facebook from '../../../assets/images/social-facebook.svg';
-import Podcast from '../../../assets/images/social-podcast.svg';
-import Linkedin from '../../../assets/images/social-linkedin.svg';
-import Instagram from '../../../assets/images/social-instagram.svg';
-import AddReaction from '../../../assets/images/add-reaction.svg';
-import Task from '../../../assets/images/task.svg';
-import EReceiptIcon from '../../../assets/images/eReceiptIcon.svg';
export {
ActiveRoomAvatar,
@@ -140,6 +142,8 @@ export {
BackArrow,
Bank,
Bill,
+ Bell,
+ BellSlash,
Bolt,
Briefcase,
Bug,
diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js
index c9a86cf8f10c..728e5b830fa6 100644
--- a/src/components/Icon/Illustrations.js
+++ b/src/components/Icon/Illustrations.js
@@ -1,52 +1,52 @@
-import Abracadabra from '../../../assets/images/product-illustrations/abracadabra.svg';
-import BankArrowPink from '../../../assets/images/product-illustrations/bank-arrow--pink.svg';
-import BankMouseGreen from '../../../assets/images/product-illustrations/bank-mouse--green.svg';
-import BankUserGreen from '../../../assets/images/product-illustrations/bank-user--green.svg';
-import ChatBubbles from '../../../assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
-import CoffeeMug from '../../../assets/images/simple-illustrations/simple-illustration__coffeemug.svg';
-import ConciergeBlue from '../../../assets/images/product-illustrations/concierge--blue.svg';
-import ConciergeExclamation from '../../../assets/images/product-illustrations/concierge--exclamation.svg';
-import CreditCardsBlue from '../../../assets/images/product-illustrations/credit-cards--blue.svg';
-import EmailAddress from '../../../assets/images/simple-illustrations/simple-illustration__email-address.svg';
-import InvoiceOrange from '../../../assets/images/product-illustrations/invoice--orange.svg';
-import JewelBoxBlue from '../../../assets/images/product-illustrations/jewel-box--blue.svg';
-import JewelBoxGreen from '../../../assets/images/product-illustrations/jewel-box--green.svg';
-import JewelBoxPink from '../../../assets/images/product-illustrations/jewel-box--pink.svg';
-import JewelBoxYellow from '../../../assets/images/product-illustrations/jewel-box--yellow.svg';
-import MagicCode from '../../../assets/images/product-illustrations/magic-code.svg';
-import MoneyEnvelopeBlue from '../../../assets/images/product-illustrations/money-envelope--blue.svg';
-import MoneyMousePink from '../../../assets/images/product-illustrations/money-mouse--pink.svg';
-import ReceiptsSearchYellow from '../../../assets/images/product-illustrations/receipts-search--yellow.svg';
-import ReceiptYellow from '../../../assets/images/product-illustrations/receipt--yellow.svg';
-import RocketBlue from '../../../assets/images/product-illustrations/rocket--blue.svg';
-import RocketOrange from '../../../assets/images/product-illustrations/rocket--orange.svg';
-import SafeBlue from '../../../assets/images/product-illustrations/safe.svg';
-import SanFrancisco from '../../../assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
-import TadaYellow from '../../../assets/images/product-illustrations/tada--yellow.svg';
-import TadaBlue from '../../../assets/images/product-illustrations/tada--blue.svg';
-import ToddBehindCloud from '../../../assets/images/product-illustrations/todd-behind-cloud.svg';
-import GpsTrackOrange from '../../../assets/images/product-illustrations/gps-track--orange.svg';
-import ShieldYellow from '../../../assets/images/simple-illustrations/simple-illustration__shield.svg';
-import MoneyReceipts from '../../../assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
-import PinkBill from '../../../assets/images/simple-illustrations/simple-illustration__bill.svg';
-import CreditCardsNew from '../../../assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
-import InvoiceBlue from '../../../assets/images/simple-illustrations/simple-illustration__invoice.svg';
-import LockOpen from '../../../assets/images/simple-illustrations/simple-illustration__lockopen.svg';
-import Lounge from '../../../assets/images/product-illustrations/lounge.svg';
-import Luggage from '../../../assets/images/simple-illustrations/simple-illustration__luggage.svg';
-import MoneyIntoWallet from '../../../assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg';
-import MoneyWings from '../../../assets/images/simple-illustrations/simple-illustration__moneywings.svg';
-import OpenSafe from '../../../assets/images/simple-illustrations/simple-illustration__opensafe.svg';
-import TrackShoe from '../../../assets/images/simple-illustrations/simple-illustration__track-shoe.svg';
-import BankArrow from '../../../assets/images/simple-illustrations/simple-illustration__bank-arrow.svg';
-import ConciergeBubble from '../../../assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg';
-import ConciergeNew from '../../../assets/images/simple-illustrations/simple-illustration__concierge.svg';
-import MoneyBadge from '../../../assets/images/simple-illustrations/simple-illustration__moneybadge.svg';
-import TreasureChest from '../../../assets/images/simple-illustrations/simple-illustration__treasurechest.svg';
-import ThumbsUpStars from '../../../assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
-import Hands from '../../../assets/images/product-illustrations/home-illustration-hands.svg';
-import HandEarth from '../../../assets/images/simple-illustrations/simple-illustration__handearth.svg';
-import SmartScan from '../../../assets/images/product-illustrations/simple-illustration__smartscan.svg';
+import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
+import BankArrowPink from '@assets/images/product-illustrations/bank-arrow--pink.svg';
+import BankMouseGreen from '@assets/images/product-illustrations/bank-mouse--green.svg';
+import BankUserGreen from '@assets/images/product-illustrations/bank-user--green.svg';
+import ConciergeBlue from '@assets/images/product-illustrations/concierge--blue.svg';
+import ConciergeExclamation from '@assets/images/product-illustrations/concierge--exclamation.svg';
+import CreditCardsBlue from '@assets/images/product-illustrations/credit-cards--blue.svg';
+import GpsTrackOrange from '@assets/images/product-illustrations/gps-track--orange.svg';
+import Hands from '@assets/images/product-illustrations/home-illustration-hands.svg';
+import InvoiceOrange from '@assets/images/product-illustrations/invoice--orange.svg';
+import JewelBoxBlue from '@assets/images/product-illustrations/jewel-box--blue.svg';
+import JewelBoxGreen from '@assets/images/product-illustrations/jewel-box--green.svg';
+import JewelBoxPink from '@assets/images/product-illustrations/jewel-box--pink.svg';
+import JewelBoxYellow from '@assets/images/product-illustrations/jewel-box--yellow.svg';
+import Lounge from '@assets/images/product-illustrations/lounge.svg';
+import MagicCode from '@assets/images/product-illustrations/magic-code.svg';
+import MoneyEnvelopeBlue from '@assets/images/product-illustrations/money-envelope--blue.svg';
+import MoneyMousePink from '@assets/images/product-illustrations/money-mouse--pink.svg';
+import ReceiptYellow from '@assets/images/product-illustrations/receipt--yellow.svg';
+import ReceiptsSearchYellow from '@assets/images/product-illustrations/receipts-search--yellow.svg';
+import RocketBlue from '@assets/images/product-illustrations/rocket--blue.svg';
+import RocketOrange from '@assets/images/product-illustrations/rocket--orange.svg';
+import SafeBlue from '@assets/images/product-illustrations/safe.svg';
+import SmartScan from '@assets/images/product-illustrations/simple-illustration__smartscan.svg';
+import TadaBlue from '@assets/images/product-illustrations/tada--blue.svg';
+import TadaYellow from '@assets/images/product-illustrations/tada--yellow.svg';
+import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg';
+import BankArrow from '@assets/images/simple-illustrations/simple-illustration__bank-arrow.svg';
+import PinkBill from '@assets/images/simple-illustrations/simple-illustration__bill.svg';
+import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
+import CoffeeMug from '@assets/images/simple-illustrations/simple-illustration__coffeemug.svg';
+import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg';
+import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg';
+import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
+import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
+import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg';
+import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg';
+import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
+import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
+import MoneyReceipts from '@assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
+import MoneyBadge from '@assets/images/simple-illustrations/simple-illustration__moneybadge.svg';
+import MoneyIntoWallet from '@assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg';
+import MoneyWings from '@assets/images/simple-illustrations/simple-illustration__moneywings.svg';
+import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__opensafe.svg';
+import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
+import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
+import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
+import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg';
+import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg';
export {
Abracadabra,
diff --git a/src/components/Icon/MCCIcons.js b/src/components/Icon/MCCIcons.js
index a704f7d46bc6..922fb274f23d 100644
--- a/src/components/Icon/MCCIcons.js
+++ b/src/components/Icon/MCCIcons.js
@@ -1,15 +1,15 @@
-import Airlines from '../../../assets/images/MCCGroupIcons/MCC-Airlines.svg';
-import Commuter from '../../../assets/images/MCCGroupIcons/MCC-Commuter.svg';
-import Gas from '../../../assets/images/MCCGroupIcons/MCC-Gas.svg';
-import Goods from '../../../assets/images/MCCGroupIcons/MCC-Goods.svg';
-import Groceries from '../../../assets/images/MCCGroupIcons/MCC-Groceries.svg';
-import Hotel from '../../../assets/images/MCCGroupIcons/MCC-Hotel.svg';
-import Mail from '../../../assets/images/MCCGroupIcons/MCC-Mail.svg';
-import Meals from '../../../assets/images/MCCGroupIcons/MCC-Meals.svg';
-import Rental from '../../../assets/images/MCCGroupIcons/MCC-RentalCar.svg';
-import Services from '../../../assets/images/MCCGroupIcons/MCC-Services.svg';
-import Taxi from '../../../assets/images/MCCGroupIcons/MCC-Taxi.svg';
-import Miscellaneous from '../../../assets/images/MCCGroupIcons/MCC-Misc.svg';
-import Utilities from '../../../assets/images/MCCGroupIcons/MCC-Utilities.svg';
+import Airlines from '@assets/images/MCCGroupIcons/MCC-Airlines.svg';
+import Commuter from '@assets/images/MCCGroupIcons/MCC-Commuter.svg';
+import Gas from '@assets/images/MCCGroupIcons/MCC-Gas.svg';
+import Goods from '@assets/images/MCCGroupIcons/MCC-Goods.svg';
+import Groceries from '@assets/images/MCCGroupIcons/MCC-Groceries.svg';
+import Hotel from '@assets/images/MCCGroupIcons/MCC-Hotel.svg';
+import Mail from '@assets/images/MCCGroupIcons/MCC-Mail.svg';
+import Meals from '@assets/images/MCCGroupIcons/MCC-Meals.svg';
+import Miscellaneous from '@assets/images/MCCGroupIcons/MCC-Misc.svg';
+import Rental from '@assets/images/MCCGroupIcons/MCC-RentalCar.svg';
+import Services from '@assets/images/MCCGroupIcons/MCC-Services.svg';
+import Taxi from '@assets/images/MCCGroupIcons/MCC-Taxi.svg';
+import Utilities from '@assets/images/MCCGroupIcons/MCC-Utilities.svg';
export {Airlines, Commuter, Gas, Goods, Groceries, Hotel, Mail, Meals, Rental, Services, Taxi, Miscellaneous, Utilities};
diff --git a/src/components/Icon/WorkspaceDefaultAvatars.js b/src/components/Icon/WorkspaceDefaultAvatars.js
index 0f5490b981bd..53d2ca088118 100644
--- a/src/components/Icon/WorkspaceDefaultAvatars.js
+++ b/src/components/Icon/WorkspaceDefaultAvatars.js
@@ -1,40 +1,40 @@
-import Workspace0 from '../../../assets/images/avatars/workspace/default-avatar_0.svg';
-import Workspace1 from '../../../assets/images/avatars/workspace/default-avatar_1.svg';
-import Workspace2 from '../../../assets/images/avatars/workspace/default-avatar_2.svg';
-import Workspace3 from '../../../assets/images/avatars/workspace/default-avatar_3.svg';
-import Workspace4 from '../../../assets/images/avatars/workspace/default-avatar_4.svg';
-import Workspace5 from '../../../assets/images/avatars/workspace/default-avatar_5.svg';
-import Workspace6 from '../../../assets/images/avatars/workspace/default-avatar_6.svg';
-import Workspace7 from '../../../assets/images/avatars/workspace/default-avatar_7.svg';
-import Workspace8 from '../../../assets/images/avatars/workspace/default-avatar_8.svg';
-import Workspace9 from '../../../assets/images/avatars/workspace/default-avatar_9.svg';
-import WorkspaceA from '../../../assets/images/avatars/workspace/default-avatar_a.svg';
-import WorkspaceB from '../../../assets/images/avatars/workspace/default-avatar_b.svg';
-import WorkspaceC from '../../../assets/images/avatars/workspace/default-avatar_c.svg';
-import WorkspaceD from '../../../assets/images/avatars/workspace/default-avatar_d.svg';
-import WorkspaceE from '../../../assets/images/avatars/workspace/default-avatar_e.svg';
-import WorkspaceF from '../../../assets/images/avatars/workspace/default-avatar_f.svg';
-import WorkspaceG from '../../../assets/images/avatars/workspace/default-avatar_g.svg';
-import WorkspaceH from '../../../assets/images/avatars/workspace/default-avatar_h.svg';
-import WorkspaceI from '../../../assets/images/avatars/workspace/default-avatar_i.svg';
-import WorkspaceJ from '../../../assets/images/avatars/workspace/default-avatar_j.svg';
-import WorkspaceK from '../../../assets/images/avatars/workspace/default-avatar_k.svg';
-import WorkspaceL from '../../../assets/images/avatars/workspace/default-avatar_l.svg';
-import WorkspaceM from '../../../assets/images/avatars/workspace/default-avatar_m.svg';
-import WorkspaceN from '../../../assets/images/avatars/workspace/default-avatar_n.svg';
-import WorkspaceO from '../../../assets/images/avatars/workspace/default-avatar_o.svg';
-import WorkspaceP from '../../../assets/images/avatars/workspace/default-avatar_p.svg';
-import WorkspaceQ from '../../../assets/images/avatars/workspace/default-avatar_q.svg';
-import WorkspaceR from '../../../assets/images/avatars/workspace/default-avatar_r.svg';
-import WorkspaceS from '../../../assets/images/avatars/workspace/default-avatar_s.svg';
-import WorkspaceT from '../../../assets/images/avatars/workspace/default-avatar_t.svg';
-import WorkspaceU from '../../../assets/images/avatars/workspace/default-avatar_u.svg';
-import WorkspaceV from '../../../assets/images/avatars/workspace/default-avatar_v.svg';
-import WorkspaceW from '../../../assets/images/avatars/workspace/default-avatar_w.svg';
-import WorkspaceX from '../../../assets/images/avatars/workspace/default-avatar_x.svg';
-import WorkspaceY from '../../../assets/images/avatars/workspace/default-avatar_y.svg';
-import WorkspaceZ from '../../../assets/images/avatars/workspace/default-avatar_z.svg';
-import WorkspaceBuilding from '../../../assets/images/avatars/workspace/default-avatar_building.svg';
+import Workspace0 from '@assets/images/avatars/workspace/default-avatar_0.svg';
+import Workspace1 from '@assets/images/avatars/workspace/default-avatar_1.svg';
+import Workspace2 from '@assets/images/avatars/workspace/default-avatar_2.svg';
+import Workspace3 from '@assets/images/avatars/workspace/default-avatar_3.svg';
+import Workspace4 from '@assets/images/avatars/workspace/default-avatar_4.svg';
+import Workspace5 from '@assets/images/avatars/workspace/default-avatar_5.svg';
+import Workspace6 from '@assets/images/avatars/workspace/default-avatar_6.svg';
+import Workspace7 from '@assets/images/avatars/workspace/default-avatar_7.svg';
+import Workspace8 from '@assets/images/avatars/workspace/default-avatar_8.svg';
+import Workspace9 from '@assets/images/avatars/workspace/default-avatar_9.svg';
+import WorkspaceA from '@assets/images/avatars/workspace/default-avatar_a.svg';
+import WorkspaceB from '@assets/images/avatars/workspace/default-avatar_b.svg';
+import WorkspaceBuilding from '@assets/images/avatars/workspace/default-avatar_building.svg';
+import WorkspaceC from '@assets/images/avatars/workspace/default-avatar_c.svg';
+import WorkspaceD from '@assets/images/avatars/workspace/default-avatar_d.svg';
+import WorkspaceE from '@assets/images/avatars/workspace/default-avatar_e.svg';
+import WorkspaceF from '@assets/images/avatars/workspace/default-avatar_f.svg';
+import WorkspaceG from '@assets/images/avatars/workspace/default-avatar_g.svg';
+import WorkspaceH from '@assets/images/avatars/workspace/default-avatar_h.svg';
+import WorkspaceI from '@assets/images/avatars/workspace/default-avatar_i.svg';
+import WorkspaceJ from '@assets/images/avatars/workspace/default-avatar_j.svg';
+import WorkspaceK from '@assets/images/avatars/workspace/default-avatar_k.svg';
+import WorkspaceL from '@assets/images/avatars/workspace/default-avatar_l.svg';
+import WorkspaceM from '@assets/images/avatars/workspace/default-avatar_m.svg';
+import WorkspaceN from '@assets/images/avatars/workspace/default-avatar_n.svg';
+import WorkspaceO from '@assets/images/avatars/workspace/default-avatar_o.svg';
+import WorkspaceP from '@assets/images/avatars/workspace/default-avatar_p.svg';
+import WorkspaceQ from '@assets/images/avatars/workspace/default-avatar_q.svg';
+import WorkspaceR from '@assets/images/avatars/workspace/default-avatar_r.svg';
+import WorkspaceS from '@assets/images/avatars/workspace/default-avatar_s.svg';
+import WorkspaceT from '@assets/images/avatars/workspace/default-avatar_t.svg';
+import WorkspaceU from '@assets/images/avatars/workspace/default-avatar_u.svg';
+import WorkspaceV from '@assets/images/avatars/workspace/default-avatar_v.svg';
+import WorkspaceW from '@assets/images/avatars/workspace/default-avatar_w.svg';
+import WorkspaceX from '@assets/images/avatars/workspace/default-avatar_x.svg';
+import WorkspaceY from '@assets/images/avatars/workspace/default-avatar_y.svg';
+import WorkspaceZ from '@assets/images/avatars/workspace/default-avatar_z.svg';
export {
Workspace0,
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
index 5cdd5c79704d..d4d95ca117d4 100644
--- a/src/components/Icon/index.js
+++ b/src/components/Icon/index.js
@@ -1,10 +1,10 @@
+import PropTypes from 'prop-types';
import React, {PureComponent} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import themeColors from '../../styles/themes/default';
-import variables from '../../styles/variables';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
import IconWrapperStyles from './IconWrapperStyles';
const propTypes = {
diff --git a/src/components/Icon/svgs/LoungeAccessIcon.js b/src/components/Icon/svgs/LoungeAccessIcon.js
index b00fbb312c85..9117fb24bb42 100644
--- a/src/components/Icon/svgs/LoungeAccessIcon.js
+++ b/src/components/Icon/svgs/LoungeAccessIcon.js
@@ -1,7 +1,7 @@
+import PropTypes from 'prop-types';
import * as React from 'react';
import Svg, {G, Path, Polygon} from 'react-native-svg';
-import PropTypes from 'prop-types';
-import themeColors from '../../../styles/themes/default';
+import themeColors from '@styles/themes/default';
const propTypes = {
/** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'. */
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index c45f5e2452dd..54a3b0e7b07c 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -1,10 +1,10 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import Lottie from './Lottie';
-import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
+import React from 'react';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
import HeaderPageLayout from './HeaderPageLayout';
+import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
+import Lottie from './Lottie';
const propTypes = {
...headerWithBackButtonPropTypes,
diff --git a/src/components/Image/imagePropTypes.js b/src/components/Image/imagePropTypes.js
index c02e48eef659..78bd48ba47ec 100644
--- a/src/components/Image/imagePropTypes.js
+++ b/src/components/Image/imagePropTypes.js
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
-import stylePropTypes from '../../styles/stylePropTypes';
-import sourcePropTypes from './sourcePropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
import RESIZE_MODES from './resizeModes';
+import sourcePropTypes from './sourcePropTypes';
const imagePropTypes = {
/** Styles for the Image */
diff --git a/src/components/Image/index.js b/src/components/Image/index.js
index 7434c16c6491..c2800511ff45 100644
--- a/src/components/Image/index.js
+++ b/src/components/Image/index.js
@@ -1,9 +1,9 @@
+import lodashGet from 'lodash/get';
import React, {useEffect, useMemo} from 'react';
import {Image as RNImage} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
import _ from 'underscore';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
import {defaultProps, imagePropTypes} from './imagePropTypes';
import RESIZE_MODES from './resizeModes';
diff --git a/src/components/Image/index.native.js b/src/components/Image/index.native.js
index 9d9ad600b1d4..52ac503081e6 100644
--- a/src/components/Image/index.native.js
+++ b/src/components/Image/index.native.js
@@ -1,9 +1,9 @@
+import lodashGet from 'lodash/get';
import React from 'react';
import RNFastImage from 'react-native-fast-image';
import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
-import CONST from '../../CONST';
-import ONYXKEYS from '../../ONYXKEYS';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import {defaultProps, imagePropTypes} from './imagePropTypes';
import RESIZE_MODES from './resizeModes';
diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index 1d90a5723016..09656d700917 100644
--- a/src/components/ImageView/index.js
+++ b/src/components/ImageView/index.js
@@ -1,13 +1,13 @@
-import React, {useState, useEffect, useRef, useCallback} from 'react';
import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
import {View} from 'react-native';
-import Image from '../Image';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import CONST from '../../CONST';
+import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import Image from '@components/Image';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
const propTypes = {
/** Whether source url requires authentication */
diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js
index b365f507a4fc..dd17e2d27a4e 100644
--- a/src/components/ImageView/index.native.js
+++ b/src/components/ImageView/index.native.js
@@ -1,13 +1,13 @@
-import React, {useState, useRef, useEffect} from 'react';
import PropTypes from 'prop-types';
-import {View, PanResponder} from 'react-native';
+import React, {useEffect, useRef, useState} from 'react';
+import {PanResponder, View} from 'react-native';
import ImageZoom from 'react-native-image-pan-zoom';
import _ from 'underscore';
-import styles from '../../styles/styles';
-import variables from '../../styles/variables';
-import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import Image from '../Image';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
+import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import Image from '@components/Image';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
/**
* On the native layer, we use a image library to handle zoom functionality
diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js
index 6aa87d07f23e..5db78e0c1276 100644
--- a/src/components/ImageWithSizeCalculation.js
+++ b/src/components/ImageWithSizeCalculation.js
@@ -1,9 +1,9 @@
-import _ from 'underscore';
-import React, {useState, useRef, useEffect} from 'react';
-import {View} from 'react-native';
import PropTypes from 'prop-types';
-import Log from '../libs/Log';
-import styles from '../styles/styles';
+import React, {useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import Log from '@libs/Log';
+import styles from '@styles/styles';
import FullscreenLoadingIndicator from './FullscreenLoadingIndicator';
import Image from './Image';
diff --git a/src/components/Indicator.js b/src/components/Indicator.js
index 24eb20ad5eee..046c3ca523e1 100644
--- a/src/components/Indicator.js
+++ b/src/components/Indicator.js
@@ -1,21 +1,21 @@
-import _ from 'underscore';
+import PropTypes from 'prop-types';
import React from 'react';
import {StyleSheet, View} from 'react-native';
-import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
-import styles from '../styles/styles';
-import ONYXKEYS from '../ONYXKEYS';
-import policyMemberPropType from '../pages/policyMemberPropType';
+import _ from 'underscore';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import * as UserUtils from '@libs/UserUtils';
+import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
+import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
+import policyMemberPropType from '@pages/policyMemberPropType';
+import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
+import {policyPropTypes} from '@pages/workspace/withPolicy';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import * as PaymentMethods from '@userActions/PaymentMethods';
+import ONYXKEYS from '@src/ONYXKEYS';
import bankAccountPropTypes from './bankAccountPropTypes';
import cardPropTypes from './cardPropTypes';
-import userWalletPropTypes from '../pages/EnablePayments/userWalletPropTypes';
-import {policyPropTypes} from '../pages/workspace/withPolicy';
-import walletTermsPropTypes from '../pages/EnablePayments/walletTermsPropTypes';
-import * as PolicyUtils from '../libs/PolicyUtils';
-import * as PaymentMethods from '../libs/actions/PaymentMethods';
-import * as ReimbursementAccountProps from '../pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import * as UserUtils from '../libs/UserUtils';
-import themeColors from '../styles/themes/default';
const propTypes = {
/* Onyx Props */
diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js
index 14bab44f2126..e28f0f6b1f55 100644
--- a/src/components/InlineCodeBlock/WrappedText.js
+++ b/src/components/InlineCodeBlock/WrappedText.js
@@ -1,10 +1,10 @@
-import _ from 'underscore';
+import PropTypes from 'prop-types';
import React, {Fragment} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import Text from '../Text';
-import CONST from '../../CONST';
+import _ from 'underscore';
+import Text from '@components/Text';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
/**
* Breaks the text into matrix
diff --git a/src/components/InlineCodeBlock/index.js b/src/components/InlineCodeBlock/index.js
index 7610ba4fa583..84666931d9b2 100644
--- a/src/components/InlineCodeBlock/index.js
+++ b/src/components/InlineCodeBlock/index.js
@@ -1,7 +1,7 @@
-import React from 'react';
import _ from 'lodash';
+import React from 'react';
+import Text from '@components/Text';
import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
-import Text from '../Text';
function InlineCodeBlock(props) {
const TDefaultRenderer = props.TDefaultRenderer;
diff --git a/src/components/InlineCodeBlock/index.native.js b/src/components/InlineCodeBlock/index.native.js
index 2aa718832180..ff92ebbbcb9e 100644
--- a/src/components/InlineCodeBlock/index.native.js
+++ b/src/components/InlineCodeBlock/index.native.js
@@ -1,7 +1,7 @@
import React from 'react';
-import styles from '../../styles/styles';
-import WrappedText from './WrappedText';
+import styles from '@styles/styles';
import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
+import WrappedText from './WrappedText';
function InlineCodeBlock(props) {
const TDefaultRenderer = props.TDefaultRenderer;
diff --git a/src/components/InlineErrorText.js b/src/components/InlineErrorText.js
index ea701a3f6e8e..80438eea8b5f 100644
--- a/src/components/InlineErrorText.js
+++ b/src/components/InlineErrorText.js
@@ -1,7 +1,7 @@
-import _ from 'underscore';
-import React from 'react';
import PropTypes from 'prop-types';
-import styles from '../styles/styles';
+import React from 'react';
+import _ from 'underscore';
+import styles from '@styles/styles';
import Text from './Text';
const propTypes = {
diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
index 31d102590681..e9de0111cd23 100644
--- a/src/components/InlineSystemMessage.tsx
+++ b/src/components/InlineSystemMessage.tsx
@@ -1,10 +1,10 @@
import React from 'react';
import {View} from 'react-native';
-import styles from '../styles/styles';
-import theme from '../styles/themes/default';
-import Text from './Text';
-import * as Expensicons from './Icon/Expensicons';
+import styles from '@styles/styles';
+import theme from '@styles/themes/default';
import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
type InlineSystemMessageProps = {
/** Error to display */
diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js
index 044143774dd6..802ae373d22a 100644
--- a/src/components/InvertedFlatList/BaseInvertedFlatList.js
+++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js
@@ -1,10 +1,10 @@
+import PropTypes from 'prop-types';
import React, {forwardRef, useCallback, useRef} from 'react';
-import {View, FlatList as NativeFlatlist} from 'react-native';
+import {FlatList as NativeFlatlist, View} from 'react-native';
import _ from 'underscore';
-import PropTypes from 'prop-types';
-import * as CollectionUtils from '../../libs/CollectionUtils';
-import FlatList from '../FlatList';
-import variables from '../../styles/variables';
+import FlatList from '@components/FlatList';
+import * as CollectionUtils from '@libs/CollectionUtils';
+import variables from '@styles/variables';
const propTypes = {
/** Same as FlatList can be any array of anything */
diff --git a/src/components/InvertedFlatList/CellRendererComponent.js b/src/components/InvertedFlatList/CellRendererComponent.js
index 77397aeb4610..2b2d214000bf 100644
--- a/src/components/InvertedFlatList/CellRendererComponent.js
+++ b/src/components/InvertedFlatList/CellRendererComponent.js
@@ -1,6 +1,6 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
const propTypes = {
/** Position index of the list item in a list view */
diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js
index d328ca93575b..14b781759904 100644
--- a/src/components/InvertedFlatList/index.js
+++ b/src/components/InvertedFlatList/index.js
@@ -1,10 +1,10 @@
-import React, {forwardRef, useEffect, useRef} from 'react';
import PropTypes from 'prop-types';
+import React, {forwardRef, useEffect, useRef} from 'react';
import {DeviceEventEmitter, FlatList, StyleSheet} from 'react-native';
import _ from 'underscore';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import BaseInvertedFlatList from './BaseInvertedFlatList';
-import styles from '../../styles/styles';
-import CONST from '../../CONST';
const propTypes = {
/** Passed via forwardRef so we can access the FlatList ref */
diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
index ccee8bc4e6a0..d55417a6190a 100644
--- a/src/components/KYCWall/BaseKYCWall.js
+++ b/src/components/KYCWall/BaseKYCWall.js
@@ -1,19 +1,19 @@
-import _ from 'underscore';
+import lodashGet from 'lodash/get';
import React from 'react';
-import {withOnyx} from 'react-native-onyx';
import {Dimensions} from 'react-native';
-import lodashGet from 'lodash/get';
-import CONST from '../../CONST';
-import Navigation from '../../libs/Navigation/Navigation';
-import AddPaymentMethodMenu from '../AddPaymentMethodMenu';
-import getClickedTargetLocation from '../../libs/getClickedTargetLocation';
-import * as PaymentUtils from '../../libs/PaymentUtils';
-import * as PaymentMethods from '../../libs/actions/PaymentMethods';
-import ONYXKEYS from '../../ONYXKEYS';
-import Log from '../../libs/Log';
-import {propTypes, defaultProps} from './kycWallPropTypes';
-import * as Wallet from '../../libs/actions/Wallet';
-import * as ReportUtils from '../../libs/ReportUtils';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
+import getClickedTargetLocation from '@libs/getClickedTargetLocation';
+import Log from '@libs/Log';
+import Navigation from '@libs/Navigation/Navigation';
+import * as PaymentUtils from '@libs/PaymentUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as PaymentMethods from '@userActions/PaymentMethods';
+import * as Wallet from '@userActions/Wallet';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {defaultProps, propTypes} from './kycWallPropTypes';
// This component allows us to block various actions by forcing the user to first add a default payment method and successfully make it through our Know Your Customer flow
// before continuing to take whatever action they originally intended to take. It requires a button as a child and a native event so we can get the coordinates and use it
diff --git a/src/components/KYCWall/index.js b/src/components/KYCWall/index.js
index 81e7a2d37481..49329c73d474 100644
--- a/src/components/KYCWall/index.js
+++ b/src/components/KYCWall/index.js
@@ -1,6 +1,6 @@
import React from 'react';
-import {propTypes, defaultProps} from './kycWallPropTypes';
import BaseKYCWall from './BaseKYCWall';
+import {defaultProps, propTypes} from './kycWallPropTypes';
function KYCWall(props) {
return (
diff --git a/src/components/KYCWall/kycWallPropTypes.js b/src/components/KYCWall/kycWallPropTypes.js
index b585535784dc..58db2c1c1940 100644
--- a/src/components/KYCWall/kycWallPropTypes.js
+++ b/src/components/KYCWall/kycWallPropTypes.js
@@ -1,12 +1,12 @@
-import _ from 'underscore';
import PropTypes from 'prop-types';
-import userWalletPropTypes from '../../pages/EnablePayments/userWalletPropTypes';
-import bankAccountPropTypes from '../bankAccountPropTypes';
-import cardPropTypes from '../cardPropTypes';
-import iouReportPropTypes from '../../pages/iouReportPropTypes';
-import reimbursementAccountPropTypes from '../../pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes';
-import walletTermsPropTypes from '../../pages/EnablePayments/walletTermsPropTypes';
-import CONST from '../../CONST';
+import _ from 'underscore';
+import bankAccountPropTypes from '@components/bankAccountPropTypes';
+import cardPropTypes from '@components/cardPropTypes';
+import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
+import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
+import reimbursementAccountPropTypes from '@pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes';
+import CONST from '@src/CONST';
const propTypes = {
/** Route for the Add Bank Account screen for a given navigation stack */
diff --git a/src/components/KeyboardSpacer/BaseKeyboardSpacer.js b/src/components/KeyboardSpacer/BaseKeyboardSpacer.js
index 2066f3492373..adab3e2ea66d 100644
--- a/src/components/KeyboardSpacer/BaseKeyboardSpacer.js
+++ b/src/components/KeyboardSpacer/BaseKeyboardSpacer.js
@@ -1,7 +1,7 @@
-import React, {useState, useEffect, useCallback} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
import {Dimensions, Keyboard, View} from 'react-native';
-import * as StyleUtils from '../../styles/StyleUtils';
-import {propTypes, defaultProps} from './BaseKeyboardSpacerPropTypes';
+import * as StyleUtils from '@styles/StyleUtils';
+import {defaultProps, propTypes} from './BaseKeyboardSpacerPropTypes';
function BaseKeyboardSpacer(props) {
const [keyboardSpace, setKeyboardSpace] = useState(0);
diff --git a/src/components/KeyboardSpacer/index.android.js b/src/components/KeyboardSpacer/index.android.js
index 15755be70e31..d7c57f7d73c2 100644
--- a/src/components/KeyboardSpacer/index.android.js
+++ b/src/components/KeyboardSpacer/index.android.js
@@ -3,9 +3,9 @@
* view up with the keyboard allowing the user to see what they are typing.
*/
import React from 'react';
-import StatusBar from '../../libs/StatusBar';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import StatusBar from '@libs/StatusBar';
import BaseKeyboardSpacer from './BaseKeyboardSpacer';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
function KeyboardSpacer() {
return (
diff --git a/src/components/KeyboardSpacer/index.ios.js b/src/components/KeyboardSpacer/index.ios.js
index 63cae305c362..612ef75c290f 100644
--- a/src/components/KeyboardSpacer/index.ios.js
+++ b/src/components/KeyboardSpacer/index.ios.js
@@ -3,10 +3,10 @@
* keyboard allowing the user to see what they are typing.
*/
import React from 'react';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
import BaseKeyboardSpacer from './BaseKeyboardSpacer';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import * as StyleUtils from '../../styles/StyleUtils';
-import CONST from '../../CONST';
function KeyboardSpacer(props) {
return (
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 5e07b487c4f7..a06b3314e5a9 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
import React from 'react';
import {FlatList, View} from 'react-native';
import _ from 'underscore';
-import CONST from '../../CONST';
-import styles from '../../styles/styles';
-import variables from '../../styles/variables';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
import OptionRowLHNDataWithFocus from './OptionRowLHNDataWithFocus';
const propTypes = {
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 2b992e462e34..f83e0b834287 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -1,34 +1,34 @@
-import _ from 'underscore';
-import React, {useState, useRef, useCallback} from 'react';
-import PropTypes from 'prop-types';
-import {View, StyleSheet} from 'react-native';
-import lodashGet from 'lodash/get';
import {useFocusEffect} from '@react-navigation/native';
-import * as optionRowStyles from '../../styles/optionRowStyles';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
-import DateUtils from '../../libs/DateUtils';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import MultipleAvatars from '../MultipleAvatars';
-import Hoverable from '../Hoverable';
-import DisplayNames from '../DisplayNames';
-import Text from '../Text';
-import SubscriptAvatar from '../SubscriptAvatar';
-import CONST from '../../CONST';
-import themeColors from '../../styles/themes/default';
-import OfflineWithFeedback from '../OfflineWithFeedback';
-import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
-import * as ReportActionContextMenu from '../../pages/home/report/ContextMenu/ReportActionContextMenu';
-import * as ContextMenuActions from '../../pages/home/report/ContextMenu/ContextMenuActions';
-import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import * as ReportUtils from '../../libs/ReportUtils';
-import useLocalize from '../../hooks/useLocalize';
-import Permissions from '../../libs/Permissions';
-import Tooltip from '../Tooltip';
-import DomUtils from '../../libs/DomUtils';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
-import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import React, {useCallback, useRef, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import _ from 'underscore';
+import DisplayNames from '@components/DisplayNames';
+import Hoverable from '@components/Hoverable';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MultipleAvatars from '@components/MultipleAvatars';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
+import SubscriptAvatar from '@components/SubscriptAvatar';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import DateUtils from '@libs/DateUtils';
+import DomUtils from '@libs/DomUtils';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import Permissions from '@libs/Permissions';
+import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
+import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import * as optionRowStyles from '@styles/optionRowStyles';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
const propTypes = {
/** Style for hovered state */
diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js
index e93e3690138e..ebba2ffe0587 100644
--- a/src/components/LHNOptionsList/OptionRowLHNData.js
+++ b/src/components/LHNOptionsList/OptionRowLHNData.js
@@ -1,21 +1,20 @@
-import {withOnyx} from 'react-native-onyx';
+import {deepEqual} from 'fast-equals';
import lodashGet from 'lodash/get';
-import _ from 'underscore';
import PropTypes from 'prop-types';
-import React, {useEffect, useRef, useMemo} from 'react';
-import {deepEqual} from 'fast-equals';
-import SidebarUtils from '../../libs/SidebarUtils';
-import compose from '../../libs/compose';
-import ONYXKEYS from '../../ONYXKEYS';
-import OptionRowLHN, {propTypes as basePropTypes, defaultProps as baseDefaultProps} from './OptionRowLHN';
-import * as Report from '../../libs/actions/Report';
-import * as UserUtils from '../../libs/UserUtils';
-import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
-import * as TransactionUtils from '../../libs/TransactionUtils';
-
-import participantPropTypes from '../participantPropTypes';
-import CONST from '../../CONST';
-import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
+import React, {useEffect, useMemo, useRef} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import participantPropTypes from '@components/participantPropTypes';
+import compose from '@libs/compose';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import SidebarUtils from '@libs/SidebarUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import * as UserUtils from '@libs/UserUtils';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import * as Report from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import OptionRowLHN, {defaultProps as baseDefaultProps, propTypes as basePropTypes} from './OptionRowLHN';
const propTypes = {
/** Whether row should be focused */
diff --git a/src/components/LHNOptionsList/OptionRowLHNDataWithFocus.js b/src/components/LHNOptionsList/OptionRowLHNDataWithFocus.js
index 5e58be79e088..67e90bcbb0e0 100644
--- a/src/components/LHNOptionsList/OptionRowLHNDataWithFocus.js
+++ b/src/components/LHNOptionsList/OptionRowLHNDataWithFocus.js
@@ -1,6 +1,6 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import withCurrentReportID, {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps} from '../withCurrentReportID';
+import React from 'react';
+import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID';
import OptionRowLHNData from './OptionRowLHNData';
const propTypes = {
diff --git a/src/components/LocaleContextProvider.js b/src/components/LocaleContextProvider.js
index b8838f253e74..5fbb7716befe 100644
--- a/src/components/LocaleContextProvider.js
+++ b/src/components/LocaleContextProvider.js
@@ -1,17 +1,16 @@
-import React, {createContext, useMemo} from 'react';
+import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
+import React, {createContext, useMemo} from 'react';
import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
-
-import ONYXKEYS from '../ONYXKEYS';
-import * as Localize from '../libs/Localize';
-import DateUtils from '../libs/DateUtils';
-import * as NumberFormatUtils from '../libs/NumberFormatUtils';
-import * as LocaleDigitUtils from '../libs/LocaleDigitUtils';
-import CONST from '../CONST';
-import compose from '../libs/compose';
+import compose from '@libs/compose';
+import DateUtils from '@libs/DateUtils';
+import * as LocaleDigitUtils from '@libs/LocaleDigitUtils';
+import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
+import * as Localize from '@libs/Localize';
+import * as NumberFormatUtils from '@libs/NumberFormatUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import withCurrentUserPersonalDetails from './withCurrentUserPersonalDetails';
-import * as LocalePhoneNumber from '../libs/LocalePhoneNumber';
const LocaleContext = createContext(null);
diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js
index 435f88e51e53..2c5a6e7b7ec6 100644
--- a/src/components/LocalePicker.js
+++ b/src/components/LocalePicker.js
@@ -1,15 +1,15 @@
-import _ from 'underscore';
+import PropTypes from 'prop-types';
import React from 'react';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
-import compose from '../libs/compose';
-import * as App from '../libs/actions/App';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import ONYXKEYS from '../ONYXKEYS';
-import CONST from '../CONST';
+import _ from 'underscore';
+import compose from '@libs/compose';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import * as App from '@userActions/App';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import Picker from './Picker';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
/** Indicates which locale the user currently has selected */
diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
index 3a638f3e999e..786588993cd8 100644
--- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
+++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
@@ -1,16 +1,16 @@
import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import CONST from '../../CONST';
-import colors from '../../styles/colors';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import Text from '../Text';
-import TextLink from '../TextLink';
-import Tooltip from '../Tooltip';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import Tooltip from '@components/Tooltip';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import colors from '@styles/colors';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
const propTypes = {
diff --git a/src/components/LocationErrorMessage/index.js b/src/components/LocationErrorMessage/index.js
index e8ec402401cf..60fb4489799e 100644
--- a/src/components/LocationErrorMessage/index.js
+++ b/src/components/LocationErrorMessage/index.js
@@ -1,6 +1,6 @@
import React from 'react';
import {Linking} from 'react-native';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import BaseLocationErrorMessage from './BaseLocationErrorMessage';
import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
diff --git a/src/components/Lottie/Lottie.tsx b/src/components/Lottie/Lottie.tsx
index 97c7e8fffdd1..cf689224278f 100644
--- a/src/components/Lottie/Lottie.tsx
+++ b/src/components/Lottie/Lottie.tsx
@@ -1,6 +1,6 @@
-import React, {forwardRef} from 'react';
import LottieView, {LottieViewProps} from 'lottie-react-native';
-import styles from '../../styles/styles';
+import React, {forwardRef} from 'react';
+import styles from '@styles/styles';
const Lottie = forwardRef((props: LottieViewProps, ref) => (
= styles.mapDirectionLayer.layout;
const layerPointStyle: Record = styles.mapDirectionLayer.paint;
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index 5f791112da62..c91dc63a3bd1 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -1,15 +1,13 @@
-import {View} from 'react-native';
import {useFocusEffect, useNavigation} from '@react-navigation/native';
import Mapbox, {MapState, MarkerView, setAccessToken} from '@rnmapbox/maps';
import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
-import styles from '../../styles/styles';
-
+import {View} from 'react-native';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import Direction from './Direction';
+import {MapViewHandle, MapViewProps} from './MapViewTypes';
import responder from './responder';
import utils from './utils';
-import Direction from './Direction';
-import CONST from '../../CONST';
-
-import {MapViewProps, MapViewHandle} from './MapViewTypes';
const MapView = forwardRef(({accessToken, style, mapPadding, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady}, ref) => {
const cameraRef = useRef(null);
diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
index 78c5a9175594..fe240c1f5121 100644
--- a/src/components/MapView/MapView.web.tsx
+++ b/src/components/MapView/MapView.web.tsx
@@ -2,22 +2,18 @@
// This is why we have separate components for web and native to handle the specific implementations.
// For the web version, we use the Mapbox Web library called react-map-gl, while for the native mobile version,
// we utilize a different Mapbox library @rnmapbox/maps tailored for mobile development.
-
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react';
-import {View} from 'react-native';
import Map, {MapRef, Marker} from 'react-map-gl';
-import mapboxgl from 'mapbox-gl';
-
-import responder from './responder';
-import utils from './utils';
-
-import CONST from '../../CONST';
-import * as StyleUtils from '../../styles/StyleUtils';
-import themeColors from '../../styles/themes/default';
+import {View} from 'react-native';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import Direction from './Direction';
import {MapViewHandle, MapViewProps} from './MapViewTypes';
-
-import 'mapbox-gl/dist/mapbox-gl.css';
+import responder from './responder';
+import utils from './utils';
const MapView = forwardRef(
({style, styleURL, waypoints, mapPadding, accessToken, directionCoordinates, initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM}}, ref) => {
diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx
index d97d4aaee16f..8a6799035fec 100644
--- a/src/components/MapView/PendingMapView.tsx
+++ b/src/components/MapView/PendingMapView.tsx
@@ -1,12 +1,12 @@
+import _ from 'lodash';
import React from 'react';
import {View} from 'react-native';
-import _ from 'lodash';
-import variables from '../../styles/variables';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
+import BlockingView from '@components/BlockingViews/BlockingView';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
import {PendingMapViewProps} from './MapViewTypes';
-import BlockingView from '../BlockingViews/BlockingView';
-import * as Expensicons from '../Icon/Expensicons';
function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) {
const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle);
diff --git a/src/components/MapView/responder/index.ts b/src/components/MapView/responder/index.ts
index c4c325444f70..f417f7769ae8 100644
--- a/src/components/MapView/responder/index.ts
+++ b/src/components/MapView/responder/index.ts
@@ -1,3 +1,3 @@
-import SwipeInterceptPanResponder from '../../SwipeInterceptPanResponder';
+import SwipeInterceptPanResponder from '@components/SwipeInterceptPanResponder';
export default SwipeInterceptPanResponder;
diff --git a/src/components/MentionSuggestions.js b/src/components/MentionSuggestions.js
index 6c0803ca9d64..d18b8947e68d 100644
--- a/src/components/MentionSuggestions.js
+++ b/src/components/MentionSuggestions.js
@@ -1,16 +1,16 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import _ from 'underscore';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import * as StyleUtils from '../styles/StyleUtils';
-import Text from './Text';
-import CONST from '../CONST';
-import Avatar from './Avatar';
+import getStyledTextArray from '@libs/GetStyledTextArray';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import AutoCompleteSuggestions from './AutoCompleteSuggestions';
-import getStyledTextArray from '../libs/GetStyledTextArray';
+import Avatar from './Avatar';
import avatarPropTypes from './avatarPropTypes';
+import Text from './Text';
const propTypes = {
/** The index of the highlighted mention */
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 3c52c41f1992..08535f1724fb 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -1,31 +1,31 @@
-import _ from 'underscore';
+import ExpensiMark from 'expensify-common/lib/ExpensiMark';
import React, {useEffect, useMemo} from 'react';
import {View} from 'react-native';
-import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import Text from './Text';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import * as StyleUtils from '../styles/StyleUtils';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import getButtonState from '../libs/getButtonState';
-import convertToLTR from '../libs/convertToLTR';
+import _ from 'underscore';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import ControlSelection from '@libs/ControlSelection';
+import convertToLTR from '@libs/convertToLTR';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
import Avatar from './Avatar';
import Badge from './Badge';
-import CONST from '../CONST';
+import DisplayNames from './DisplayNames';
+import Hoverable from './Hoverable';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
import menuItemPropTypes from './menuItemPropTypes';
-import SelectCircle from './SelectCircle';
import MultipleAvatars from './MultipleAvatars';
-import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
-import * as DeviceCapabilities from '../libs/DeviceCapabilities';
-import ControlSelection from '../libs/ControlSelection';
-import variables from '../styles/variables';
-import * as Session from '../libs/actions/Session';
-import Hoverable from './Hoverable';
-import useWindowDimensions from '../hooks/useWindowDimensions';
import RenderHTML from './RenderHTML';
-import DisplayNames from './DisplayNames';
+import SelectCircle from './SelectCircle';
+import Text from './Text';
const propTypes = menuItemPropTypes;
diff --git a/src/components/MenuItemList.js b/src/components/MenuItemList.js
index 19253ce8bd94..b9f2e6fc228b 100644
--- a/src/components/MenuItemList.js
+++ b/src/components/MenuItemList.js
@@ -1,11 +1,11 @@
+import PropTypes from 'prop-types';
import React from 'react';
import _ from 'underscore';
-import PropTypes from 'prop-types';
-import useSingleExecution from '../hooks/useSingleExecution';
+import useSingleExecution from '@hooks/useSingleExecution';
+import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActions';
+import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
import MenuItem from './MenuItem';
import menuItemPropTypes from './menuItemPropTypes';
-import * as ReportActionContextMenu from '../pages/home/report/ContextMenu/ReportActionContextMenu';
-import {CONTEXT_MENU_TYPES} from '../pages/home/report/ContextMenu/ContextMenuActions';
const propTypes = {
/** An array of props that are pass to individual MenuItem components */
diff --git a/src/components/MenuItemWithTopDescription.js b/src/components/MenuItemWithTopDescription.js
index 94f44a1869b6..8215b7eb3a19 100644
--- a/src/components/MenuItemWithTopDescription.js
+++ b/src/components/MenuItemWithTopDescription.js
@@ -1,6 +1,6 @@
import React from 'react';
-import menuItemPropTypes from './menuItemPropTypes';
import MenuItem from './MenuItem';
+import menuItemPropTypes from './menuItemPropTypes';
const propTypes = menuItemPropTypes;
diff --git a/src/components/MessagesRow.js b/src/components/MessagesRow.js
new file mode 100644
index 000000000000..b843e0dfa61e
--- /dev/null
+++ b/src/components/MessagesRow.js
@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
+import DotIndicatorMessage from './DotIndicatorMessage';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import Tooltip from './Tooltip';
+
+const propTypes = {
+ /* The messages to display */
+ messages: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))])),
+
+ /* The type of message, 'error' shows a red dot, 'success' shows a green dot */
+ type: PropTypes.oneOf(['error', 'success']).isRequired,
+
+ /** A function to run when the X button next to the message is clicked */
+ onClose: PropTypes.func,
+
+ /** Additional style object for the container */
+ containerStyles: stylePropTypes,
+
+ /** Whether we can dismiss the messages */
+ canDismiss: PropTypes.bool,
+};
+
+const defaultProps = {
+ messages: {},
+ onClose: () => {},
+ containerStyles: [],
+ canDismiss: true,
+};
+
+function MessagesRow({messages, type, onClose, containerStyles, canDismiss}) {
+ const {translate} = useLocalize();
+ if (_.isEmpty(messages)) {
+ return null;
+ }
+
+ return (
+
+
+ {canDismiss && (
+
+
+
+
+
+ )}
+
+ );
+}
+
+MessagesRow.propTypes = propTypes;
+MessagesRow.defaultProps = defaultProps;
+MessagesRow.displayName = 'MessagesRow';
+
+export default MessagesRow;
diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
index d1a906efc951..6ed3b16c676d 100644
--- a/src/components/Modal/BaseModal.js
+++ b/src/components/Modal/BaseModal.js
@@ -1,20 +1,20 @@
+import PropTypes from 'prop-types';
import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import ReactNativeModal from 'react-native-modal';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import styles from '../../styles/styles';
-import * as Modal from '../../libs/actions/Modal';
-import * as StyleUtils from '../../styles/StyleUtils';
-import themeColors from '../../styles/themes/default';
-import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './modalPropTypes';
-import getModalStyles from '../../styles/getModalStyles';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
-import variables from '../../styles/variables';
-import CONST from '../../CONST';
-import ComposerFocusManager from '../../libs/ComposerFocusManager';
-import useNativeDriver from '../../libs/useNativeDriver';
-import usePrevious from '../../hooks/usePrevious';
+import usePrevious from '@hooks/usePrevious';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
+import useNativeDriver from '@libs/useNativeDriver';
+import getModalStyles from '@styles/getModalStyles';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import * as Modal from '@userActions/Modal';
+import CONST from '@src/CONST';
+import {defaultProps as modalDefaultProps, propTypes as modalPropTypes} from './modalPropTypes';
const propTypes = {
...modalPropTypes,
diff --git a/src/components/Modal/index.android.js b/src/components/Modal/index.android.js
index b5f11a02650a..51745ae6a20f 100644
--- a/src/components/Modal/index.android.js
+++ b/src/components/Modal/index.android.js
@@ -1,9 +1,9 @@
import React from 'react';
import {AppState} from 'react-native';
-import withWindowDimensions from '../withWindowDimensions';
+import withWindowDimensions from '@components/withWindowDimensions';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
import BaseModal from './BaseModal';
-import {propTypes, defaultProps} from './modalPropTypes';
-import ComposerFocusManager from '../../libs/ComposerFocusManager';
+import {defaultProps, propTypes} from './modalPropTypes';
AppState.addEventListener('focus', () => {
ComposerFocusManager.setReadyToFocus();
diff --git a/src/components/Modal/index.ios.js b/src/components/Modal/index.ios.js
index d8206d12532d..38f477e2049b 100644
--- a/src/components/Modal/index.ios.js
+++ b/src/components/Modal/index.ios.js
@@ -1,7 +1,7 @@
import React from 'react';
-import withWindowDimensions from '../withWindowDimensions';
+import withWindowDimensions from '@components/withWindowDimensions';
import BaseModal from './BaseModal';
-import {propTypes, defaultProps} from './modalPropTypes';
+import {defaultProps, propTypes} from './modalPropTypes';
function Modal(props) {
return (
diff --git a/src/components/Modal/index.web.js b/src/components/Modal/index.web.js
index 065b3a9f210f..3bea0eb58aa9 100644
--- a/src/components/Modal/index.web.js
+++ b/src/components/Modal/index.web.js
@@ -1,11 +1,11 @@
import React, {useState} from 'react';
-import withWindowDimensions from '../withWindowDimensions';
+import withWindowDimensions from '@components/withWindowDimensions';
+import StatusBar from '@libs/StatusBar';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import BaseModal from './BaseModal';
-import {propTypes, defaultProps} from './modalPropTypes';
-import * as StyleUtils from '../../styles/StyleUtils';
-import themeColors from '../../styles/themes/default';
-import StatusBar from '../../libs/StatusBar';
-import CONST from '../../CONST';
+import {defaultProps, propTypes} from './modalPropTypes';
function Modal(props) {
const [previousStatusBarColor, setPreviousStatusBarColor] = useState();
diff --git a/src/components/Modal/modalPropTypes.js b/src/components/Modal/modalPropTypes.js
index 58de5a6c57ca..84e610b694e4 100644
--- a/src/components/Modal/modalPropTypes.js
+++ b/src/components/Modal/modalPropTypes.js
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import _ from 'underscore';
-import CONST from '../../CONST';
-import {windowDimensionsPropTypes} from '../withWindowDimensions';
-import stylePropTypes from '../../styles/stylePropTypes';
+import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import stylePropTypes from '@styles/stylePropTypes';
+import CONST from '@src/CONST';
const propTypes = {
/** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
index ab0b77c21653..a8fb5390ebb6 100644
--- a/src/components/MoneyReportHeader.js
+++ b/src/components/MoneyReportHeader.js
@@ -1,28 +1,28 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React, {useMemo} from 'react';
-import _ from 'underscore';
-import {withOnyx} from 'react-native-onyx';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import useLocalize from '../hooks/useLocalize';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
+import compose from '@libs/compose';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
+import nextStepPropTypes from '@pages/nextStepPropTypes';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import * as IOU from '@userActions/IOU';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import Button from './Button';
import HeaderWithBackButton from './HeaderWithBackButton';
-import iouReportPropTypes from '../pages/iouReportPropTypes';
-import * as ReportUtils from '../libs/ReportUtils';
-import participantPropTypes from './participantPropTypes';
-import styles from '../styles/styles';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import compose from '../libs/compose';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import ONYXKEYS from '../ONYXKEYS';
-import CONST from '../CONST';
import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
+import participantPropTypes from './participantPropTypes';
import SettlementButton from './SettlementButton';
-import Button from './Button';
-import * as IOU from '../libs/actions/IOU';
-import * as CurrencyUtils from '../libs/CurrencyUtils';
-import reportPropTypes from '../pages/reportPropTypes';
-import nextStepPropTypes from '../pages/nextStepPropTypes';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
const propTypes = {
/** The report currently being looked at */
diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js
index 9c4362b620d1..db6502aa0119 100644
--- a/src/components/MoneyReportHeaderStatusBar.js
+++ b/src/components/MoneyReportHeaderStatusBar.js
@@ -1,10 +1,10 @@
import React, {useMemo} from 'react';
import {Text, View} from 'react-native';
import _ from 'underscore';
-import styles from '../styles/styles';
-import * as NextStepUtils from '../libs/NextStepUtils';
-import useLocalize from '../hooks/useLocalize';
-import nextStepPropTypes from '../pages/nextStepPropTypes';
+import useLocalize from '@hooks/useLocalize';
+import * as NextStepUtils from '@libs/NextStepUtils';
+import nextStepPropTypes from '@pages/nextStepPropTypes';
+import styles from '@styles/styles';
import RenderHTML from './RenderHTML';
const propTypes = {
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index fd3a89d14c86..b60e950b2bbf 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -1,49 +1,49 @@
-import React, {useCallback, useMemo, useReducer, useState, useEffect} from 'react';
+import {useIsFocused} from '@react-navigation/native';
+import {format} from 'date-fns';
+import {isEmpty} from 'lodash';
+import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useMemo, useReducer, useState} from 'react';
+import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
-import {format} from 'date-fns';
import _ from 'underscore';
-import {View} from 'react-native';
-import lodashGet from 'lodash/get';
-import {useIsFocused} from '@react-navigation/native';
-import {isEmpty} from 'lodash';
-import Text from './Text';
-import styles from '../styles/styles';
-import * as ReportUtils from '../libs/ReportUtils';
-import * as OptionsListUtils from '../libs/OptionsListUtils';
-import Permissions from '../libs/Permissions';
-import OptionsSelector from './OptionsSelector';
-import ONYXKEYS from '../ONYXKEYS';
-import compose from '../libs/compose';
-import CONST from '../CONST';
-import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
-import Log from '../libs/Log';
-import SettlementButton from './SettlementButton';
-import ROUTES from '../ROUTES';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from './withCurrentUserPersonalDetails';
-import * as IOUUtils from '../libs/IOUUtils';
-import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import Navigation from '../libs/Navigation/Navigation';
-import optionPropTypes from './optionPropTypes';
-import * as CurrencyUtils from '../libs/CurrencyUtils';
+import useLocalize from '@hooks/useLocalize';
+import compose from '@libs/compose';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import DistanceRequestUtils from '@libs/DistanceRequestUtils';
+import * as IOUUtils from '@libs/IOUUtils';
+import Log from '@libs/Log';
+import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import Permissions from '@libs/Permissions';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import * as ReceiptUtils from '@libs/ReceiptUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import * as IOU from '@userActions/IOU';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import Button from './Button';
+import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
+import categoryPropTypes from './categoryPropTypes';
+import ConfirmedRoute from './ConfirmedRoute';
+import FormHelpMessage from './FormHelpMessage';
import * as Expensicons from './Icon/Expensicons';
-import themeColors from '../styles/themes/default';
import Image from './Image';
-import useLocalize from '../hooks/useLocalize';
-import * as ReceiptUtils from '../libs/ReceiptUtils';
-import categoryPropTypes from './categoryPropTypes';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import optionPropTypes from './optionPropTypes';
+import OptionsSelector from './OptionsSelector';
+import SettlementButton from './SettlementButton';
import Switch from './Switch';
import tagPropTypes from './tagPropTypes';
-import ConfirmedRoute from './ConfirmedRoute';
+import Text from './Text';
import transactionPropTypes from './transactionPropTypes';
-import DistanceRequestUtils from '../libs/DistanceRequestUtils';
-import FormHelpMessage from './FormHelpMessage';
-import * as IOU from '../libs/actions/IOU';
-import * as TransactionUtils from '../libs/TransactionUtils';
-import * as PolicyUtils from '../libs/PolicyUtils';
-import * as MoneyRequestUtils from '../libs/MoneyRequestUtils';
-import {iouDefaultProps, iouPropTypes} from '../pages/iou/propTypes';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from './withCurrentUserPersonalDetails';
const propTypes = {
/** Callback to inform parent modal of success */
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 086e1429baef..cbadbf40ff5c 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -1,29 +1,29 @@
-import React, {useState, useCallback, useEffect} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useState} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import compose from '@libs/compose';
+import * as HeaderUtils from '@libs/HeaderUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
+import styles from '@styles/styles';
+import * as IOU from '@userActions/IOU';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import ConfirmModal from './ConfirmModal';
import HeaderWithBackButton from './HeaderWithBackButton';
-import iouReportPropTypes from '../pages/iouReportPropTypes';
-import * as ReportUtils from '../libs/ReportUtils';
-import compose from '../libs/compose';
import * as Expensicons from './Icon/Expensicons';
-import participantPropTypes from './participantPropTypes';
-import styles from '../styles/styles';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import CONST from '../CONST';
-import ONYXKEYS from '../ONYXKEYS';
-import * as IOU from '../libs/actions/IOU';
-import ConfirmModal from './ConfirmModal';
-import useLocalize from '../hooks/useLocalize';
import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
-import * as TransactionUtils from '../libs/TransactionUtils';
-import * as ReportActionsUtils from '../libs/ReportActionsUtils';
-import * as HeaderUtils from '../libs/HeaderUtils';
-import reportActionPropTypes from '../pages/home/report/reportActionPropTypes';
+import participantPropTypes from './participantPropTypes';
import transactionPropTypes from './transactionPropTypes';
-import useWindowDimensions from '../hooks/useWindowDimensions';
const propTypes = {
/** The report currently being looked at */
diff --git a/src/components/MoneyRequestHeaderStatusBar.js b/src/components/MoneyRequestHeaderStatusBar.js
index 31a6e9c0e897..f217d7fc2426 100644
--- a/src/components/MoneyRequestHeaderStatusBar.js
+++ b/src/components/MoneyRequestHeaderStatusBar.js
@@ -1,7 +1,7 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
+import styles from '@styles/styles';
import Text from './Text';
const propTypes = {
diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js
index 50a7b56b91e3..e03cb78972cf 100644
--- a/src/components/MoneyRequestSkeletonView.js
+++ b/src/components/MoneyRequestSkeletonView.js
@@ -1,9 +1,9 @@
import React from 'react';
-import {Rect} from 'react-native-svg';
import SkeletonViewContentLoader from 'react-content-loader/native';
-import variables from '../styles/variables';
-import themeColors from '../styles/themes/default';
-import styles from '../styles/styles';
+import {Rect} from 'react-native-svg';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
function MoneyRequestSkeletonView() {
return (
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index 8866d61d3870..85b6f7995693 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -1,16 +1,16 @@
-import React, {memo, useMemo} from 'react';
import PropTypes from 'prop-types';
+import React, {memo, useMemo} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import styles from '../styles/styles';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
import Avatar from './Avatar';
-import Tooltip from './Tooltip';
-import Text from './Text';
-import themeColors from '../styles/themes/default';
-import * as StyleUtils from '../styles/StyleUtils';
-import CONST from '../CONST';
-import variables from '../styles/variables';
import avatarPropTypes from './avatarPropTypes';
+import Text from './Text';
+import Tooltip from './Tooltip';
import UserDetailsTooltip from './UserDetailsTooltip';
const propTypes = {
diff --git a/src/components/NewDatePicker/CalendarPicker/ArrowIcon.js b/src/components/NewDatePicker/CalendarPicker/ArrowIcon.js
index 6d5757323480..cb680a8bc43b 100644
--- a/src/components/NewDatePicker/CalendarPicker/ArrowIcon.js
+++ b/src/components/NewDatePicker/CalendarPicker/ArrowIcon.js
@@ -1,11 +1,11 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../../../styles/styles';
-import * as Expensicons from '../../Icon/Expensicons';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import Icon from '../../Icon';
-import CONST from '../../../CONST';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
const propTypes = {
/** Specifies if the arrow icon should be disabled or not. */
diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
index 9825109fbb63..5489a9244f68 100644
--- a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
+++ b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
@@ -1,14 +1,14 @@
-import React, {useEffect, useMemo, useState} from 'react';
import PropTypes from 'prop-types';
+import React, {useEffect, useMemo, useState} from 'react';
import _ from 'underscore';
-import HeaderWithBackButton from '../../HeaderWithBackButton';
-import CONST from '../../../CONST';
-import SelectionList from '../../SelectionList';
-import Modal from '../../Modal';
-import {radioListItemPropTypes} from '../../SelectionList/selectionListPropTypes';
-import useLocalize from '../../../hooks/useLocalize';
-import ScreenWrapper from '../../ScreenWrapper';
-import styles from '../../../styles/styles';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import {radioListItemPropTypes} from '@components/SelectionList/selectionListPropTypes';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
const propTypes = {
/** Whether the modal is visible */
diff --git a/src/components/NewDatePicker/CalendarPicker/generateMonthMatrix.js b/src/components/NewDatePicker/CalendarPicker/generateMonthMatrix.js
index 7a3c55305a33..a3497654feec 100644
--- a/src/components/NewDatePicker/CalendarPicker/generateMonthMatrix.js
+++ b/src/components/NewDatePicker/CalendarPicker/generateMonthMatrix.js
@@ -1,4 +1,4 @@
-import {getDaysInMonth, startOfMonth, getDay, addDays, format} from 'date-fns';
+import {addDays, format, getDay, getDaysInMonth, startOfMonth} from 'date-fns';
/**
* Generates a matrix representation of a month's calendar given the year and month.
diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/NewDatePicker/CalendarPicker/index.js
index d03c36997845..0300b4bf476f 100644
--- a/src/components/NewDatePicker/CalendarPicker/index.js
+++ b/src/components/NewDatePicker/CalendarPicker/index.js
@@ -1,20 +1,20 @@
-import _ from 'underscore';
-import React from 'react';
-import {View} from 'react-native';
+import Str from 'expensify-common/lib/str';
import moment from 'moment';
import PropTypes from 'prop-types';
-import Str from 'expensify-common/lib/str';
-import Text from '../../Text';
-import YearPickerModal from './YearPickerModal';
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
import ArrowIcon from './ArrowIcon';
-import styles from '../../../styles/styles';
import generateMonthMatrix from './generateMonthMatrix';
-import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
-import CONST from '../../../CONST';
-import getButtonState from '../../../libs/getButtonState';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import PressableWithFeedback from '../../Pressable/PressableWithFeedback';
-import PressableWithoutFeedback from '../../Pressable/PressableWithoutFeedback';
+import YearPickerModal from './YearPickerModal';
const propTypes = {
/** An initial value of date string */
diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js
index 3201388790c9..30e15ac43bfc 100644
--- a/src/components/NewDatePicker/index.js
+++ b/src/components/NewDatePicker/index.js
@@ -1,16 +1,16 @@
-import React, {useEffect, useState} from 'react';
-import {View} from 'react-native';
+import _ from 'lodash';
import moment from 'moment';
import PropTypes from 'prop-types';
-import _ from 'lodash';
-import TextInput from '../TextInput';
-import CONST from '../../CONST';
-import styles from '../../styles/styles';
-import * as Expensicons from '../Icon/Expensicons';
-import {defaultProps as defaultBaseTextInputPropTypes, propTypes as baseTextInputPropTypes} from '../TextInput/baseTextInputPropTypes';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import React, {useEffect, useState} from 'react';
+import {View} from 'react-native';
+import InputWrapper from '@components/Form/InputWrapper';
+import * as Expensicons from '@components/Icon/Expensicons';
+import TextInput from '@components/TextInput';
+import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '@components/TextInput/baseTextInputPropTypes';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import CalendarPicker from './CalendarPicker';
-import InputWrapper from '../Form/InputWrapper';
const propTypes = {
/**
diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index 43cd374421ea..f120fe535834 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -1,16 +1,16 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import {withNetwork} from './OnyxProvider';
-import networkPropTypes from './networkPropTypes';
+import compose from '@libs/compose';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import variables from '@styles/variables';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
-import variables from '../styles/variables';
+import networkPropTypes from './networkPropTypes';
+import {withNetwork} from './OnyxProvider';
import Text from './Text';
-import styles from '../styles/styles';
-import compose from '../libs/compose';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import * as StyleUtils from '../styles/StyleUtils';
import withWindowDimensions from './withWindowDimensions';
const propTypes = {
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index 643e7b2f4a2f..ba893aeb2fe4 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -1,19 +1,14 @@
-import _ from 'underscore';
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import CONST from '../CONST';
-import stylePropTypes from '../styles/stylePropTypes';
-import styles from '../styles/styles';
-import Tooltip from './Tooltip';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import * as StyleUtils from '../styles/StyleUtils';
-import DotIndicatorMessage from './DotIndicatorMessage';
-import shouldRenderOffscreen from '../libs/shouldRenderOffscreen';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
-import useLocalize from '../hooks/useLocalize';
-import useNetwork from '../hooks/useNetwork';
+import _ from 'underscore';
+import useNetwork from '@hooks/useNetwork';
+import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
+import MessagesRow from './MessagesRow';
/**
* This component should be used when we are using the offline pattern B (offline with feedback).
@@ -97,7 +92,6 @@ function applyStrikeThrough(children) {
}
function OfflineWithFeedback(props) {
- const {translate} = useLocalize();
const {isOffline} = useNetwork();
const hasErrors = !_.isEmpty(props.errors);
@@ -128,25 +122,13 @@ function OfflineWithFeedback(props) {
)}
{props.shouldShowErrorMessages && hasErrorMessages && (
-
-
- {props.canDismissError && (
-
-
-
-
-
- )}
-
+
)}
);
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index 394996331d5e..5c0f83902e55 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -1,16 +1,16 @@
-import _ from 'underscore';
-import './index.css';
import lodashGet from 'lodash/get';
-import React, {useEffect, forwardRef} from 'react';
import * as OnfidoSDK from 'onfido-sdk-ui';
+import React, {forwardRef, useEffect} from 'react';
+import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
+import Log from '@libs/Log';
+import fontFamily from '@styles/fontFamily';
+import fontWeightBold from '@styles/fontWeight/bold';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import './index.css';
import onfidoPropTypes from './onfidoPropTypes';
-import CONST from '../../CONST';
-import variables from '../../styles/variables';
-import themeColors from '../../styles/themes/default';
-import fontWeightBold from '../../styles/fontWeight/bold';
-import fontFamily from '../../styles/fontFamily';
-import Log from '../../libs/Log';
-import useLocalize from '../../hooks/useLocalize';
function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLocale, translate}) {
OnfidoSDK.init({
diff --git a/src/components/Onfido/index.native.js b/src/components/Onfido/index.native.js
index 424e370b5fe6..ed0578187d3c 100644
--- a/src/components/Onfido/index.native.js
+++ b/src/components/Onfido/index.native.js
@@ -1,13 +1,13 @@
-import _ from 'underscore';
+import {OnfidoCaptureType, OnfidoCountryCode, OnfidoDocumentType, Onfido as OnfidoSDK} from '@onfido/react-native-sdk';
import lodashGet from 'lodash/get';
import React, {useEffect} from 'react';
import {Alert, Linking} from 'react-native';
-import {Onfido as OnfidoSDK, OnfidoCaptureType, OnfidoDocumentType, OnfidoCountryCode} from '@onfido/react-native-sdk';
+import _ from 'underscore';
+import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import useLocalize from '@hooks/useLocalize';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
import onfidoPropTypes from './onfidoPropTypes';
-import CONST from '../../CONST';
-import Log from '../../libs/Log';
-import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import useLocalize from '../../hooks/useLocalize';
function Onfido({sdkToken, onUserExit, onSuccess, onError}) {
const {translate} = useLocalize();
diff --git a/src/components/Onfido/index.website.js b/src/components/Onfido/index.website.js
index 23e59fb1e08f..12ad1edd8fb9 100644
--- a/src/components/Onfido/index.website.js
+++ b/src/components/Onfido/index.website.js
@@ -1,5 +1,5 @@
-import React, {useEffect, useRef} from 'react';
import lodashGet from 'lodash/get';
+import React, {useEffect, useRef} from 'react';
import BaseOnfidoWeb from './BaseOnfidoWeb';
import onfidoPropTypes from './onfidoPropTypes';
diff --git a/src/components/OnyxProvider.tsx b/src/components/OnyxProvider.tsx
index 8682e832debc..1009a74ef1f7 100644
--- a/src/components/OnyxProvider.tsx
+++ b/src/components/OnyxProvider.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import ONYXKEYS from '../ONYXKEYS';
-import createOnyxContext from './createOnyxContext';
+import ONYXKEYS from '@src/ONYXKEYS';
import ComposeProviders from './ComposeProviders';
+import createOnyxContext from './createOnyxContext';
// Set up any providers for individual keys. This should only be used in cases where many components will subscribe to
// the same key (e.g. FlatList renderItem components)
diff --git a/src/components/OpacityView.js b/src/components/OpacityView.js
index daef93cdc09b..ebd261916e65 100644
--- a/src/components/OpacityView.js
+++ b/src/components/OpacityView.js
@@ -1,9 +1,9 @@
+import PropTypes from 'prop-types';
import React from 'react';
import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
-import PropTypes from 'prop-types';
-import variables from '../styles/variables';
-import * as StyleUtils from '../styles/StyleUtils';
-import shouldRenderOffscreen from '../libs/shouldRenderOffscreen';
+import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
+import * as StyleUtils from '@styles/StyleUtils';
+import variables from '@styles/variables';
const propTypes = {
/**
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index e3ea3acfc2ee..4939c5bac431 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -1,27 +1,27 @@
-import _ from 'underscore';
import lodashGet from 'lodash/get';
-import React, {useState, useEffect, useRef} from 'react';
import PropTypes from 'prop-types';
-import {View, StyleSheet, InteractionManager} from 'react-native';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import optionPropTypes from './optionPropTypes';
+import React, {useEffect, useRef, useState} from 'react';
+import {InteractionManager, StyleSheet, View} from 'react-native';
+import _ from 'underscore';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
+import Button from './Button';
+import DisplayNames from './DisplayNames';
+import Hoverable from './Hoverable';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
-import Button from './Button';
import MultipleAvatars from './MultipleAvatars';
-import Hoverable from './Hoverable';
-import DisplayNames from './DisplayNames';
-import themeColors from '../styles/themes/default';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import Text from './Text';
-import SelectCircle from './SelectCircle';
-import SubscriptAvatar from './SubscriptAvatar';
import OfflineWithFeedback from './OfflineWithFeedback';
-import CONST from '../CONST';
-import * as ReportUtils from '../libs/ReportUtils';
+import optionPropTypes from './optionPropTypes';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import * as OptionsListUtils from '../libs/OptionsListUtils';
+import SelectCircle from './SelectCircle';
+import SubscriptAvatar from './SubscriptAvatar';
+import Text from './Text';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
/** Style for hovered state */
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index 91fd77dbea30..c7d378cde6e3 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -1,15 +1,15 @@
-import _ from 'underscore';
-import React, {useRef, useEffect, forwardRef, memo} from 'react';
-import {View} from 'react-native';
import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import variables from '../../styles/variables';
-import OptionRow from '../OptionRow';
-import SectionList from '../SectionList';
-import Text from '../Text';
-import {propTypes as optionsListPropTypes, defaultProps as optionsListDefaultProps} from './optionsListPropTypes';
-import OptionsListSkeletonView from '../OptionsListSkeletonView';
-import usePrevious from '../../hooks/usePrevious';
+import React, {forwardRef, memo, useEffect, useRef} from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import OptionRow from '@components/OptionRow';
+import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
+import SectionList from '@components/SectionList';
+import Text from '@components/Text';
+import usePrevious from '@hooks/usePrevious';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
+import {defaultProps as optionsListDefaultProps, propTypes as optionsListPropTypes} from './optionsListPropTypes';
const propTypes = {
/** Determines whether the keyboard gets dismissed in response to a drag */
diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js
index 017d9c23d9ae..36b8e7fccf12 100644
--- a/src/components/OptionsList/index.js
+++ b/src/components/OptionsList/index.js
@@ -1,10 +1,10 @@
-import React, {forwardRef, useEffect, useRef, useCallback} from 'react';
+import React, {forwardRef, useCallback, useEffect, useRef} from 'react';
import {Keyboard} from 'react-native';
import _ from 'underscore';
+import withWindowDimensions from '@components/withWindowDimensions';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import BaseOptionsList from './BaseOptionsList';
-import withWindowDimensions from '../withWindowDimensions';
-import {propTypes, defaultProps} from './optionsListPropTypes';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
+import {defaultProps, propTypes} from './optionsListPropTypes';
function OptionsList(props) {
const isScreenTouched = useRef(false);
diff --git a/src/components/OptionsList/index.native.js b/src/components/OptionsList/index.native.js
index 7701096fde8f..ab2db4f20967 100644
--- a/src/components/OptionsList/index.native.js
+++ b/src/components/OptionsList/index.native.js
@@ -1,7 +1,7 @@
import React, {forwardRef} from 'react';
import {Keyboard} from 'react-native';
import BaseOptionsList from './BaseOptionsList';
-import {propTypes, defaultProps} from './optionsListPropTypes';
+import {defaultProps, propTypes} from './optionsListPropTypes';
const OptionsList = forwardRef((props, ref) => (
{
+ props.onEvent(CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.OPEN, {});
openLink({
tokenConfig: {
token: props.token,
@@ -23,6 +25,10 @@ function PlaidLink(props) {
},
});
+ return () => {
+ dismissLink();
+ };
+
// We generally do not need to include the token as a dependency here as it is only provided once via props and should not change
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index 174570d5ed7f..b8889e806629 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -1,11 +1,11 @@
import React, {useRef} from 'react';
import {createPortal} from 'react-dom';
-import {propTypes, defaultProps} from './popoverPropTypes';
-import CONST from '../../CONST';
-import Modal from '../Modal';
-import withWindowDimensions from '../withWindowDimensions';
-import PopoverWithoutOverlay from '../PopoverWithoutOverlay';
-import {PopoverContext} from '../PopoverProvider';
+import Modal from '@components/Modal';
+import {PopoverContext} from '@components/PopoverProvider';
+import PopoverWithoutOverlay from '@components/PopoverWithoutOverlay';
+import withWindowDimensions from '@components/withWindowDimensions';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes} from './popoverPropTypes';
/*
* This is a convenience wrapper around the Modal component for a responsive Popover.
diff --git a/src/components/Popover/index.native.js b/src/components/Popover/index.native.js
index b4ca194e7483..c8d37c2ad61c 100644
--- a/src/components/Popover/index.native.js
+++ b/src/components/Popover/index.native.js
@@ -1,9 +1,9 @@
-import _ from 'underscore';
import React from 'react';
-import {propTypes as popoverPropTypes, defaultProps} from './popoverPropTypes';
-import CONST from '../../CONST';
-import Modal from '../Modal';
-import {windowDimensionsPropTypes} from '../withWindowDimensions';
+import _ from 'underscore';
+import Modal from '@components/Modal';
+import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes as popoverPropTypes} from './popoverPropTypes';
const propTypes = {
..._.omit(popoverPropTypes, _.keys(windowDimensionsPropTypes)),
diff --git a/src/components/Popover/popoverPropTypes.js b/src/components/Popover/popoverPropTypes.js
index c6d0d06501a9..c13fd8fa0b85 100644
--- a/src/components/Popover/popoverPropTypes.js
+++ b/src/components/Popover/popoverPropTypes.js
@@ -1,8 +1,8 @@
-import _ from 'underscore';
import PropTypes from 'prop-types';
-import {propTypes as modalPropTypes, defaultProps as defaultModalProps} from '../Modal/modalPropTypes';
-import refPropTypes from '../refPropTypes';
-import CONST from '../../CONST';
+import _ from 'underscore';
+import {defaultProps as defaultModalProps, propTypes as modalPropTypes} from '@components/Modal/modalPropTypes';
+import refPropTypes from '@components/refPropTypes';
+import CONST from '@src/CONST';
const propTypes = {
..._.omit(modalPropTypes, ['type', 'popoverAnchorPosition']),
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index c4e9587bb667..0f7aa8de94e0 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -1,18 +1,18 @@
-import _ from 'underscore';
-import React, {useRef} from 'react';
import PropTypes from 'prop-types';
+import React, {useRef} from 'react';
import {View} from 'react-native';
-import PopoverWithMeasuredContent from '../PopoverWithMeasuredContent';
-import styles from '../../styles/styles';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import MenuItem from '../MenuItem';
-import {propTypes as createMenuPropTypes, defaultProps as createMenuDefaultProps} from './popoverMenuPropTypes';
-import refPropTypes from '../refPropTypes';
-import Text from '../Text';
-import CONST from '../../CONST';
-import useArrowKeyFocusManager from '../../hooks/useArrowKeyFocusManager';
-import useKeyboardShortcut from '../../hooks/useKeyboardShortcut';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
+import _ from 'underscore';
+import MenuItem from '@components/MenuItem';
+import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
+import refPropTypes from '@components/refPropTypes';
+import Text from '@components/Text';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
+import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import {defaultProps as createMenuDefaultProps, propTypes as createMenuPropTypes} from './popoverMenuPropTypes';
const propTypes = {
...createMenuPropTypes,
diff --git a/src/components/PopoverMenu/popoverMenuPropTypes.js b/src/components/PopoverMenu/popoverMenuPropTypes.js
index 7d95c6a860bc..ae7a385a5297 100644
--- a/src/components/PopoverMenu/popoverMenuPropTypes.js
+++ b/src/components/PopoverMenu/popoverMenuPropTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
const propTypes = {
/** Callback method fired when the user requests to close the modal */
diff --git a/src/components/PopoverProvider/index.js b/src/components/PopoverProvider/index.js
index 86f09579a758..3e245faceeef 100644
--- a/src/components/PopoverProvider/index.js
+++ b/src/components/PopoverProvider/index.js
@@ -1,5 +1,5 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
const propTypes = {
children: PropTypes.node.isRequired,
diff --git a/src/components/PopoverProvider/index.native.js b/src/components/PopoverProvider/index.native.js
index e4da13752b6d..400b42ddea20 100644
--- a/src/components/PopoverProvider/index.native.js
+++ b/src/components/PopoverProvider/index.native.js
@@ -1,5 +1,5 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
const propTypes = {
children: PropTypes.node.isRequired,
diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js
index 6b71b4a59055..04eacfa88ec8 100644
--- a/src/components/PopoverWithMeasuredContent.js
+++ b/src/components/PopoverWithMeasuredContent.js
@@ -1,14 +1,14 @@
-import _ from 'underscore';
-import React, {useState, useMemo} from 'react';
import PropTypes from 'prop-types';
+import React, {useMemo, useState} from 'react';
import {View} from 'react-native';
+import _ from 'underscore';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {computeHorizontalShift, computeVerticalShift} from '@styles/getPopoverWithMeasuredContentStyles';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import Popover from './Popover';
-import {propTypes as popoverPropTypes, defaultProps as defaultPopoverProps} from './Popover/popoverPropTypes';
-import useWindowDimensions from '../hooks/useWindowDimensions';
+import {defaultProps as defaultPopoverProps, propTypes as popoverPropTypes} from './Popover/popoverPropTypes';
import {windowDimensionsPropTypes} from './withWindowDimensions';
-import CONST from '../CONST';
-import styles from '../styles/styles';
-import {computeHorizontalShift, computeVerticalShift} from '../styles/getPopoverWithMeasuredContentStyles';
const propTypes = {
// All popover props except:
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 2036807e0df0..43156cd11827 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -1,13 +1,13 @@
import React from 'react';
import {View} from 'react-native';
import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
-import {PopoverContext} from '../PopoverProvider';
-import * as Modal from '../../libs/actions/Modal';
-import {propTypes, defaultProps} from '../Popover/popoverPropTypes';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
-import getModalStyles from '../../styles/getModalStyles';
-import withWindowDimensions from '../withWindowDimensions';
+import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
+import {PopoverContext} from '@components/PopoverProvider';
+import withWindowDimensions from '@components/withWindowDimensions';
+import getModalStyles from '@styles/getModalStyles';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import * as Modal from '@userActions/Modal';
function Popover(props) {
const {onOpen, close} = React.useContext(PopoverContext);
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js
index 24d81f59f4f8..a3ce55003cdd 100644
--- a/src/components/Pressable/GenericPressable/BaseGenericPressable.js
+++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.js
@@ -1,15 +1,15 @@
-import React, {useCallback, useEffect, useMemo, forwardRef} from 'react';
+import React, {forwardRef, useCallback, useEffect, useMemo} from 'react';
// eslint-disable-next-line no-restricted-imports
import {Pressable} from 'react-native';
import _ from 'underscore';
-import Accessibility from '../../../libs/Accessibility';
-import HapticFeedback from '../../../libs/HapticFeedback';
-import KeyboardShortcut from '../../../libs/KeyboardShortcut';
-import styles from '../../../styles/styles';
+import useSingleExecution from '@hooks/useSingleExecution';
+import Accessibility from '@libs/Accessibility';
+import HapticFeedback from '@libs/HapticFeedback';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
import genericPressablePropTypes from './PropTypes';
-import CONST from '../../../CONST';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import useSingleExecution from '../../../hooks/useSingleExecution';
/**
* Returns the cursor style based on the state of Pressable
diff --git a/src/components/Pressable/GenericPressable/PropTypes.js b/src/components/Pressable/GenericPressable/PropTypes.js
index 3933b31d2d47..870c63301239 100644
--- a/src/components/Pressable/GenericPressable/PropTypes.js
+++ b/src/components/Pressable/GenericPressable/PropTypes.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
-import stylePropType from '../../../styles/stylePropTypes';
-import CONST from '../../../CONST';
+import stylePropType from '@styles/stylePropTypes';
+import CONST from '@src/CONST';
const stylePropTypeWithFunction = PropTypes.oneOfType([stylePropType, PropTypes.func]);
diff --git a/src/components/Pressable/PressableWithDelayToggle.js b/src/components/Pressable/PressableWithDelayToggle.js
index c56ab49382b4..7113afff8bdc 100644
--- a/src/components/Pressable/PressableWithDelayToggle.js
+++ b/src/components/Pressable/PressableWithDelayToggle.js
@@ -1,16 +1,16 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import * as Expensicons from '../Icon/Expensicons';
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-import Text from '../Text';
-import styles from '../../styles/styles';
-import variables from '../../styles/variables';
-import getButtonState from '../../libs/getButtonState';
-import * as StyleUtils from '../../styles/StyleUtils';
+import React from 'react';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import refPropTypes from '@components/refPropTypes';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import useThrottledButtonState from '@hooks/useThrottledButtonState';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import variables from '@styles/variables';
import PressableWithoutFeedback from './PressableWithoutFeedback';
-import useThrottledButtonState from '../../hooks/useThrottledButtonState';
-import refPropTypes from '../refPropTypes';
const propTypes = {
/** Ref passed to the component by React.forwardRef (do not pass from parent) */
diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js
index 07601ed35789..ad29204bb018 100644
--- a/src/components/Pressable/PressableWithFeedback.js
+++ b/src/components/Pressable/PressableWithFeedback.js
@@ -1,10 +1,10 @@
+import propTypes from 'prop-types';
import React, {forwardRef, useState} from 'react';
import _ from 'underscore';
-import propTypes from 'prop-types';
+import OpacityView from '@components/OpacityView';
+import variables from '@styles/variables';
import GenericPressable from './GenericPressable';
import GenericPressablePropTypes from './GenericPressable/PropTypes';
-import OpacityView from '../OpacityView';
-import variables from '../../styles/variables';
const omittedProps = ['wrapperStyle', 'needsOffscreenAlphaCompositing'];
diff --git a/src/components/Pressable/PressableWithoutFocus.js b/src/components/Pressable/PressableWithoutFocus.js
index 5e56c71f09da..641e695b1013 100644
--- a/src/components/Pressable/PressableWithoutFocus.js
+++ b/src/components/Pressable/PressableWithoutFocus.js
@@ -1,9 +1,9 @@
+import PropTypes from 'prop-types';
import React from 'react';
import _ from 'underscore';
-import PropTypes from 'prop-types';
+import StylePropType from '@styles/stylePropTypes';
import GenericPressable from './GenericPressable';
import genericPressablePropTypes from './GenericPressable/PropTypes';
-import StylePropType from '../../styles/stylePropTypes';
const propTypes = {
/** Element that should be clickable */
diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
index 7eb6f7ca376b..ec6127dbf1fa 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.js
@@ -1,9 +1,9 @@
-import _ from 'underscore';
import React, {forwardRef, useEffect, useRef} from 'react';
-import styles from '../../styles/styles';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import * as StyleUtils from '../../styles/StyleUtils';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+import _ from 'underscore';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
/**
diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js
index 1b6690ad2f33..039801bee3f2 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.js
+++ b/src/components/PressableWithSecondaryInteraction/index.native.js
@@ -1,8 +1,8 @@
-import _ from 'underscore';
import React, {forwardRef} from 'react';
+import _ from 'underscore';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
-import Text from '../Text';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
/**
* This is a special Pressable that calls onSecondaryInteraction when LongPressed.
diff --git a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
index 0a4f7949643a..8e2fb5141091 100644
--- a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
+++ b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
-import refPropTypes from '../refPropTypes';
-import stylePropTypes from '../../styles/stylePropTypes';
+import refPropTypes from '@components/refPropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
const propTypes = {
/** The function that should be called when this pressable is pressed */
diff --git a/src/components/QRCode/index.tsx b/src/components/QRCode/index.tsx
index bca45c02fffa..86e6ac6c7ff5 100644
--- a/src/components/QRCode/index.tsx
+++ b/src/components/QRCode/index.tsx
@@ -1,8 +1,8 @@
import React, {Ref} from 'react';
-import QRCodeLibrary from 'react-native-qrcode-svg';
import {ImageSourcePropType} from 'react-native';
-import defaultTheme from '../../styles/themes/default';
-import CONST from '../../CONST';
+import QRCodeLibrary from 'react-native-qrcode-svg';
+import defaultTheme from '@styles/themes/default';
+import CONST from '@src/CONST';
type LogoRatio = typeof CONST.QR.DEFAULT_LOGO_SIZE_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO;
diff --git a/src/components/QRShare/QRShareWithDownload/index.js b/src/components/QRShare/QRShareWithDownload/index.js
index b16f22dc6483..688ec15040ac 100644
--- a/src/components/QRShare/QRShareWithDownload/index.js
+++ b/src/components/QRShare/QRShareWithDownload/index.js
@@ -1,9 +1,9 @@
import React, {Component} from 'react';
-import fileDownload from '../../../libs/fileDownload';
+import {withNetwork} from '@components/OnyxProvider';
+import getQrCodeFileName from '@components/QRShare/getQrCodeDownloadFileName';
+import {qrShareDefaultProps, qrSharePropTypes} from '@components/QRShare/propTypes';
+import fileDownload from '@libs/fileDownload';
import QRShare from '..';
-import {qrShareDefaultProps, qrSharePropTypes} from '../propTypes';
-import getQrCodeFileName from '../getQrCodeDownloadFileName';
-import {withNetwork} from '../../OnyxProvider';
class QRShareWithDownload extends Component {
qrShareRef = React.createRef();
diff --git a/src/components/QRShare/QRShareWithDownload/index.native.js b/src/components/QRShare/QRShareWithDownload/index.native.js
index 66fe7a6762d0..bf67b0955812 100644
--- a/src/components/QRShare/QRShareWithDownload/index.native.js
+++ b/src/components/QRShare/QRShareWithDownload/index.native.js
@@ -1,10 +1,10 @@
import React, {Component} from 'react';
import ViewShot from 'react-native-view-shot';
-import fileDownload from '../../../libs/fileDownload';
+import {withNetwork} from '@components/OnyxProvider';
+import getQrCodeFileName from '@components/QRShare/getQrCodeDownloadFileName';
+import {qrShareDefaultProps, qrSharePropTypes} from '@components/QRShare/propTypes';
+import fileDownload from '@libs/fileDownload';
import QRShare from '..';
-import {qrShareDefaultProps, qrSharePropTypes} from '../propTypes';
-import getQrCodeFileName from '../getQrCodeDownloadFileName';
-import {withNetwork} from '../../OnyxProvider';
class QRShareWithDownload extends Component {
qrCodeScreenshotRef = React.createRef();
diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js
index 837adcac8efe..7e709cad84f0 100644
--- a/src/components/QRShare/index.js
+++ b/src/components/QRShare/index.js
@@ -1,16 +1,16 @@
import React, {Component} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import defaultTheme from '../../styles/themes/default';
-import styles from '../../styles/styles';
-import Text from '../Text';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import compose from '../../libs/compose';
-import variables from '../../styles/variables';
-import ExpensifyWordmark from '../../../assets/images/expensify-wordmark.svg';
-import {qrSharePropTypes, qrShareDefaultProps} from './propTypes';
-import QRCode from '../QRCode';
+import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
+import QRCode from '@components/QRCode';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import compose from '@libs/compose';
+import styles from '@styles/styles';
+import defaultTheme from '@styles/themes/default';
+import variables from '@styles/variables';
+import {qrShareDefaultProps, qrSharePropTypes} from './propTypes';
const propTypes = {
...qrSharePropTypes,
diff --git a/src/components/RNTextInput.js b/src/components/RNTextInput.js
index 30815376ca8c..d308c42f4947 100644
--- a/src/components/RNTextInput.js
+++ b/src/components/RNTextInput.js
@@ -1,9 +1,9 @@
+import PropTypes from 'prop-types';
import React from 'react';
-import _ from 'underscore';
// eslint-disable-next-line no-restricted-imports
import {TextInput} from 'react-native';
import Animated from 'react-native-reanimated';
-import PropTypes from 'prop-types';
+import _ from 'underscore';
const propTypes = {
/** A ref to forward to the text input */
diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
index 726afd609588..9d8e739d723c 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.js
@@ -1,11 +1,11 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import CONST from '../CONST';
const propTypes = {
/** Whether radioButton is checked */
diff --git a/src/components/RadioButtonWithLabel.js b/src/components/RadioButtonWithLabel.js
index 6175b29c01db..21a04bfcefef 100644
--- a/src/components/RadioButtonWithLabel.js
+++ b/src/components/RadioButtonWithLabel.js
@@ -1,12 +1,12 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import styles from '../styles/styles';
-import RadioButton from './RadioButton';
-import Text from './Text';
+import styles from '@styles/styles';
import FormHelpMessage from './FormHelpMessage';
import * as Pressables from './Pressable';
+import RadioButton from './RadioButton';
+import Text from './Text';
const propTypes = {
/** Whether the radioButton is checked */
diff --git a/src/components/RadioButtons.js b/src/components/RadioButtons.tsx
similarity index 54%
rename from src/components/RadioButtons.js
rename to src/components/RadioButtons.tsx
index 455f4dad1674..23b813759ecf 100644
--- a/src/components/RadioButtons.js
+++ b/src/components/RadioButtons.tsx
@@ -1,36 +1,34 @@
import React, {useState} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
+import styles from '@styles/styles';
import RadioButtonWithLabel from './RadioButtonWithLabel';
-import styles from '../styles/styles';
-const propTypes = {
+type Choice = {
+ label: string;
+ value: string;
+};
+
+type RadioButtonsProps = {
/** List of choices to display via radio buttons */
- items: PropTypes.arrayOf(
- PropTypes.shape({
- label: PropTypes.string.isRequired,
- value: PropTypes.string.isRequired,
- }),
- ).isRequired,
+ items: Choice[];
/** Callback to fire when selecting a radio button */
- onPress: PropTypes.func.isRequired,
+ onPress: (value: string) => void;
};
-function RadioButtons(props) {
+function RadioButtons({items, onPress}: RadioButtonsProps) {
const [checkedValue, setCheckedValue] = useState('');
return (
- {_.map(props.items, (item, index) => (
+ {items.map((item) => (
{
setCheckedValue(item.value);
- return props.onPress(item.value);
+ return onPress(item.value);
}}
label={item.label}
/>
@@ -39,7 +37,6 @@ function RadioButtons(props) {
);
}
-RadioButtons.propTypes = propTypes;
RadioButtons.displayName = 'RadioButtons';
export default RadioButtons;
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 8a862c7e1b96..4e12ace9cc6c 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -1,19 +1,19 @@
-import React, {useRef, useEffect} from 'react';
-import {View} from 'react-native';
import PropTypes from 'prop-types';
-import Tooltip from '../Tooltip/PopoverAnchorTooltip';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import Text from '../Text';
-import getButtonState from '../../libs/getButtonState';
-import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
-import variables from '../../styles/variables';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import * as Session from '../../libs/actions/Session';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
-import CONST from '../../CONST';
+import React, {useEffect, useRef} from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import variables from '@styles/variables';
+import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
+import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
const propTypes = {
/** Whether it is for context menu so we can modify its style */
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 3e40216bd870..a61923e49860 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -1,12 +1,12 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import Text from '../Text';
-import * as StyleUtils from '../../styles/StyleUtils';
-import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import {withCurrentUserPersonalDetailsDefaultProps} from '../withCurrentUserPersonalDetails';
-import CONST from '../../CONST';
+import React from 'react';
+import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
+import Text from '@components/Text';
+import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
const propTypes = {
/**
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index a22a2967cefe..aacadc451848 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -1,23 +1,23 @@
+import PropTypes from 'prop-types';
import React, {useRef} from 'react';
import {View} from 'react-native';
-import _ from 'underscore';
import {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
-import CONST from '../../CONST';
-import styles from '../../styles/styles';
-import Text from '../Text';
-import * as StyleUtils from '../../styles/StyleUtils';
-import BaseMiniContextMenuItem from '../BaseMiniContextMenuItem';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import getButtonState from '../../libs/getButtonState';
-import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
-import {baseQuickEmojiReactionsPropTypes, baseQuickEmojiReactionsDefaultProps} from './QuickEmojiReactions/BaseQuickEmojiReactions';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import compose from '../../libs/compose';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as EmojiUtils from '../../libs/EmojiUtils';
-import * as Session from '../../libs/actions/Session';
+import _ from 'underscore';
+import BaseMiniContextMenuItem from '@components/BaseMiniContextMenuItem';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import compose from '@libs/compose';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import getButtonState from '@libs/getButtonState';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
+import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {baseQuickEmojiReactionsDefaultProps, baseQuickEmojiReactionsPropTypes} from './QuickEmojiReactions/BaseQuickEmojiReactions';
const propTypes = {
...baseQuickEmojiReactionsPropTypes,
diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
index b5046fbd59ce..5d8a94b19e77 100644
--- a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
+++ b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
@@ -1,17 +1,17 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import _ from 'underscore';
-import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
-import EmojiReactionBubble from '../EmojiReactionBubble';
-import AddReactionBubble from '../AddReactionBubble';
-import CONST from '../../../CONST';
-import styles from '../../../styles/styles';
-import ONYXKEYS from '../../../ONYXKEYS';
-import Tooltip from '../../Tooltip';
-import * as EmojiUtils from '../../../libs/EmojiUtils';
-import EmojiReactionsPropTypes from '../EmojiReactionsPropTypes';
-import * as Session from '../../../libs/actions/Session';
+import _ from 'underscore';
+import AddReactionBubble from '@components/Reactions/AddReactionBubble';
+import EmojiReactionBubble from '@components/Reactions/EmojiReactionBubble';
+import EmojiReactionsPropTypes from '@components/Reactions/EmojiReactionsPropTypes';
+import Tooltip from '@components/Tooltip';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import styles from '@styles/styles';
+import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
const baseQuickEmojiReactionsPropTypes = {
emojiReactions: EmojiReactionsPropTypes,
diff --git a/src/components/Reactions/QuickEmojiReactions/index.js b/src/components/Reactions/QuickEmojiReactions/index.js
index dd05c4f2cea3..e4399b634136 100644
--- a/src/components/Reactions/QuickEmojiReactions/index.js
+++ b/src/components/Reactions/QuickEmojiReactions/index.js
@@ -1,8 +1,8 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
+import {contextMenuRef} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import CONST from '@src/CONST';
import BaseQuickEmojiReactions, {baseQuickEmojiReactionsPropTypes} from './BaseQuickEmojiReactions';
-import {contextMenuRef} from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
-import CONST from '../../../CONST';
const propTypes = {
...baseQuickEmojiReactionsPropTypes,
diff --git a/src/components/Reactions/QuickEmojiReactions/index.native.js b/src/components/Reactions/QuickEmojiReactions/index.native.js
index 5ad8e0097e0e..239fd7b4c8a8 100644
--- a/src/components/Reactions/QuickEmojiReactions/index.native.js
+++ b/src/components/Reactions/QuickEmojiReactions/index.native.js
@@ -1,7 +1,7 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
+import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
import BaseQuickEmojiReactions, {baseQuickEmojiReactionsPropTypes} from './BaseQuickEmojiReactions';
-import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
const propTypes = {
...baseQuickEmojiReactionsPropTypes,
diff --git a/src/components/Reactions/ReactionTooltipContent.js b/src/components/Reactions/ReactionTooltipContent.js
index 8dddc106efbf..c1fdd2e61637 100644
--- a/src/components/Reactions/ReactionTooltipContent.js
+++ b/src/components/Reactions/ReactionTooltipContent.js
@@ -1,12 +1,12 @@
+import PropTypes from 'prop-types';
import React, {useMemo} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import _ from 'underscore';
-import styles from '../../styles/styles';
-import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
-import Text from '../Text';
-import {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
-import withLocalize from '../withLocalize';
+import Text from '@components/Text';
+import {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import withLocalize from '@components/withLocalize';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import styles from '@styles/styles';
const propTypes = {
/**
diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index 5fdf74f877dd..8709f0c6f718 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -1,21 +1,21 @@
-import React, {useRef, useContext} from 'react';
import lodashGet from 'lodash/get';
-import _ from 'underscore';
-import {View} from 'react-native';
import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import EmojiReactionBubble from './EmojiReactionBubble';
+import React, {useContext, useRef} from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import Tooltip from '@components/Tooltip';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import withLocalize from '@components/withLocalize';
+import compose from '@libs/compose';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import {ReactionListContext} from '@pages/home/ReportScreenContext';
+import styles from '@styles/styles';
import AddReactionBubble from './AddReactionBubble';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
-import withLocalize from '../withLocalize';
-import compose from '../../libs/compose';
+import EmojiReactionBubble from './EmojiReactionBubble';
import EmojiReactionsPropTypes from './EmojiReactionsPropTypes';
-import Tooltip from '../Tooltip';
import ReactionTooltipContent from './ReactionTooltipContent';
-import * as EmojiUtils from '../../libs/EmojiUtils';
-import {ReactionListContext} from '../../pages/home/ReportScreenContext';
-import OfflineWithFeedback from '../OfflineWithFeedback';
-import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
const propTypes = {
emojiReactions: EmojiReactionsPropTypes,
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index bd3011a74ffb..46aff91c93ea 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -1,15 +1,15 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {StyleSheet, View} from 'react-native';
-import PropTypes from 'prop-types';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
+import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
+import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
+import HeaderWithBackButton from './HeaderWithBackButton';
import Lottie from './Lottie';
import * as LottieAnimations from './LottieAnimations';
-import styles from '../styles/styles';
-import useLocalize from '../hooks/useLocalize';
-import Text from './Text';
-import HeaderWithBackButton from './HeaderWithBackButton';
import ScreenWrapper from './ScreenWrapper';
-import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
-import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
+import Text from './Text';
const propTypes = {
/** Whether the user is submitting verifications data */
diff --git a/src/components/RenderHTML.js b/src/components/RenderHTML.js
index d2d4f0b58e71..feb5d25cae44 100644
--- a/src/components/RenderHTML.js
+++ b/src/components/RenderHTML.js
@@ -1,7 +1,7 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {RenderHTMLSource} from 'react-native-render-html';
-import useWindowDimensions from '../hooks/useWindowDimensions';
+import useWindowDimensions from '@hooks/useWindowDimensions';
const propTypes = {
/** HTML string to render */
diff --git a/src/components/ReportActionItem/ChronosOOOListActions.js b/src/components/ReportActionItem/ChronosOOOListActions.js
index 61c504d122ff..f09b4880d8c6 100644
--- a/src/components/ReportActionItem/ChronosOOOListActions.js
+++ b/src/components/ReportActionItem/ChronosOOOListActions.js
@@ -1,16 +1,16 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
-import styles from '../../styles/styles';
-import Text from '../Text';
-import Button from '../Button';
-import * as Chronos from '../../libs/actions/Chronos';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import DateUtils from '../../libs/DateUtils';
-import OfflineWithFeedback from '../OfflineWithFeedback';
+import Button from '@components/Button';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import DateUtils from '@libs/DateUtils';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import styles from '@styles/styles';
+import * as Chronos from '@userActions/Chronos';
const propTypes = {
/** The ID of the report */
diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index 3f9b8bf53837..eb0d5891111d 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -1,20 +1,20 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import reportPropTypes from '../../pages/reportPropTypes';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
-import * as ReportUtils from '../../libs/ReportUtils';
-import * as StyleUtils from '../../styles/StyleUtils';
-import Text from '../Text';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import variables from '../../styles/variables';
-import * as CurrencyUtils from '../../libs/CurrencyUtils';
-import useLocalize from '../../hooks/useLocalize';
-import AnimatedEmptyStateBackground from '../../pages/home/report/AnimatedEmptyStateBackground';
-import SpacerView from '../SpacerView';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import SpacerView from '@components/SpacerView';
+import Text from '@components/Text';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useLocalize from '@hooks/useLocalize';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
const propTypes = {
/** The report currently being looked at */
diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js
index 136e6a753e67..4de1cc7b6889 100644
--- a/src/components/ReportActionItem/MoneyRequestAction.js
+++ b/src/components/ReportActionItem/MoneyRequestAction.js
@@ -1,28 +1,28 @@
-import _ from 'underscore';
-import React from 'react';
+import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
+import React from 'react';
import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
-import ONYXKEYS from '../../ONYXKEYS';
-import CONST from '../../CONST';
-import {withNetwork} from '../OnyxProvider';
-import compose from '../../libs/compose';
-import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
-import networkPropTypes from '../networkPropTypes';
-import iouReportPropTypes from '../../pages/iouReportPropTypes';
+import _ from 'underscore';
+import networkPropTypes from '@components/networkPropTypes';
+import {withNetwork} from '@components/OnyxProvider';
+import refPropTypes from '@components/refPropTypes';
+import RenderHTML from '@components/RenderHTML';
+import useLocalize from '@hooks/useLocalize';
+import compose from '@libs/compose';
+import * as IOUUtils from '@libs/IOUUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import * as Report from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import MoneyRequestPreview from './MoneyRequestPreview';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import styles from '../../styles/styles';
-import * as IOUUtils from '../../libs/IOUUtils';
-import * as ReportUtils from '../../libs/ReportUtils';
-import * as Report from '../../libs/actions/Report';
-import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
-import refPropTypes from '../refPropTypes';
-import RenderHTML from '../RenderHTML';
-import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
-import reportPropTypes from '../../pages/reportPropTypes';
-import useLocalize from '../../hooks/useLocalize';
const propTypes = {
/** All the data of the action */
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 88cd91bc10ab..97043fbd055d 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -1,42 +1,42 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
import _ from 'underscore';
-import compose from '../../libs/compose';
-import styles from '../../styles/styles';
-import ONYXKEYS from '../../ONYXKEYS';
-import MultipleAvatars from '../MultipleAvatars';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import * as Report from '../../libs/actions/Report';
-import themeColors from '../../styles/themes/default';
-import Icon from '../Icon';
-import CONST from '../../CONST';
-import * as Expensicons from '../Icon/Expensicons';
-import Text from '../Text';
-import * as PaymentMethods from '../../libs/actions/PaymentMethods';
-import OfflineWithFeedback from '../OfflineWithFeedback';
-import walletTermsPropTypes from '../../pages/EnablePayments/walletTermsPropTypes';
-import ControlSelection from '../../libs/ControlSelection';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
-import {showContextMenuForReport} from '../ShowContextMenuContext';
-import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
-import * as CurrencyUtils from '../../libs/CurrencyUtils';
-import * as IOUUtils from '../../libs/IOUUtils';
-import * as ReportUtils from '../../libs/ReportUtils';
-import * as TransactionUtils from '../../libs/TransactionUtils';
-import refPropTypes from '../refPropTypes';
-import PressableWithFeedback from '../Pressable/PressableWithoutFeedback';
-import * as ReceiptUtils from '../../libs/ReceiptUtils';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MoneyRequestSkeletonView from '@components/MoneyRequestSkeletonView';
+import MultipleAvatars from '@components/MultipleAvatars';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import PressableWithFeedback from '@components/Pressable/PressableWithoutFeedback';
+import refPropTypes from '@components/refPropTypes';
+import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import Text from '@components/Text';
+import transactionPropTypes from '@components/transactionPropTypes';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import compose from '@libs/compose';
+import ControlSelection from '@libs/ControlSelection';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import * as IOUUtils from '@libs/IOUUtils';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReceiptUtils from '@libs/ReceiptUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import * as PaymentMethods from '@userActions/PaymentMethods';
+import * as Report from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import ReportActionItemImages from './ReportActionItemImages';
-import transactionPropTypes from '../transactionPropTypes';
-import * as StyleUtils from '../../styles/StyleUtils';
-import variables from '../../styles/variables';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
-import MoneyRequestSkeletonView from '../MoneyRequestSkeletonView';
const propTypes = {
/** The active IOUReport, used for Onyx subscription */
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 57ccbaeb7ddf..aa1813fa6e4d 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -1,43 +1,43 @@
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
import lodashValues from 'lodash/values';
import PropTypes from 'prop-types';
-import reportPropTypes from '../../pages/reportPropTypes';
-import ONYXKEYS from '../../ONYXKEYS';
-import ROUTES from '../../ROUTES';
-import Permissions from '../../libs/Permissions';
-import Navigation from '../../libs/Navigation/Navigation';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
-import compose from '../../libs/compose';
-import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
-import * as ReportUtils from '../../libs/ReportUtils';
-import * as IOU from '../../libs/actions/IOU';
-import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
-import * as StyleUtils from '../../styles/StyleUtils';
-import * as PolicyUtils from '../../libs/PolicyUtils';
-import * as CardUtils from '../../libs/CardUtils';
-import CONST from '../../CONST';
-import * as Expensicons from '../Icon/Expensicons';
-import iouReportPropTypes from '../../pages/iouReportPropTypes';
-import * as CurrencyUtils from '../../libs/CurrencyUtils';
-import useLocalize from '../../hooks/useLocalize';
-import AnimatedEmptyStateBackground from '../../pages/home/report/AnimatedEmptyStateBackground';
-import * as ReceiptUtils from '../../libs/ReceiptUtils';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
-import transactionPropTypes from '../transactionPropTypes';
-import Text from '../Text';
-import Switch from '../Switch';
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import categoryPropTypes from '@components/categoryPropTypes';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import SpacerView from '@components/SpacerView';
+import Switch from '@components/Switch';
+import tagPropTypes from '@components/tagPropTypes';
+import Text from '@components/Text';
+import transactionPropTypes from '@components/transactionPropTypes';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as CardUtils from '@libs/CardUtils';
+import compose from '@libs/compose';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import Permissions from '@libs/Permissions';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import * as ReceiptUtils from '@libs/ReceiptUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import * as IOU from '@userActions/IOU';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import ReportActionItemImage from './ReportActionItemImage';
-import * as TransactionUtils from '../../libs/TransactionUtils';
-import OfflineWithFeedback from '../OfflineWithFeedback';
-import categoryPropTypes from '../categoryPropTypes';
-import SpacerView from '../SpacerView';
-import tagPropTypes from '../tagPropTypes';
const propTypes = {
/** The report currently being looked at */
diff --git a/src/components/ReportActionItem/RenameAction.js b/src/components/ReportActionItem/RenameAction.js
index 5e81abd0917b..e9158dcf1c37 100644
--- a/src/components/ReportActionItem/RenameAction.js
+++ b/src/components/ReportActionItem/RenameAction.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
import lodashGet from 'lodash/get';
-import Text from '../Text';
-import styles from '../../styles/styles';
-import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import compose from '../../libs/compose';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Text from '@components/Text';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import compose from '@libs/compose';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import styles from '@styles/styles';
const propTypes = {
/** All the data of the action */
diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js
index f17a1f1929fe..ff4b94443940 100644
--- a/src/components/ReportActionItem/ReportActionItemImage.js
+++ b/src/components/ReportActionItem/ReportActionItemImage.js
@@ -1,20 +1,20 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import styles from '../../styles/styles';
-import Image from '../Image';
-import ThumbnailImage from '../ThumbnailImage';
-import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
-import ROUTES from '../../ROUTES';
-import CONST from '../../CONST';
-import {ShowContextMenuContext} from '../ShowContextMenuContext';
-import Navigation from '../../libs/Navigation/Navigation';
-import PressableWithoutFocus from '../Pressable/PressableWithoutFocus';
-import useLocalize from '../../hooks/useLocalize';
-import EReceiptThumbnail from '../EReceiptThumbnail';
-import transactionPropTypes from '../transactionPropTypes';
-import * as TransactionUtils from '../../libs/TransactionUtils';
+import EReceiptThumbnail from '@components/EReceiptThumbnail';
+import Image from '@components/Image';
+import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
+import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
+import ThumbnailImage from '@components/ThumbnailImage';
+import transactionPropTypes from '@components/transactionPropTypes';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
const propTypes = {
/** thumbnail URI for the image */
diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index bd1ee6d45a07..b41307864de6 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -1,13 +1,13 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import _ from 'underscore';
-import styles from '../../styles/styles';
-import Text from '../Text';
+import Text from '@components/Text';
+import transactionPropTypes from '@components/transactionPropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import variables from '@styles/variables';
import ReportActionItemImage from './ReportActionItemImage';
-import * as StyleUtils from '../../styles/StyleUtils';
-import variables from '../../styles/variables';
-import transactionPropTypes from '../transactionPropTypes';
const propTypes = {
/** array of image and thumbnail URIs */
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index bdeec2640cdc..00a4526b382f 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -1,36 +1,36 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React from 'react';
-import _ from 'underscore';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
-import Button from '../Button';
-import Icon from '../Icon';
-import Text from '../Text';
-import * as Expensicons from '../Icon/Expensicons';
-import styles from '../../styles/styles';
-import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import compose from '../../libs/compose';
-import CONST from '../../CONST';
-import ONYXKEYS from '../../ONYXKEYS';
-import ControlSelection from '../../libs/ControlSelection';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import {showContextMenuForReport} from '../ShowContextMenuContext';
-import * as CurrencyUtils from '../../libs/CurrencyUtils';
-import * as ReportUtils from '../../libs/ReportUtils';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import useLocalize from '../../hooks/useLocalize';
-import SettlementButton from '../SettlementButton';
-import * as IOU from '../../libs/actions/IOU';
-import refPropTypes from '../refPropTypes';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import themeColors from '../../styles/themes/default';
-import reportPropTypes from '../../pages/reportPropTypes';
-import * as ReceiptUtils from '../../libs/ReceiptUtils';
-import * as ReportActionUtils from '../../libs/ReportActionsUtils';
-import * as TransactionUtils from '../../libs/TransactionUtils';
+import _ from 'underscore';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import refPropTypes from '@components/refPropTypes';
+import SettlementButton from '@components/SettlementButton';
+import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
+import compose from '@libs/compose';
+import ControlSelection from '@libs/ControlSelection';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReceiptUtils from '@libs/ReceiptUtils';
+import * as ReportActionUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import * as IOU from '@userActions/IOU';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import ReportActionItemImages from './ReportActionItemImages';
const propTypes = {
diff --git a/src/components/ReportActionItem/TaskAction.js b/src/components/ReportActionItem/TaskAction.js
index 9d32fa7a1e77..db4239371e44 100644
--- a/src/components/ReportActionItem/TaskAction.js
+++ b/src/components/ReportActionItem/TaskAction.js
@@ -1,10 +1,10 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import Text from '../Text';
-import styles from '../../styles/styles';
-import * as Task from '../../libs/actions/Task';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import styles from '@styles/styles';
+import * as Task from '@userActions/Task';
const propTypes = {
/** Name of the reportAction action */
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 3499aee5f682..63ece9fcb3e1 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -1,30 +1,30 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
import _ from 'underscore';
-import compose from '../../libs/compose';
-import styles from '../../styles/styles';
-import ONYXKEYS from '../../ONYXKEYS';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../withCurrentUserPersonalDetails';
-import Icon from '../Icon';
-import CONST from '../../CONST';
-import * as Expensicons from '../Icon/Expensicons';
-import Checkbox from '../Checkbox';
-import * as StyleUtils from '../../styles/StyleUtils';
-import getButtonState from '../../libs/getButtonState';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
-import * as Task from '../../libs/actions/Task';
-import * as ReportUtils from '../../libs/ReportUtils';
-import RenderHTML from '../RenderHTML';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import personalDetailsPropType from '../../pages/personalDetailsPropType';
-import * as Session from '../../libs/actions/Session';
-import * as LocalePhoneNumber from '../../libs/LocalePhoneNumber';
+import Checkbox from '@components/Checkbox';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import RenderHTML from '@components/RenderHTML';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import compose from '@libs/compose';
+import getButtonState from '@libs/getButtonState';
+import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import personalDetailsPropType from '@pages/personalDetailsPropType';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import * as Session from '@userActions/Session';
+import * as Task from '@userActions/Task';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
const propTypes = {
/** All personal details asssociated with user */
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 61e7f9ea6ece..9aa85392dde7 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -1,33 +1,33 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React, {useEffect} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import reportPropTypes from '../../pages/reportPropTypes';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import withWindowDimensions from '../withWindowDimensions';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
-import compose from '../../libs/compose';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
-import Hoverable from '../Hoverable';
-import MenuItem from '../MenuItem';
-import OfflineWithFeedback from '../OfflineWithFeedback';
-import styles from '../../styles/styles';
-import * as ReportUtils from '../../libs/ReportUtils';
-import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import * as StyleUtils from '../../styles/StyleUtils';
-import * as Task from '../../libs/actions/Task';
-import CONST from '../../CONST';
-import Checkbox from '../Checkbox';
-import convertToLTR from '../../libs/convertToLTR';
-import Text from '../Text';
-import Icon from '../Icon';
-import getButtonState from '../../libs/getButtonState';
-import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
-import * as Session from '../../libs/actions/Session';
-import * as Expensicons from '../Icon/Expensicons';
-import SpacerView from '../SpacerView';
+import Checkbox from '@components/Checkbox';
+import Hoverable from '@components/Hoverable';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
+import SpacerView from '@components/SpacerView';
+import Text from '@components/Text';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import withWindowDimensions from '@components/withWindowDimensions';
+import compose from '@libs/compose';
+import convertToLTR from '@libs/convertToLTR';
+import getButtonState from '@libs/getButtonState';
+import Navigation from '@libs/Navigation/Navigation';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import * as Session from '@userActions/Session';
+import * as Task from '@userActions/Task';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
const propTypes = {
/** The report currently being looked at */
diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
index e4432ceb2309..1811c14e4695 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
@@ -1,10 +1,10 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import {Rect, Circle} from 'react-native-svg';
+import React from 'react';
import SkeletonViewContentLoader from 'react-content-loader/native';
-import CONST from '../../CONST';
-import themeColors from '../../styles/themes/default';
-import styles from '../../styles/styles';
+import {Circle, Rect} from 'react-native-svg';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
const propTypes = {
/** Number of rows to show in Skeleton UI block */
diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js
index 6efda2682ecd..6087510a53b0 100644
--- a/src/components/ReportActionsSkeletonView/index.js
+++ b/src/components/ReportActionsSkeletonView/index.js
@@ -1,8 +1,8 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import {View, Dimensions} from 'react-native';
+import React from 'react';
+import {Dimensions, View} from 'react-native';
+import CONST from '@src/CONST';
import SkeletonViewLines from './SkeletonViewLines';
-import CONST from '../../CONST';
const propTypes = {
/** Whether to animate the skeleton view */
diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index 5f2d5379419d..f2001094f60a 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -1,18 +1,18 @@
+import PropTypes from 'prop-types';
import React from 'react';
-import {View} from 'react-native';
-import {Rect, Circle} from 'react-native-svg';
import SkeletonViewContentLoader from 'react-content-loader/native';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
+import {View} from 'react-native';
+import {Circle, Rect} from 'react-native-svg';
+import compose from '@libs/compose';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import variables from '../styles/variables';
-import themeColors from '../styles/themes/default';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import compose from '../libs/compose';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import CONST from '../CONST';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
const propTypes = {
...windowDimensionsPropTypes,
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
index 23a27682a7d4..e1a6d4d4f6c1 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.js
@@ -1,22 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import UserDetailsTooltip from './UserDetailsTooltip';
-import styles from '../styles/styles';
+import compose from '@libs/compose';
+import Navigation from '@libs/Navigation/Navigation';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import Text from './Text';
+import UserDetailsTooltip from './UserDetailsTooltip';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import compose from '../libs/compose';
-import * as ReportUtils from '../libs/ReportUtils';
-import * as PolicyUtils from '../libs/PolicyUtils';
-import * as OptionsListUtils from '../libs/OptionsListUtils';
-import ONYXKEYS from '../ONYXKEYS';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import reportPropTypes from '../pages/reportPropTypes';
-import CONST from '../CONST';
const personalDetailsPropTypes = PropTypes.shape({
/** The login of the person (either email or phone number) */
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 36af74bcdac9..6f191f82ba35 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -1,17 +1,17 @@
-import React, {memo} from 'react';
import PropTypes from 'prop-types';
+import React, {memo} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import styles from '../styles/styles';
-import Text from './Text';
-import CONST from '../CONST';
+import * as UserUtils from '@libs/UserUtils';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
+import AttachmentModal from './AttachmentModal';
import Avatar from './Avatar';
-import themeColors from '../styles/themes/default';
-import * as StyleUtils from '../styles/StyleUtils';
import avatarPropTypes from './avatarPropTypes';
import PressableWithoutFocus from './Pressable/PressableWithoutFocus';
-import * as UserUtils from '../libs/UserUtils';
-import AttachmentModal from './AttachmentModal';
+import Text from './Text';
const propTypes = {
icons: PropTypes.arrayOf(avatarPropTypes),
diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 197b6b77acae..3f23a47d5f00 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -1,23 +1,49 @@
-import React from 'react';
-import CONST from '../../CONST';
-import TextInput from '../TextInput';
-import useLocalize from '../../hooks/useLocalize';
+import React, {useState} from 'react';
+import _ from 'underscore';
+import TextInput from '@components/TextInput';
+import useLocalize from '@hooks/useLocalize';
+import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
+import CONST from '@src/CONST';
import * as roomNameInputPropTypes from './roomNameInputPropTypes';
-import InputWrapper from '../Form/InputWrapper';
-import getOperatingSystem from '../../libs/getOperatingSystem';
-import * as RoomNameInputUtils from '../../libs/RoomNameInputUtils';
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, onBlur, shouldDelayFocus, inputID}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
const {translate} = useLocalize();
- const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
+ const [selection, setSelection] = useState();
- const valueParser = (roomName) => RoomNameInputUtils.modifyRoomName(roomName);
+ /**
+ * Calls the onChangeText callback with a modified room name
+ * @param {Event} event
+ */
+ const setModifiedRoomName = (event) => {
+ const roomName = event.nativeEvent.text;
+ const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
+ onChangeText(modifiedRoomName);
+
+ // if custom component has onInputChange, use it to trigger changes (Form input)
+ if (_.isFunction(onInputChange)) {
+ onInputChange(modifiedRoomName);
+ }
+
+ // Prevent cursor jump behaviour:
+ // Check if newRoomNameWithHash is the same as modifiedRoomName
+ // If it is then the room name is valid (does not contain unallowed characters); no action required
+ // If not then the room name contains unvalid characters and we must adjust the cursor position manually
+ // Read more: https://github.com/Expensify/App/issues/12741
+ const oldRoomNameWithHash = value || '';
+ const newRoomNameWithHash = `${CONST.POLICY.ROOM_PREFIX}${roomName}`;
+ if (modifiedRoomName !== newRoomNameWithHash) {
+ const offset = modifiedRoomName.length - oldRoomNameWithHash.length;
+ const newSelection = {
+ start: selection.start + offset,
+ end: selection.end + offset,
+ };
+ setSelection(newSelection);
+ }
+ };
return (
- setSelection(event.nativeEvent.selection)}
errorText={errorText}
- valueParser={valueParser}
autoCapitalize="none"
onBlur={() => isFocused && onBlur()}
shouldDelayFocus={shouldDelayFocus}
@@ -34,7 +63,6 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
spellCheck={false}
shouldInterceptSwipe
- keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
/>
);
}
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
new file mode 100644
index 000000000000..d9b592b1537d
--- /dev/null
+++ b/src/components/RoomNameInput/index.native.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import _ from 'underscore';
+import TextInput from '@components/TextInput';
+import useLocalize from '@hooks/useLocalize';
+import getOperatingSystem from '@libs/getOperatingSystem';
+import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
+import CONST from '@src/CONST';
+import * as roomNameInputPropTypes from './roomNameInputPropTypes';
+
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+ const {translate} = useLocalize();
+
+ /**
+ * Calls the onChangeText callback with a modified room name
+ * @param {Event} event
+ */
+ const setModifiedRoomName = (event) => {
+ const roomName = event.nativeEvent.text;
+ const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
+ onChangeText(modifiedRoomName);
+
+ // if custom component has onInputChange, use it to trigger changes (Form input)
+ if (_.isFunction(onInputChange)) {
+ onInputChange(modifiedRoomName);
+ }
+ };
+
+ const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
+
+ return (
+ isFocused && onBlur()}
+ autoFocus={isFocused && autoFocus}
+ autoCapitalize="none"
+ shouldDelayFocus={shouldDelayFocus}
+ />
+ );
+}
+
+RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
+RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
+RoomNameInput.displayName = 'RoomNameInput';
+
+const RoomNameInputWithRef = React.forwardRef((props, ref) => (
+
+));
+
+RoomNameInputWithRef.displayName = 'RoomNameInputWithRef';
+
+export default RoomNameInputWithRef;
diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index 3d1ad18d27b3..7f8292f0123e 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -1,5 +1,4 @@
import PropTypes from 'prop-types';
-import refPropTypes from '../refPropTypes';
const propTypes = {
/** Callback to execute when the text input is modified correctly */
@@ -15,10 +14,10 @@ const propTypes = {
errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]),
/** A ref forwarded to the TextInput */
- forwardedRef: refPropTypes,
+ forwardedRef: PropTypes.func,
/** The ID used to uniquely identify the input in a Form */
- inputID: PropTypes.string.isRequired,
+ inputID: PropTypes.string,
/** Callback that is called when the text input is blurred */
onBlur: PropTypes.func,
@@ -40,6 +39,7 @@ const defaultProps = {
errorText: '',
forwardedRef: () => {},
+ inputID: undefined,
onBlur: () => {},
autoFocus: false,
shouldDelayFocus: false,
diff --git a/src/components/SVGImage/index.js b/src/components/SVGImage/index.js
index 7374539509e2..de915007cc29 100644
--- a/src/components/SVGImage/index.js
+++ b/src/components/SVGImage/index.js
@@ -1,6 +1,6 @@
import React from 'react';
import {Image} from 'react-native';
-import * as StyleUtils from '../../styles/StyleUtils';
+import * as StyleUtils from '@styles/StyleUtils';
import propTypes from './propTypes';
function SVGImage(props) {
diff --git a/src/components/SafeArea/index.ios.js b/src/components/SafeArea/index.ios.js
index ba9b1f01e298..2ef716d0e977 100644
--- a/src/components/SafeArea/index.ios.js
+++ b/src/components/SafeArea/index.ios.js
@@ -1,7 +1,7 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';
-import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
+import styles from '@styles/styles';
function SafeArea(props) {
return (
diff --git a/src/components/SafeAreaConsumer.js b/src/components/SafeAreaConsumer.js
index 78d7426ba380..25f22ed61ec4 100644
--- a/src/components/SafeAreaConsumer.js
+++ b/src/components/SafeAreaConsumer.js
@@ -1,7 +1,7 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
-import * as StyleUtils from '../styles/StyleUtils';
+import * as StyleUtils from '@styles/StyleUtils';
const propTypes = {
/** Children to render. */
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index e2af40589a8a..0b6b742b1a67 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -1,24 +1,24 @@
-import {Keyboard, View, PanResponder} from 'react-native';
-import React, {useEffect, useRef, useState} from 'react';
-import _ from 'underscore';
+import {useNavigation} from '@react-navigation/native';
import lodashGet from 'lodash/get';
+import React, {useEffect, useRef, useState} from 'react';
+import {Keyboard, PanResponder, View} from 'react-native';
import {PickerAvoidingView} from 'react-native-picker-select';
-import {useNavigation} from '@react-navigation/native';
-import KeyboardAvoidingView from '../KeyboardAvoidingView';
-import CONST from '../../CONST';
-import styles from '../../styles/styles';
-import HeaderGap from '../HeaderGap';
-import OfflineIndicator from '../OfflineIndicator';
-import {propTypes, defaultProps} from './propTypes';
-import SafeAreaConsumer from '../SafeAreaConsumer';
-import TestToolsModal from '../TestToolsModal';
-import toggleTestToolsModal from '../../libs/actions/TestTool';
-import CustomDevMenu from '../CustomDevMenu';
-import * as Browser from '../../libs/Browser';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
-import useKeyboardState from '../../hooks/useKeyboardState';
-import useEnvironment from '../../hooks/useEnvironment';
-import useNetwork from '../../hooks/useNetwork';
+import _ from 'underscore';
+import CustomDevMenu from '@components/CustomDevMenu';
+import HeaderGap from '@components/HeaderGap';
+import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
+import OfflineIndicator from '@components/OfflineIndicator';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import TestToolsModal from '@components/TestToolsModal';
+import useEnvironment from '@hooks/useEnvironment';
+import useKeyboardState from '@hooks/useKeyboardState';
+import useNetwork from '@hooks/useNetwork';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as Browser from '@libs/Browser';
+import styles from '@styles/styles';
+import toggleTestToolsModal from '@userActions/TestTool';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes} from './propTypes';
function ScreenWrapper({
shouldEnableMaxHeight,
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index 848aa28cde43..76c0f81975e4 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import stylePropTypes from '../../styles/stylePropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
const propTypes = {
/** Array of additional styles to add */
diff --git a/src/components/ScrollViewWithContext.js b/src/components/ScrollViewWithContext.js
index 01018601a781..0773f7496d12 100644
--- a/src/components/ScrollViewWithContext.js
+++ b/src/components/ScrollViewWithContext.js
@@ -1,4 +1,4 @@
-import React, {useState, useRef, useMemo} from 'react';
+import React, {useMemo, useRef, useState} from 'react';
import {ScrollView} from 'react-native';
const MIN_SMOOTH_SCROLL_EVENT_THROTTLE = 16;
diff --git a/src/components/Section.js b/src/components/Section.js
index c0b07d1c1453..d2e1069bec37 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -1,11 +1,11 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import Text from './Text';
-import styles from '../styles/styles';
-import MenuItemList from './MenuItemList';
+import styles from '@styles/styles';
import Icon from './Icon';
+import MenuItemList from './MenuItemList';
import menuItemPropTypes from './menuItemPropTypes';
+import Text from './Text';
const propTypes = {
/** An array of props that are pass to individual MenuItem components */
diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js
index 55e410f8baa1..ce451e148030 100644
--- a/src/components/SelectCircle.js
+++ b/src/components/SelectCircle.js
@@ -1,10 +1,10 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
-import themeColors from '../styles/themes/default';
const propTypes = {
/** Should we show the checkmark inside the circle */
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index 171a58ee9fa9..3dd4417367b2 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -1,17 +1,19 @@
+import lodashGet from 'lodash/get';
import React from 'react';
import {View} from 'react-native';
-import lodashGet from 'lodash/get';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import themeColors from '../../styles/themes/default';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
+import RadioListItem from './RadioListItem';
import {baseListItemPropTypes} from './selectionListPropTypes';
-import * as StyleUtils from '../../styles/StyleUtils';
import UserListItem from './UserListItem';
-import RadioListItem from './RadioListItem';
-import OfflineWithFeedback from '../OfflineWithFeedback';
-import CONST from '../../CONST';
function BaseListItem({
item,
@@ -23,6 +25,7 @@ function BaseListItem({
onSelectRow,
onDismissError = () => {},
}) {
+ const {translate} = useLocalize();
const isUserItem = lodashGet(item, 'icons.length', 0) > 0;
const ListItem = isUserItem ? UserListItem : RadioListItem;
@@ -76,7 +79,6 @@ function BaseListItem({
)}
-
-
{!canSelectMultiple && item.isSelected && (
)}
+ {Boolean(item.invitedSecondaryLogin) && (
+
+ {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
+
+ )}
);
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index fdb1f92ca73b..65f98828dca7 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -1,29 +1,29 @@
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
+import lodashGet from 'lodash/get';
import React, {useCallback, useMemo, useRef, useState} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import lodashGet from 'lodash/get';
-import {useFocusEffect, useIsFocused} from '@react-navigation/native';
-import SectionList from '../SectionList';
-import Text from '../Text';
-import styles from '../../styles/styles';
-import TextInput from '../TextInput';
-import CONST from '../../CONST';
-import variables from '../../styles/variables';
-import {propTypes as selectionListPropTypes} from './selectionListPropTypes';
-import useKeyboardShortcut from '../../hooks/useKeyboardShortcut';
-import SafeAreaConsumer from '../SafeAreaConsumer';
-import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState';
-import Checkbox from '../Checkbox';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
-import FixedFooter from '../FixedFooter';
-import Button from '../Button';
-import useLocalize from '../../hooks/useLocalize';
-import Log from '../../libs/Log';
-import OptionsListSkeletonView from '../OptionsListSkeletonView';
-import useActiveElement from '../../hooks/useActiveElement';
+import ArrowKeyFocusManager from '@components/ArrowKeyFocusManager';
+import Button from '@components/Button';
+import Checkbox from '@components/Checkbox';
+import FixedFooter from '@components/FixedFooter';
+import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import SectionList from '@components/SectionList';
+import Text from '@components/Text';
+import TextInput from '@components/TextInput';
+import withKeyboardState, {keyboardStatePropTypes} from '@components/withKeyboardState';
+import useActiveElement from '@hooks/useActiveElement';
+import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useLocalize from '@hooks/useLocalize';
+import Log from '@libs/Log';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
import BaseListItem from './BaseListItem';
-import ArrowKeyFocusManager from '../ArrowKeyFocusManager';
-import themeColors from '../../styles/themes/default';
+import {propTypes as selectionListPropTypes} from './selectionListPropTypes';
const propTypes = {
...keyboardStatePropTypes,
@@ -48,6 +48,7 @@ function BaseSelectionList({
headerMessage = '',
confirmButtonText = '',
onConfirm,
+ headerContent,
footerContent,
showScrollIndicator = false,
showLoadingPlaceholder = false,
@@ -152,31 +153,33 @@ function BaseSelectionList({
* @param {Number} index - the index of the item to scroll to
* @param {Boolean} animated - whether to animate the scroll
*/
- const scrollToIndex = useCallback((index, animated = true) => {
- const item = flattenedSections.allOptions[index];
+ const scrollToIndex = useCallback(
+ (index, animated = true) => {
+ const item = flattenedSections.allOptions[index];
- if (!listRef.current || !item) {
- return;
- }
+ if (!listRef.current || !item) {
+ return;
+ }
- const itemIndex = item.index;
- const sectionIndex = item.sectionIndex;
+ const itemIndex = item.index;
+ const sectionIndex = item.sectionIndex;
- // Note: react-native's SectionList automatically strips out any empty sections.
- // So we need to reduce the sectionIndex to remove any empty sections in front of the one we're trying to scroll to.
- // Otherwise, it will cause an index-out-of-bounds error and crash the app.
- let adjustedSectionIndex = sectionIndex;
- for (let i = 0; i < sectionIndex; i++) {
- if (_.isEmpty(lodashGet(sections, `[${i}].data`))) {
- adjustedSectionIndex--;
+ // Note: react-native's SectionList automatically strips out any empty sections.
+ // So we need to reduce the sectionIndex to remove any empty sections in front of the one we're trying to scroll to.
+ // Otherwise, it will cause an index-out-of-bounds error and crash the app.
+ let adjustedSectionIndex = sectionIndex;
+ for (let i = 0; i < sectionIndex; i++) {
+ if (_.isEmpty(lodashGet(sections, `[${i}].data`))) {
+ adjustedSectionIndex--;
+ }
}
- }
- listRef.current.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated, viewOffset: variables.contentHeaderHeight});
+ listRef.current.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated, viewOffset: variables.contentHeaderHeight});
+ },
- // If we don't disable dependencies here, we would need to make sure that the `sections` prop is stable in every usage of this component.
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ [flattenedSections.allOptions],
+ );
/**
* Logic to run when a row is selected, either with click/press or keyboard hotkeys.
@@ -389,6 +392,7 @@ function BaseSelectionList({
{headerMessage}
)}
+ {Boolean(headerContent) && headerContent}
{flattenedSections.allOptions.length === 0 && showLoadingPlaceholder ? (
) : (
diff --git a/src/components/SelectionList/RadioListItem.js b/src/components/SelectionList/RadioListItem.js
index 83d0fc922f08..0af064e20f8c 100644
--- a/src/components/SelectionList/RadioListItem.js
+++ b/src/components/SelectionList/RadioListItem.js
@@ -1,7 +1,7 @@
import React from 'react';
import {View} from 'react-native';
-import styles from '../../styles/styles';
-import Text from '../Text';
+import Text from '@components/Text';
+import styles from '@styles/styles';
import {radioListItemPropTypes} from './selectionListPropTypes';
function RadioListItem({item, isFocused = false}) {
diff --git a/src/components/SelectionList/UserListItem.js b/src/components/SelectionList/UserListItem.js
index 436ae8cb056b..6e4bd82357eb 100644
--- a/src/components/SelectionList/UserListItem.js
+++ b/src/components/SelectionList/UserListItem.js
@@ -1,11 +1,11 @@
+import lodashGet from 'lodash/get';
import React from 'react';
import {View} from 'react-native';
-import lodashGet from 'lodash/get';
-import styles from '../../styles/styles';
-import Text from '../Text';
+import SubscriptAvatar from '@components/SubscriptAvatar';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import styles from '@styles/styles';
import {userListItemPropTypes} from './selectionListPropTypes';
-import Tooltip from '../Tooltip';
-import SubscriptAvatar from '../SubscriptAvatar';
function UserListItem({item, isFocused = false, showTooltip}) {
return (
diff --git a/src/components/SelectionList/index.js b/src/components/SelectionList/index.js
index d2ad9ab3cf13..24ea60d29be5 100644
--- a/src/components/SelectionList/index.js
+++ b/src/components/SelectionList/index.js
@@ -1,7 +1,7 @@
import React, {forwardRef, useEffect, useState} from 'react';
import {Keyboard} from 'react-native';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import BaseSelectionList from './BaseSelectionList';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
const SelectionList = forwardRef((props, ref) => {
const [isScreenTouched, setIsScreenTouched] = useState(false);
diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
index e75335e39b23..2b53f555134e 100644
--- a/src/components/SelectionList/selectionListPropTypes.js
+++ b/src/components/SelectionList/selectionListPropTypes.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import _ from 'underscore';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
const commonListItemPropTypes = {
/** Whether this item is focused (for arrow key controls) */
@@ -174,6 +174,9 @@ const propTypes = {
/** A ref to forward to the TextInput */
inputRef: PropTypes.oneOfType([PropTypes.object]),
+ /** Custom content to display in the header */
+ headerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
/** Custom content to display in the footer */
footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
};
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 2989fd103850..d2030eac8d7d 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -1,22 +1,22 @@
-import React, {useEffect, useMemo} from 'react';
-import _ from 'underscore';
import PropTypes from 'prop-types';
+import React, {useEffect, useMemo} from 'react';
import {withOnyx} from 'react-native-onyx';
-import CONST from '../CONST';
-import ONYXKEYS from '../ONYXKEYS';
-import compose from '../libs/compose';
-import Permissions from '../libs/Permissions';
-import useNetwork from '../hooks/useNetwork';
-import useLocalize from '../hooks/useLocalize';
-import * as ReportUtils from '../libs/ReportUtils';
-import iouReportPropTypes from '../pages/iouReportPropTypes';
-import * as PaymentMethods from '../libs/actions/PaymentMethods';
+import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import compose from '@libs/compose';
+import Permissions from '@libs/Permissions';
+import * as ReportUtils from '@libs/ReportUtils';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
+import * as BankAccounts from '@userActions/BankAccounts';
+import * as PaymentMethods from '@userActions/PaymentMethods';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
+import * as Expensicons from './Icon/Expensicons';
import KYCWall from './KYCWall';
import withNavigation from './withNavigation';
-import * as Expensicons from './Icon/Expensicons';
-import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
-import * as BankAccounts from '../libs/actions/BankAccounts';
-import ROUTES from '../ROUTES';
const propTypes = {
/** Callback to execute when this button is pressed. Receives a single payment type argument. */
diff --git a/src/components/ShowContextMenuContext.js b/src/components/ShowContextMenuContext.js
index fff233162d74..6248478e5fea 100644
--- a/src/components/ShowContextMenuContext.js
+++ b/src/components/ShowContextMenuContext.js
@@ -1,8 +1,8 @@
import React from 'react';
-import * as ReportActionContextMenu from '../pages/home/report/ContextMenu/ReportActionContextMenu';
-import * as ContextMenuActions from '../pages/home/report/ContextMenu/ContextMenuActions';
-import * as DeviceCapabilities from '../libs/DeviceCapabilities';
-import * as ReportUtils from '../libs/ReportUtils';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
+import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
const ShowContextMenuContext = React.createContext({
anchor: null,
diff --git a/src/components/SignInButtons/AppleAuthWrapper/index.ios.js b/src/components/SignInButtons/AppleAuthWrapper/index.ios.js
index 9f97182b2e7b..69882d89b1fe 100644
--- a/src/components/SignInButtons/AppleAuthWrapper/index.ios.js
+++ b/src/components/SignInButtons/AppleAuthWrapper/index.ios.js
@@ -1,6 +1,6 @@
-import {useEffect} from 'react';
import appleAuth from '@invertase/react-native-apple-authentication';
-import * as Session from '../../../libs/actions/Session';
+import {useEffect} from 'react';
+import * as Session from '@userActions/Session';
/**
* Apple Sign In wrapper for iOS
diff --git a/src/components/SignInButtons/AppleSignIn/index.android.js b/src/components/SignInButtons/AppleSignIn/index.android.js
index 48d2bf3cc861..9dc736789c61 100644
--- a/src/components/SignInButtons/AppleSignIn/index.android.js
+++ b/src/components/SignInButtons/AppleSignIn/index.android.js
@@ -1,10 +1,10 @@
-import React from 'react';
import {appleAuthAndroid} from '@invertase/react-native-apple-authentication';
-import Log from '../../../libs/Log';
-import IconButton from '../IconButton';
-import * as Session from '../../../libs/actions/Session';
-import CONFIG from '../../../CONFIG';
-import CONST from '../../../CONST';
+import React from 'react';
+import IconButton from '@components/SignInButtons/IconButton';
+import Log from '@libs/Log';
+import * as Session from '@userActions/Session';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
/**
* Apple Sign In Configuration for Android.
diff --git a/src/components/SignInButtons/AppleSignIn/index.desktop.js b/src/components/SignInButtons/AppleSignIn/index.desktop.js
index 52ff3ef710b0..cad37d585de4 100644
--- a/src/components/SignInButtons/AppleSignIn/index.desktop.js
+++ b/src/components/SignInButtons/AppleSignIn/index.desktop.js
@@ -1,10 +1,10 @@
import React from 'react';
import {View} from 'react-native';
-import IconButton from '../IconButton';
-import CONFIG from '../../../CONFIG';
-import ROUTES from '../../../ROUTES';
-import styles from '../../../styles/styles';
-import CONST from '../../../CONST';
+import IconButton from '@components/SignInButtons/IconButton';
+import styles from '@styles/styles';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
const appleSignInWebRouteForDesktopFlow = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.APPLE_SIGN_IN}`;
diff --git a/src/components/SignInButtons/AppleSignIn/index.ios.js b/src/components/SignInButtons/AppleSignIn/index.ios.js
index 0c9a8c9e8211..f5c6333dcf7b 100644
--- a/src/components/SignInButtons/AppleSignIn/index.ios.js
+++ b/src/components/SignInButtons/AppleSignIn/index.ios.js
@@ -1,9 +1,9 @@
-import React from 'react';
import appleAuth from '@invertase/react-native-apple-authentication';
-import Log from '../../../libs/Log';
-import IconButton from '../IconButton';
-import * as Session from '../../../libs/actions/Session';
-import CONST from '../../../CONST';
+import React from 'react';
+import IconButton from '@components/SignInButtons/IconButton';
+import Log from '@libs/Log';
+import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
/**
* Apple Sign In method for iOS that returns identityToken.
diff --git a/src/components/SignInButtons/AppleSignIn/index.website.js b/src/components/SignInButtons/AppleSignIn/index.website.js
index 7046de5068b1..adae0a691e13 100644
--- a/src/components/SignInButtons/AppleSignIn/index.website.js
+++ b/src/components/SignInButtons/AppleSignIn/index.website.js
@@ -1,13 +1,13 @@
-import React, {useEffect, useState} from 'react';
+import get from 'lodash/get';
import PropTypes from 'prop-types';
+import React, {useEffect, useState} from 'react';
import Config from 'react-native-config';
-import get from 'lodash/get';
-import getUserLanguage from '../GetUserLanguage';
-import * as Session from '../../../libs/actions/Session';
-import Log from '../../../libs/Log';
-import CONFIG from '../../../CONFIG';
-import CONST from '../../../CONST';
-import withNavigationFocus from '../../withNavigationFocus';
+import getUserLanguage from '@components/SignInButtons/GetUserLanguage';
+import withNavigationFocus from '@components/withNavigationFocus';
+import Log from '@libs/Log';
+import * as Session from '@userActions/Session';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
// react-native-config doesn't trim whitespace on iOS for some reason so we
// add a trim() call to lodashGet here to prevent headaches.
diff --git a/src/components/SignInButtons/GoogleSignIn/index.desktop.js b/src/components/SignInButtons/GoogleSignIn/index.desktop.js
index 95a78f34614b..e69905dcad05 100644
--- a/src/components/SignInButtons/GoogleSignIn/index.desktop.js
+++ b/src/components/SignInButtons/GoogleSignIn/index.desktop.js
@@ -1,11 +1,11 @@
import React from 'react';
import {View} from 'react-native';
-import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
-import IconButton from '../IconButton';
-import CONFIG from '../../../CONFIG';
-import ROUTES from '../../../ROUTES';
-import styles from '../../../styles/styles';
-import CONST from '../../../CONST';
+import IconButton from '@components/SignInButtons/IconButton';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import styles from '@styles/styles';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
const propTypes = {...withLocalizePropTypes};
diff --git a/src/components/SignInButtons/GoogleSignIn/index.native.js b/src/components/SignInButtons/GoogleSignIn/index.native.js
index 099fbfde22fd..c7ac763cfb73 100644
--- a/src/components/SignInButtons/GoogleSignIn/index.native.js
+++ b/src/components/SignInButtons/GoogleSignIn/index.native.js
@@ -1,10 +1,10 @@
-import React from 'react';
import {GoogleSignin, statusCodes} from '@react-native-google-signin/google-signin';
-import Log from '../../../libs/Log';
-import IconButton from '../IconButton';
-import * as Session from '../../../libs/actions/Session';
-import CONST from '../../../CONST';
-import CONFIG from '../../../CONFIG';
+import React from 'react';
+import IconButton from '@components/SignInButtons/IconButton';
+import Log from '@libs/Log';
+import * as Session from '@userActions/Session';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
/**
* Google Sign In method for iOS and android that returns identityToken.
diff --git a/src/components/SignInButtons/GoogleSignIn/index.website.js b/src/components/SignInButtons/GoogleSignIn/index.website.js
index 5362433142af..7f3a3019c318 100644
--- a/src/components/SignInButtons/GoogleSignIn/index.website.js
+++ b/src/components/SignInButtons/GoogleSignIn/index.website.js
@@ -1,10 +1,10 @@
+import PropTypes from 'prop-types';
import React, {useCallback} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
-import * as Session from '../../../libs/actions/Session';
-import CONFIG from '../../../CONFIG';
-import styles from '../../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import styles from '@styles/styles';
+import * as Session from '@userActions/Session';
+import CONFIG from '@src/CONFIG';
const propTypes = {
/** Whether we're rendering in the Desktop Flow, if so show a different button. */
diff --git a/src/components/SignInButtons/IconButton.js b/src/components/SignInButtons/IconButton.js
index 4f1692ddb677..0d18779ea9ba 100644
--- a/src/components/SignInButtons/IconButton.js
+++ b/src/components/SignInButtons/IconButton.js
@@ -1,11 +1,11 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import CONST from '../../CONST';
-import * as Expensicons from '../Icon/Expensicons';
-import Icon from '../Icon';
+import React from 'react';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
const propTypes = {
/** The on press method */
diff --git a/src/components/SignInPageForm/index.native.js b/src/components/SignInPageForm/index.native.js
deleted file mode 100644
index acd1dfe0d197..000000000000
--- a/src/components/SignInPageForm/index.native.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import FormElement from '../FormElement';
-
-function Form(props) {
- // eslint-disable-next-line react/jsx-props-no-spreading
- return ;
-}
-
-Form.displayName = 'Form';
-export default Form;
diff --git a/src/components/SignInPageForm/index.native.tsx b/src/components/SignInPageForm/index.native.tsx
new file mode 100644
index 000000000000..b39e4d681bbe
--- /dev/null
+++ b/src/components/SignInPageForm/index.native.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import FormElement from '@components/FormElement';
+import SignInPageFormProps from './types';
+
+function SignInPageForm(props: SignInPageFormProps) {
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
+}
+
+SignInPageForm.displayName = 'SignInPageForm';
+
+export default SignInPageForm;
diff --git a/src/components/SignInPageForm/index.js b/src/components/SignInPageForm/index.tsx
similarity index 77%
rename from src/components/SignInPageForm/index.js
rename to src/components/SignInPageForm/index.tsx
index 5a1e5a62ff23..1cdc31b33fd9 100644
--- a/src/components/SignInPageForm/index.js
+++ b/src/components/SignInPageForm/index.tsx
@@ -1,14 +1,15 @@
import React, {useEffect, useRef} from 'react';
-import FormElement from '../FormElement';
+import FormElement from '@components/FormElement';
+import SignInPageFormProps from './types';
-const preventFormDefault = (event) => {
+const preventFormDefault = (event: SubmitEvent) => {
// When enter is pressed form is submitted to action url (POST /).
// As we are using controlled component, we need to disable it here.
event.preventDefault();
};
-function Form(props) {
- const form = useRef(null);
+function SignInPageForm(props: SignInPageFormProps) {
+ const form = useRef(null);
useEffect(() => {
const formCurrent = form.current;
@@ -42,6 +43,6 @@ function Form(props) {
);
}
-Form.displayName = 'Form';
+SignInPageForm.displayName = 'SignInPageForm';
-export default Form;
+export default SignInPageForm;
diff --git a/src/components/SignInPageForm/types.ts b/src/components/SignInPageForm/types.ts
new file mode 100644
index 000000000000..02d948f917b9
--- /dev/null
+++ b/src/components/SignInPageForm/types.ts
@@ -0,0 +1,5 @@
+import {ViewProps} from 'react-native';
+
+type SignInPageFormProps = ViewProps;
+
+export default SignInPageFormProps;
diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js
index 889b6a7d1f96..ef212937920e 100644
--- a/src/components/SingleOptionSelector.js
+++ b/src/components/SingleOptionSelector.js
@@ -1,12 +1,12 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import _ from 'underscore';
+import React from 'react';
import {View} from 'react-native';
+import _ from 'underscore';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
import SelectCircle from './SelectCircle';
-import styles from '../styles/styles';
-import CONST from '../CONST';
import Text from './Text';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
diff --git a/src/components/SpacerView.js b/src/components/SpacerView.js
index 3b81bbfa0dc5..60ff7fd85e55 100644
--- a/src/components/SpacerView.js
+++ b/src/components/SpacerView.js
@@ -1,9 +1,9 @@
+import PropTypes from 'prop-types';
import React from 'react';
import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
-import PropTypes from 'prop-types';
-import * as StyleUtils from '../styles/StyleUtils';
-import stylePropTypes from '../styles/stylePropTypes';
-import CONST from '../CONST';
+import stylePropTypes from '@styles/stylePropTypes';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
const propTypes = {
/**
diff --git a/src/components/SplashScreenHider/index.js b/src/components/SplashScreenHider/index.js
index a3f3647ede81..9bbddd2a0891 100644
--- a/src/components/SplashScreenHider/index.js
+++ b/src/components/SplashScreenHider/index.js
@@ -1,6 +1,6 @@
-import {useEffect} from 'react';
import PropTypes from 'prop-types';
-import BootSplash from '../../libs/BootSplash';
+import {useEffect} from 'react';
+import BootSplash from '@libs/BootSplash';
const propTypes = {
/** Splash screen has been hidden */
diff --git a/src/components/SplashScreenHider/index.native.js b/src/components/SplashScreenHider/index.native.js
index dbfac3331484..711ce9f6fb80 100644
--- a/src/components/SplashScreenHider/index.native.js
+++ b/src/components/SplashScreenHider/index.native.js
@@ -1,10 +1,10 @@
-import {useCallback, useRef} from 'react';
import PropTypes from 'prop-types';
+import {useCallback, useRef} from 'react';
import {StyleSheet} from 'react-native';
-import Reanimated, {useSharedValue, withTiming, Easing, useAnimatedStyle, runOnJS} from 'react-native-reanimated';
-import BootSplash from '../../libs/BootSplash';
-import Logo from '../../../assets/images/new-expensify-dark.svg';
-import styles from '../../styles/styles';
+import Reanimated, {Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Logo from '@assets/images/new-expensify-dark.svg';
+import BootSplash from '@libs/BootSplash';
+import styles from '@styles/styles';
const propTypes = {
/** Splash screen has been hidden */
diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
index 378dcc4ebc8b..8bda9d5303c8 100644
--- a/src/components/StatePicker/StateSelectorModal.js
+++ b/src/components/StatePicker/StateSelectorModal.js
@@ -1,16 +1,16 @@
-import _ from 'underscore';
-import React, {useMemo, useEffect} from 'react';
-import PropTypes from 'prop-types';
import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
-import CONST from '../../CONST';
-import Modal from '../Modal';
-import HeaderWithBackButton from '../HeaderWithBackButton';
-import SelectionList from '../SelectionList';
-import useLocalize from '../../hooks/useLocalize';
-import ScreenWrapper from '../ScreenWrapper';
-import styles from '../../styles/styles';
-import searchCountryOptions from '../../libs/searchCountryOptions';
-import StringUtils from '../../libs/StringUtils';
+import PropTypes from 'prop-types';
+import React, {useEffect, useMemo} from 'react';
+import _ from 'underscore';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import useLocalize from '@hooks/useLocalize';
+import searchCountryOptions from '@libs/searchCountryOptions';
+import StringUtils from '@libs/StringUtils';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
const propTypes = {
/** Whether the modal is visible */
diff --git a/src/components/StatePicker/index.js b/src/components/StatePicker/index.js
index 586abc26f702..c36c7e6b97a0 100644
--- a/src/components/StatePicker/index.js
+++ b/src/components/StatePicker/index.js
@@ -1,14 +1,14 @@
+import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
+import PropTypes from 'prop-types';
import React, {useState} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import _ from 'underscore';
-import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
-import styles from '../../styles/styles';
-import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
-import useLocalize from '../../hooks/useLocalize';
-import FormHelpMessage from '../FormHelpMessage';
+import FormHelpMessage from '@components/FormHelpMessage';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import refPropTypes from '@components/refPropTypes';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
import StateSelectorModal from './StateSelectorModal';
-import refPropTypes from '../refPropTypes';
const propTypes = {
/** Error text to display */
diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js
index 66d9812d994e..4a232419aff7 100644
--- a/src/components/SubscriptAvatar.js
+++ b/src/components/SubscriptAvatar.js
@@ -1,13 +1,13 @@
-import React, {memo} from 'react';
+import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
+import React, {memo} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
-import lodashGet from 'lodash/get';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import Avatar from './Avatar';
-import CONST from '../CONST';
-import * as StyleUtils from '../styles/StyleUtils';
import avatarPropTypes from './avatarPropTypes';
import UserDetailsTooltip from './UserDetailsTooltip';
diff --git a/src/components/SwipeableView/index.native.tsx b/src/components/SwipeableView/index.native.tsx
index ac500f025016..91d851101d4e 100644
--- a/src/components/SwipeableView/index.native.tsx
+++ b/src/components/SwipeableView/index.native.tsx
@@ -1,6 +1,6 @@
import React, {useRef} from 'react';
import {PanResponder, View} from 'react-native';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import SwipeableViewProps from './types';
function SwipeableView({children, onSwipeDown}: SwipeableViewProps) {
diff --git a/src/components/Switch.js b/src/components/Switch.js
index 5c8a0da925f3..755cd60f2597 100644
--- a/src/components/Switch.js
+++ b/src/components/Switch.js
@@ -1,10 +1,10 @@
import PropTypes from 'prop-types';
import React, {useEffect, useRef} from 'react';
import {Animated} from 'react-native';
-import CONST from '../CONST';
-import styles from '../styles/styles';
+import useNativeDriver from '@libs/useNativeDriver';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import useNativeDriver from '../libs/useNativeDriver';
const propTypes = {
/** Whether the switch is toggled to the on position */
diff --git a/src/components/TabSelector/TabIcon.js b/src/components/TabSelector/TabIcon.js
index 85f1cd912ff6..d9d802d2076a 100644
--- a/src/components/TabSelector/TabIcon.js
+++ b/src/components/TabSelector/TabIcon.js
@@ -1,8 +1,8 @@
-import {StyleSheet, View, Animated} from 'react-native';
-import React from 'react';
import PropTypes from 'prop-types';
-import Icon from '../Icon';
-import themeColors from '../../styles/themes/default';
+import React from 'react';
+import {Animated, StyleSheet, View} from 'react-native';
+import Icon from '@components/Icon';
+import themeColors from '@styles/themes/default';
const propTypes = {
/** Icon to display on tab */
diff --git a/src/components/TabSelector/TabLabel.js b/src/components/TabSelector/TabLabel.js
index 32c8a384d814..9993e2fe4ed6 100644
--- a/src/components/TabSelector/TabLabel.js
+++ b/src/components/TabSelector/TabLabel.js
@@ -1,7 +1,7 @@
-import {StyleSheet, View, Text, Animated} from 'react-native';
-import React from 'react';
import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
+import React from 'react';
+import {Animated, StyleSheet, Text, View} from 'react-native';
+import styles from '@styles/styles';
const propTypes = {
/** Title of the tab */
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 3483ec10f804..b6ee359dc4ca 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -1,13 +1,13 @@
-import {View} from 'react-native';
-import React, {useMemo, useState} from 'react';
import PropTypes from 'prop-types';
+import React, {useMemo, useState} from 'react';
+import {View} from 'react-native';
import _ from 'underscore';
-import * as Expensicons from '../Icon/Expensicons';
+import * as Expensicons from '@components/Icon/Expensicons';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
import TabSelectorItem from './TabSelectorItem';
-import CONST from '../../CONST';
-import useLocalize from '../../hooks/useLocalize';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
const propTypes = {
/* Navigation state provided by React Navigation */
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 04a576f9dbf0..94861d0ccbba 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,8 +1,8 @@
-import {Animated, StyleSheet} from 'react-native';
-import React from 'react';
import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+import React from 'react';
+import {Animated, StyleSheet} from 'react-native';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import styles from '@styles/styles';
import TabIcon from './TabIcon';
import TabLabel from './TabLabel';
diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js
index 05eca664bd0f..d680cea15c8f 100644
--- a/src/components/TagPicker/index.js
+++ b/src/components/TagPicker/index.js
@@ -1,15 +1,15 @@
-import React, {useMemo, useState} from 'react';
-import _ from 'underscore';
import lodashGet from 'lodash/get';
+import React, {useMemo, useState} from 'react';
import {withOnyx} from 'react-native-onyx';
-import CONST from '../../CONST';
-import ONYXKEYS from '../../ONYXKEYS';
-import styles from '../../styles/styles';
-import useLocalize from '../../hooks/useLocalize';
-import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import * as PolicyUtils from '../../libs/PolicyUtils';
-import OptionsSelector from '../OptionsSelector';
-import {propTypes, defaultProps} from './tagPickerPropTypes';
+import _ from 'underscore';
+import OptionsSelector from '@components/OptionsSelector';
+import useLocalize from '@hooks/useLocalize';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {defaultProps, propTypes} from './tagPickerPropTypes';
function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubmit}) {
const {translate} = useLocalize();
diff --git a/src/components/TagPicker/tagPickerPropTypes.js b/src/components/TagPicker/tagPickerPropTypes.js
index 011885fe0f81..3010ab24a9c1 100644
--- a/src/components/TagPicker/tagPickerPropTypes.js
+++ b/src/components/TagPicker/tagPickerPropTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import tagPropTypes from '../tagPropTypes';
+import tagPropTypes from '@components/tagPropTypes';
const propTypes = {
/** The policyID we are getting tags for */
diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
index a16f415f0fd7..b5dbe49fdd8d 100644
--- a/src/components/TaskHeaderActionButton.js
+++ b/src/components/TaskHeaderActionButton.js
@@ -1,15 +1,15 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
-import reportPropTypes from '../pages/reportPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import styles from '../styles/styles';
+import compose from '@libs/compose';
+import * as ReportUtils from '@libs/ReportUtils';
+import reportPropTypes from '@pages/reportPropTypes';
+import styles from '@styles/styles';
+import * as Task from '@userActions/Task';
+import ONYXKEYS from '@src/ONYXKEYS';
import Button from './Button';
-import * as Task from '../libs/actions/Task';
-import * as ReportUtils from '../libs/ReportUtils';
-import compose from '../libs/compose';
-import ONYXKEYS from '../ONYXKEYS';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
const propTypes = {
/** The report currently being looked at */
diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.js
index 474e4c9bb10c..096bdfd5f97e 100644
--- a/src/components/TestToolMenu.js
+++ b/src/components/TestToolMenu.js
@@ -1,21 +1,21 @@
-import React from 'react';
+import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
+import React from 'react';
import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
-import styles from '../styles/styles';
-import Switch from './Switch';
-import Text from './Text';
-import * as User from '../libs/actions/User';
-import * as Network from '../libs/actions/Network';
-import * as Session from '../libs/actions/Session';
-import ONYXKEYS from '../ONYXKEYS';
+import * as ApiUtils from '@libs/ApiUtils';
+import compose from '@libs/compose';
+import styles from '@styles/styles';
+import * as Network from '@userActions/Network';
+import * as Session from '@userActions/Session';
+import * as User from '@userActions/User';
+import CONFIG from '@src/CONFIG';
+import ONYXKEYS from '@src/ONYXKEYS';
import Button from './Button';
-import TestToolRow from './TestToolRow';
import networkPropTypes from './networkPropTypes';
-import compose from '../libs/compose';
import {withNetwork} from './OnyxProvider';
-import * as ApiUtils from '../libs/ApiUtils';
-import CONFIG from '../CONFIG';
+import Switch from './Switch';
+import TestToolRow from './TestToolRow';
+import Text from './Text';
const propTypes = {
/** User object in Onyx */
diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx
index 540c9dbc5068..149014893a83 100644
--- a/src/components/TestToolRow.tsx
+++ b/src/components/TestToolRow.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import {View} from 'react-native';
-import styles from '../styles/styles';
+import styles from '@styles/styles';
import Text from './Text';
type TestToolRowProps = {
diff --git a/src/components/TestToolsModal.js b/src/components/TestToolsModal.js
index 43a74e48df5d..3ae8223b34e7 100644
--- a/src/components/TestToolsModal.js
+++ b/src/components/TestToolsModal.js
@@ -1,13 +1,13 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import {withOnyx} from 'react-native-onyx';
+import React from 'react';
import {View} from 'react-native';
-import ONYXKEYS from '../ONYXKEYS';
+import {withOnyx} from 'react-native-onyx';
+import styles from '@styles/styles';
+import toggleTestToolsModal from '@userActions/TestTool';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import Modal from './Modal';
-import CONST from '../CONST';
-import toggleTestToolsModal from '../libs/actions/TestTool';
import TestToolMenu from './TestToolMenu';
-import styles from '../styles/styles';
const propTypes = {
/** Details about modal */
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index 60a59aae1520..80181156ee3a 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -1,62 +1,46 @@
import React, {ForwardedRef} from 'react';
// eslint-disable-next-line no-restricted-imports
-import {Text as RNText} from 'react-native';
+import {Text as RNText, TextProps as RNTextProps, StyleSheet} from 'react-native';
import type {TextStyle} from 'react-native';
-import fontFamily from '../styles/fontFamily';
-import themeColors from '../styles/themes/default';
-import variables from '../styles/variables';
+import fontFamily from '@styles/fontFamily';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
-type TextProps = {
+type TextProps = RNTextProps & {
/** The color of the text */
color?: string;
/** The size of the text */
fontSize?: number;
-
/** The alignment of the text */
textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify';
-
/** Any children to display */
children: React.ReactNode;
/** The family of the font to use */
family?: keyof typeof fontFamily;
-
- /** Any additional styles to apply */
- style?: TextStyle | TextStyle[];
};
function Text(
{color = themeColors.text, fontSize = variables.fontSizeNormal, textAlign = 'left', children = null, family = 'EXP_NEUE', style = {}, ...props}: TextProps,
ref: ForwardedRef,
) {
- // If the style prop is an array of styles, we need to mix them all together
- const mergedStyles = !Array.isArray(style)
- ? style
- : style.reduce(
- (finalStyles, s) => ({
- ...finalStyles,
- ...s,
- }),
- {},
- );
const componentStyle: TextStyle = {
color,
fontSize,
textAlign,
fontFamily: fontFamily[family],
- ...mergedStyles,
+ ...StyleSheet.flatten(style),
};
if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {
componentStyle.lineHeight = variables.fontSizeNormalHeight;
}
-
return (
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 9bfdc79fad68..c9b1944b5b81 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -1,28 +1,28 @@
-import _ from 'underscore';
-import React, {useState, useRef, useEffect, useCallback, useMemo} from 'react';
-import {Animated, View, StyleSheet, ActivityIndicator} from 'react-native';
import Str from 'expensify-common/lib/str';
-import RNTextInput from '../RNTextInput';
-import TextInputLabel from './TextInputLabel';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {ActivityIndicator, Animated, StyleSheet, View} from 'react-native';
+import _ from 'underscore';
+import Checkbox from '@components/Checkbox';
+import FormHelpMessage from '@components/FormHelpMessage';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import RNTextInput from '@components/RNTextInput';
+import SwipeInterceptPanResponder from '@components/SwipeInterceptPanResponder';
+import Text from '@components/Text';
+import withLocalize from '@components/withLocalize';
+import * as Browser from '@libs/Browser';
+import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType';
+import isInputAutoFilled from '@libs/isInputAutoFilled';
+import useNativeDriver from '@libs/useNativeDriver';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
import * as baseTextInputPropTypes from './baseTextInputPropTypes';
-import themeColors from '../../styles/themes/default';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import Text from '../Text';
import * as styleConst from './styleConst';
-import * as StyleUtils from '../../styles/StyleUtils';
-import variables from '../../styles/variables';
-import Checkbox from '../Checkbox';
-import getSecureEntryKeyboardType from '../../libs/getSecureEntryKeyboardType';
-import CONST from '../../CONST';
-import FormHelpMessage from '../FormHelpMessage';
-import isInputAutoFilled from '../../libs/isInputAutoFilled';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import withLocalize from '../withLocalize';
-import useNativeDriver from '../../libs/useNativeDriver';
-import * as Browser from '../../libs/Browser';
-import SwipeInterceptPanResponder from '../SwipeInterceptPanResponder';
+import TextInputLabel from './TextInputLabel';
function BaseTextInput(props) {
const initialValue = props.value || props.defaultValue || '';
diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js
index 4267099a56ea..f777eff039bd 100644
--- a/src/components/TextInput/TextInputLabel/index.js
+++ b/src/components/TextInput/TextInputLabel/index.js
@@ -1,8 +1,8 @@
-import React, {useRef, useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
import {Animated} from 'react-native';
-import styles from '../../../styles/styles';
-import {propTypes, defaultProps} from './TextInputLabelPropTypes';
-import CONST from '../../../CONST';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes} from './TextInputLabelPropTypes';
function TextInputLabel({for: inputId, label, labelTranslateY, labelScale}) {
const labelRef = useRef(null);
diff --git a/src/components/TextInput/TextInputLabel/index.native.js b/src/components/TextInput/TextInputLabel/index.native.js
index 9b065d4c722b..51b231287b1f 100644
--- a/src/components/TextInput/TextInputLabel/index.native.js
+++ b/src/components/TextInput/TextInputLabel/index.native.js
@@ -1,8 +1,8 @@
import React, {useState} from 'react';
import {Animated} from 'react-native';
-import styles from '../../../styles/styles';
+import * as styleConst from '@components/TextInput/styleConst';
+import styles from '@styles/styles';
import * as TextInputLabelPropTypes from './TextInputLabelPropTypes';
-import * as styleConst from '../styleConst';
function TextInputLabel(props) {
const [width, setWidth] = useState(0);
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 010121282a45..5f6164d3bc9a 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -1,12 +1,12 @@
import React, {useEffect, useRef} from 'react';
import _ from 'underscore';
-import styles from '../../styles/styles';
-import * as styleConst from './styleConst';
+import * as Browser from '@libs/Browser';
+import DomUtils from '@libs/DomUtils';
+import Visibility from '@libs/Visibility';
+import styles from '@styles/styles';
import BaseTextInput from './BaseTextInput';
import * as baseTextInputPropTypes from './baseTextInputPropTypes';
-import DomUtils from '../../libs/DomUtils';
-import Visibility from '../../libs/Visibility';
-import * as Browser from '../../libs/Browser';
+import * as styleConst from './styleConst';
function TextInput(props) {
const textInputRef = useRef(null);
diff --git a/src/components/TextInput/index.native.js b/src/components/TextInput/index.native.js
index 059550855c0a..d28824a9977b 100644
--- a/src/components/TextInput/index.native.js
+++ b/src/components/TextInput/index.native.js
@@ -1,6 +1,6 @@
import React, {forwardRef, useEffect} from 'react';
import {AppState, Keyboard} from 'react-native';
-import styles from '../../styles/styles';
+import styles from '@styles/styles';
import BaseTextInput from './BaseTextInput';
import * as baseTextInputPropTypes from './baseTextInputPropTypes';
diff --git a/src/components/TextInput/styleConst.js b/src/components/TextInput/styleConst.js
index f57b3f3ca56d..7d2f3021e3be 100644
--- a/src/components/TextInput/styleConst.js
+++ b/src/components/TextInput/styleConst.js
@@ -1,4 +1,4 @@
-import variables from '../../styles/variables';
+import variables from '@styles/variables';
const ACTIVE_LABEL_TRANSLATE_Y = 4;
const ACTIVE_LABEL_SCALE = 0.8668;
diff --git a/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js
index ac0f4ccbe143..ee7abde8c554 100644
--- a/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js
+++ b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js
@@ -1,9 +1,9 @@
import React from 'react';
-import AmountTextInput from '../AmountTextInput';
-import CurrencySymbolButton from '../CurrencySymbolButton';
-import * as CurrencyUtils from '../../libs/CurrencyUtils';
-import useLocalize from '../../hooks/useLocalize';
-import * as MoneyRequestUtils from '../../libs/MoneyRequestUtils';
+import AmountTextInput from '@components/AmountTextInput';
+import CurrencySymbolButton from '@components/CurrencySymbolButton';
+import useLocalize from '@hooks/useLocalize';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
import * as textInputWithCurrencySymbolPropTypes from './textInputWithCurrencySymbolPropTypes';
function BaseTextInputWithCurrencySymbol(props) {
diff --git a/src/components/TextInputWithCurrencySymbol/index.android.js b/src/components/TextInputWithCurrencySymbol/index.android.js
index 57b3c96136e8..f152cd3aa54f 100644
--- a/src/components/TextInputWithCurrencySymbol/index.android.js
+++ b/src/components/TextInputWithCurrencySymbol/index.android.js
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
import _ from 'underscore';
import BaseTextInputWithCurrencySymbol from './BaseTextInputWithCurrencySymbol';
import * as textInputWithCurrencySymbolPropTypes from './textInputWithCurrencySymbolPropTypes';
diff --git a/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js b/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js
index 4e891029e71d..656561c14b14 100644
--- a/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js
+++ b/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import refPropTypes from '../refPropTypes';
+import refPropTypes from '@components/refPropTypes';
const propTypes = {
/** A ref to forward to amount text input */
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index 3f7b7ff729c3..79f3d43a7743 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -1,12 +1,12 @@
-import _ from 'underscore';
-import React from 'react';
import PropTypes from 'prop-types';
-import Text from './Text';
-import styles from '../styles/styles';
-import stylePropTypes from '../styles/stylePropTypes';
-import CONST from '../CONST';
-import * as Link from '../libs/actions/Link';
+import React from 'react';
+import _ from 'underscore';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import * as Link from '@userActions/Link';
+import CONST from '@src/CONST';
import refPropTypes from './refPropTypes';
+import Text from './Text';
const propTypes = {
/** Link to open in new tab */
diff --git a/src/components/TextPill.js b/src/components/TextPill.js
index a8a4f35b64fb..81bb0ca1e037 100644
--- a/src/components/TextPill.js
+++ b/src/components/TextPill.js
@@ -1,9 +1,9 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
import Text from './Text';
-import styles from '../styles/styles';
-import stylePropTypes from '../styles/stylePropTypes';
-import * as StyleUtils from '../styles/StyleUtils';
const propTypes = {
text: PropTypes.string.isRequired,
diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
index 1734e24b03b6..8c2cd0dd9557 100644
--- a/src/components/TextWithEllipsis/index.js
+++ b/src/components/TextWithEllipsis/index.js
@@ -1,10 +1,10 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
-import Text from '../Text';
-import styles from '../../styles/styles';
-import stylePropTypes from '../../styles/stylePropTypes';
-import * as StyleUtils from '../../styles/StyleUtils';
+import Text from '@components/Text';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
const propTypes = {
/** Leading text before the ellipsis */
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index ab7ca57ed721..973aa7e5e189 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -1,17 +1,17 @@
-import React, {useState, useRef} from 'react';
-import {View} from 'react-native';
import PropTypes from 'prop-types';
+import React, {useRef, useState} from 'react';
+import {View} from 'react-native';
import _ from 'underscore';
-import Icon from '../Icon';
-import PopoverMenu from '../PopoverMenu';
-import styles from '../../styles/styles';
-import useLocalize from '../../hooks/useLocalize';
-import Tooltip from '../Tooltip/PopoverAnchorTooltip';
-import * as Expensicons from '../Icon/Expensicons';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PopoverMenu from '@components/PopoverMenu';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
+import useLocalize from '@hooks/useLocalize';
+import * as Browser from '@libs/Browser';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes';
-import CONST from '../../CONST';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import * as Browser from '../../libs/Browser';
const propTypes = {
/** Tooltip for the popup icon */
diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 983f806bb2e2..bbd5e27accc1 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -1,12 +1,12 @@
import lodashClamp from 'lodash/clamp';
-import React, {useCallback, useState} from 'react';
-import {View, Dimensions} from 'react-native';
import PropTypes from 'prop-types';
+import React, {useCallback, useState} from 'react';
+import {Dimensions, View} from 'react-native';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
import ImageWithSizeCalculation from './ImageWithSizeCalculation';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import * as DeviceCapabilities from '../libs/DeviceCapabilities';
-import useWindowDimensions from '../hooks/useWindowDimensions';
const propTypes = {
/** Source URL for the preview image */
diff --git a/src/components/Tooltip/BaseTooltip.js b/src/components/Tooltip/BaseTooltip.js
index 7ef80c552980..3eb905e7a3e5 100644
--- a/src/components/Tooltip/BaseTooltip.js
+++ b/src/components/Tooltip/BaseTooltip.js
@@ -1,16 +1,16 @@
-import _ from 'underscore';
-import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
-import {Animated} from 'react-native';
import {BoundsObserver} from '@react-ng/bounds-observer';
import Str from 'expensify-common/lib/str';
-import TooltipRenderedOnPageBody from './TooltipRenderedOnPageBody';
-import Hoverable from '../Hoverable';
+import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
+import {Animated} from 'react-native';
+import _ from 'underscore';
+import Hoverable from '@components/Hoverable';
+import useLocalize from '@hooks/useLocalize';
+import usePrevious from '@hooks/usePrevious';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import * as tooltipPropTypes from './tooltipPropTypes';
+import TooltipRenderedOnPageBody from './TooltipRenderedOnPageBody';
import TooltipSense from './TooltipSense';
-import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import usePrevious from '../../hooks/usePrevious';
-import useLocalize from '../../hooks/useLocalize';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
const hasHoverSupport = DeviceCapabilities.hasHoverSupport();
diff --git a/src/components/Tooltip/PopoverAnchorTooltip.js b/src/components/Tooltip/PopoverAnchorTooltip.js
index bca49ac9b7bc..6123be56544c 100644
--- a/src/components/Tooltip/PopoverAnchorTooltip.js
+++ b/src/components/Tooltip/PopoverAnchorTooltip.js
@@ -1,8 +1,8 @@
-import React, {useContext, useRef, useMemo} from 'react';
import PropTypes from 'prop-types';
-import {propTypes as tooltipPropTypes, defaultProps as tooltipDefaultProps} from './tooltipPropTypes';
+import React, {useContext, useMemo, useRef} from 'react';
+import {PopoverContext} from '@components/PopoverProvider';
import BaseTooltip from './BaseTooltip';
-import {PopoverContext} from '../PopoverProvider';
+import {defaultProps as tooltipDefaultProps, propTypes as tooltipPropTypes} from './tooltipPropTypes';
const propTypes = {
...tooltipPropTypes,
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
index f61ecaee1059..69d06775ae2a 100644
--- a/src/components/Tooltip/TooltipRenderedOnPageBody.js
+++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -1,10 +1,10 @@
-import React, {useLayoutEffect, useEffect, useState, useRef, useMemo} from 'react';
import PropTypes from 'prop-types';
-import {Animated, View} from 'react-native';
+import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
import ReactDOM from 'react-dom';
-import getTooltipStyles from '../../styles/getTooltipStyles';
-import Text from '../Text';
-import Log from '../../libs/Log';
+import {Animated, View} from 'react-native';
+import Text from '@components/Text';
+import Log from '@libs/Log';
+import getTooltipStyles from '@styles/getTooltipStyles';
const propTypes = {
/** Window width */
diff --git a/src/components/Tooltip/TooltipSense.js b/src/components/Tooltip/TooltipSense.js
index 76cd25294497..0e551e687cf3 100644
--- a/src/components/Tooltip/TooltipSense.js
+++ b/src/components/Tooltip/TooltipSense.js
@@ -1,5 +1,5 @@
import _ from 'underscore';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
let active = false;
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 2e6789ec73f6..19a607220e1c 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -1,7 +1,7 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import {propTypes as tooltipPropTypes, defaultProps as tooltipDefaultProps} from './tooltipPropTypes';
+import React from 'react';
import BaseTooltip from './BaseTooltip';
+import {defaultProps as tooltipDefaultProps, propTypes as tooltipPropTypes} from './tooltipPropTypes';
const propTypes = {
...tooltipPropTypes,
diff --git a/src/components/Tooltip/tooltipPropTypes.js b/src/components/Tooltip/tooltipPropTypes.js
index 684a102e0339..21df0df07f0d 100644
--- a/src/components/Tooltip/tooltipPropTypes.js
+++ b/src/components/Tooltip/tooltipPropTypes.js
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
-import refPropTypes from '../refPropTypes';
-import variables from '../../styles/variables';
-import CONST from '../../CONST';
+import refPropTypes from '@components/refPropTypes';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
const propTypes = {
/** The text to display in the tooltip. If text is ommitted, only children will be rendered. */
diff --git a/src/components/UnorderedList.js b/src/components/UnorderedList.js
index 4500d9fc3538..de8cb4abd7f8 100644
--- a/src/components/UnorderedList.js
+++ b/src/components/UnorderedList.js
@@ -1,9 +1,9 @@
+import PropTypes from 'prop-types';
import React from 'react';
-import _ from 'underscore';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
+import _ from 'underscore';
+import styles from '@styles/styles';
import Text from './Text';
-import styles from '../styles/styles';
const propTypes = {
/** An array of strings to display as an unordered list */
diff --git a/src/components/UnreadActionIndicator.js b/src/components/UnreadActionIndicator.js
index ff1090640570..4ba4ded97820 100755
--- a/src/components/UnreadActionIndicator.js
+++ b/src/components/UnreadActionIndicator.js
@@ -1,8 +1,8 @@
import React from 'react';
import {View} from 'react-native';
-import styles from '../styles/styles';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
import Text from './Text';
-import CONST from '../CONST';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
function UnreadActionIndicator(props) {
diff --git a/src/components/UpdateAppModal/BaseUpdateAppModal.js b/src/components/UpdateAppModal/BaseUpdateAppModal.js
index 7dfa0e7d3a82..07b446172286 100755
--- a/src/components/UpdateAppModal/BaseUpdateAppModal.js
+++ b/src/components/UpdateAppModal/BaseUpdateAppModal.js
@@ -1,7 +1,7 @@
-import React, {useState, memo} from 'react';
-import {propTypes, defaultProps} from './updateAppModalPropTypes';
-import ConfirmModal from '../ConfirmModal';
-import withLocalize from '../withLocalize';
+import React, {memo, useState} from 'react';
+import ConfirmModal from '@components/ConfirmModal';
+import withLocalize from '@components/withLocalize';
+import {defaultProps, propTypes} from './updateAppModalPropTypes';
function BaseUpdateAppModal({translate, onSubmit}) {
const [isModalOpen, setIsModalOpen] = useState(true);
diff --git a/src/components/UpdateAppModal/index.desktop.js b/src/components/UpdateAppModal/index.desktop.js
index 424b7a616e39..397ce2c75ea3 100644
--- a/src/components/UpdateAppModal/index.desktop.js
+++ b/src/components/UpdateAppModal/index.desktop.js
@@ -1,7 +1,7 @@
import React from 'react';
+import ELECTRON_EVENTS from '../../../desktop/ELECTRON_EVENTS';
import BaseUpdateAppModal from './BaseUpdateAppModal';
import {propTypes} from './updateAppModalPropTypes';
-import ELECTRON_EVENTS from '../../../desktop/ELECTRON_EVENTS';
function UpdateAppModal(props) {
const updateApp = () => {
diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
index 5f124cb21467..871173d01b56 100644
--- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
+++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
@@ -1,18 +1,18 @@
-import React, {useCallback} from 'react';
-import {View, Text} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
import Str from 'expensify-common/lib/str';
import lodashGet from 'lodash/get';
+import React, {useCallback} from 'react';
+import {Text, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import Avatar from '../Avatar';
-import Tooltip from '../Tooltip';
-import {propTypes, defaultProps} from './userDetailsTooltipPropTypes';
-import styles from '../../styles/styles';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as UserUtils from '../../libs/UserUtils';
-import CONST from '../../CONST';
-import * as LocalePhoneNumber from '../../libs/LocalePhoneNumber';
-import useLocalize from '../../hooks/useLocalize';
+import Avatar from '@components/Avatar';
+import Tooltip from '@components/Tooltip';
+import useLocalize from '@hooks/useLocalize';
+import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
+import * as UserUtils from '@libs/UserUtils';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {defaultProps, propTypes} from './userDetailsTooltipPropTypes';
function BaseUserDetailsTooltip(props) {
const {translate} = useLocalize();
diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js
index 86778e4a1019..ea5cd4337071 100644
--- a/src/components/UserDetailsTooltip/index.js
+++ b/src/components/UserDetailsTooltip/index.js
@@ -1,7 +1,7 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import {propTypes as userDetailsTooltipPropTypes, defaultProps as userDetailsTooltipDefaultProps} from './userDetailsTooltipPropTypes';
+import React from 'react';
import BaseUserDetailsTooltip from './BaseUserDetailsTooltip';
+import {defaultProps as userDetailsTooltipDefaultProps, propTypes as userDetailsTooltipPropTypes} from './userDetailsTooltipPropTypes';
const propTypes = {
...userDetailsTooltipPropTypes,
diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
index f311ed0d18df..538e9ad5348f 100644
--- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
+++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
-import personalDetailsPropType from '../../pages/personalDetailsPropType';
-import avatarPropTypes from '../avatarPropTypes';
+import avatarPropTypes from '@components/avatarPropTypes';
+import personalDetailsPropType from '@pages/personalDetailsPropType';
const propTypes = {
/** User's Account ID */
diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.js
index e31e0772a8c5..f75cc3f19d49 100644
--- a/src/components/ValidateCode/ExpiredValidateCodeModal.js
+++ b/src/components/ValidateCode/ExpiredValidateCodeModal.js
@@ -1,13 +1,13 @@
import React from 'react';
import {View} from 'react-native';
-import themeColors from '../../styles/themes/default';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import Text from '../Text';
-import * as Expensicons from '../Icon/Expensicons';
-import * as Illustrations from '../Icon/Illustrations';
-import variables from '../../styles/variables';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
const propTypes = {
...withLocalizePropTypes,
diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js
index e96505470eba..dd6085646120 100644
--- a/src/components/ValidateCode/JustSignedInModal.js
+++ b/src/components/ValidateCode/JustSignedInModal.js
@@ -1,14 +1,14 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
import {View} from 'react-native';
-import themeColors from '../../styles/themes/default';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import Text from '../Text';
-import * as Expensicons from '../Icon/Expensicons';
-import * as Illustrations from '../Icon/Illustrations';
-import variables from '../../styles/variables';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Text from '@components/Text';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
const propTypes = {
...withLocalizePropTypes,
diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js
index ceebc54a47af..173467d16b14 100644
--- a/src/components/ValidateCode/ValidateCodeModal.js
+++ b/src/components/ValidateCode/ValidateCodeModal.js
@@ -1,20 +1,20 @@
-import React, {useCallback} from 'react';
-import PropTypes from 'prop-types';
-import {compose} from 'underscore';
-import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import React, {useCallback} from 'react';
import {View} from 'react-native';
-import themeColors from '../../styles/themes/default';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import Text from '../Text';
-import * as Expensicons from '../Icon/Expensicons';
-import * as Illustrations from '../Icon/Illustrations';
-import variables from '../../styles/variables';
-import TextLink from '../TextLink';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as Session from '../../libs/actions/Session';
+import {withOnyx} from 'react-native-onyx';
+import {compose} from 'underscore';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import variables from '@styles/variables';
+import * as Session from '@userActions/Session';
+import ONYXKEYS from '@src/ONYXKEYS';
const propTypes = {
/** Code to display. */
diff --git a/src/components/ValuePicker/ValueSelectorModal.js b/src/components/ValuePicker/ValueSelectorModal.js
index 23aac4839d2a..0a524a324959 100644
--- a/src/components/ValuePicker/ValueSelectorModal.js
+++ b/src/components/ValuePicker/ValueSelectorModal.js
@@ -1,12 +1,12 @@
-import React, {useState, useEffect} from 'react';
-import PropTypes from 'prop-types';
import _ from 'lodash';
-import CONST from '../../CONST';
-import HeaderWithBackButton from '../HeaderWithBackButton';
-import SelectionList from '../SelectionList';
-import Modal from '../Modal';
-import ScreenWrapper from '../ScreenWrapper';
-import styles from '../../styles/styles';
+import PropTypes from 'prop-types';
+import React, {useEffect, useState} from 'react';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
const propTypes = {
/** Whether the modal is visible */
diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js
index 09573c1fdeca..e9ec200b7a7d 100644
--- a/src/components/ValuePicker/index.js
+++ b/src/components/ValuePicker/index.js
@@ -1,14 +1,14 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
import React, {useState} from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import styles from '../../styles/styles';
-import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
+import FormHelpMessage from '@components/FormHelpMessage';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import refPropTypes from '@components/refPropTypes';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import variables from '@styles/variables';
import ValueSelectorModal from './ValueSelectorModal';
-import FormHelpMessage from '../FormHelpMessage';
-import refPropTypes from '../refPropTypes';
-import * as StyleUtils from '../../styles/StyleUtils';
-import variables from '../../styles/variables';
const propTypes = {
/** Form Error description */
diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
index ed1b71c8fb0f..ceb10de0f909 100755
--- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
+++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -1,24 +1,24 @@
-import _ from 'underscore';
-import React, {useState, useRef, useEffect, useCallback} from 'react';
-import {View, Dimensions} from 'react-native';
import PropTypes from 'prop-types';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import Popover from '../Popover';
-import MenuItem from '../MenuItem';
-import ZoomIcon from '../../../assets/images/zoom-icon.svg';
-import GoogleMeetIcon from '../../../assets/images/google-meet.svg';
-import CONST from '../../CONST';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import compose from '../../libs/compose';
-import Tooltip from '../Tooltip/PopoverAnchorTooltip';
-import {propTypes as videoChatButtonAndMenuPropTypes, defaultProps} from './videoChatButtonAndMenuPropTypes';
-import * as Session from '../../libs/actions/Session';
-import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
-import * as Link from '../../libs/actions/Link';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {Dimensions, View} from 'react-native';
+import _ from 'underscore';
+import GoogleMeetIcon from '@assets/images/google-meet.svg';
+import ZoomIcon from '@assets/images/zoom-icon.svg';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
+import Popover from '@components/Popover';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import compose from '@libs/compose';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import * as Link from '@userActions/Link';
+import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
+import {defaultProps, propTypes as videoChatButtonAndMenuPropTypes} from './videoChatButtonAndMenuPropTypes';
const propTypes = {
/** Link to open when user wants to create a new google meet meeting */
diff --git a/src/components/VideoChatButtonAndMenu/index.android.js b/src/components/VideoChatButtonAndMenu/index.android.js
index 53f43b73d600..fe19a530aa95 100644
--- a/src/components/VideoChatButtonAndMenu/index.android.js
+++ b/src/components/VideoChatButtonAndMenu/index.android.js
@@ -1,7 +1,7 @@
import React from 'react';
-import CONST from '../../CONST';
-import {propTypes, defaultProps} from './videoChatButtonAndMenuPropTypes';
+import CONST from '@src/CONST';
import BaseVideoChatButtonAndMenu from './BaseVideoChatButtonAndMenu';
+import {defaultProps, propTypes} from './videoChatButtonAndMenuPropTypes';
// On Android creating a new google meet meeting requires the CALL_PHONE permission in some cases
// so we're just opening the google meet app instead, more details:
diff --git a/src/components/VideoChatButtonAndMenu/index.js b/src/components/VideoChatButtonAndMenu/index.js
index bf3be904103a..f3f657066e54 100644
--- a/src/components/VideoChatButtonAndMenu/index.js
+++ b/src/components/VideoChatButtonAndMenu/index.js
@@ -1,7 +1,7 @@
import React from 'react';
-import CONST from '../../CONST';
-import {propTypes, defaultProps} from './videoChatButtonAndMenuPropTypes';
+import CONST from '@src/CONST';
import BaseVideoChatButtonAndMenu from './BaseVideoChatButtonAndMenu';
+import {defaultProps, propTypes} from './videoChatButtonAndMenuPropTypes';
function VideoChatButtonAndMenu(props) {
return (
diff --git a/src/components/WalletSection.js b/src/components/WalletSection.js
index ec8a1680937c..d79d2be0ddc9 100644
--- a/src/components/WalletSection.js
+++ b/src/components/WalletSection.js
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
+import styles from '@styles/styles';
import Section from './Section';
-import styles from '../styles/styles';
const propTypes = {
/** Contents to display inside the section */
diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js
index b4d87bf4e0e4..59508f8057ab 100644
--- a/src/components/WalletStatementModal/index.js
+++ b/src/components/WalletStatementModal/index.js
@@ -1,18 +1,18 @@
-import React, {useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
+import React, {useState} from 'react';
import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
-import compose from '../../libs/compose';
-import withLocalize from '../withLocalize';
-import ONYXKEYS from '../../ONYXKEYS';
-import {walletStatementPropTypes, walletStatementDefaultProps} from './WalletStatementModalPropTypes';
-import styles from '../../styles/styles';
-import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import ROUTES from '../../ROUTES';
-import Navigation from '../../libs/Navigation/Navigation';
-import * as Report from '../../libs/actions/Report';
-import CONST from '../../CONST';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import withLocalize from '@components/withLocalize';
+import compose from '@libs/compose';
+import Navigation from '@libs/Navigation/Navigation';
+import styles from '@styles/styles';
+import * as Report from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import {walletStatementDefaultProps, walletStatementPropTypes} from './WalletStatementModalPropTypes';
function WalletStatementModal({statementPageURL, session}) {
const [isLoading, setIsLoading] = useState(true);
diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js
index 38d1f90af00d..9c2aea8e8ec4 100644
--- a/src/components/WalletStatementModal/index.native.js
+++ b/src/components/WalletStatementModal/index.native.js
@@ -1,15 +1,15 @@
-import React, {useCallback, useRef} from 'react';
-import {WebView} from 'react-native-webview';
import lodashGet from 'lodash/get';
+import React, {useCallback, useRef} from 'react';
import {withOnyx} from 'react-native-onyx';
+import {WebView} from 'react-native-webview';
import _ from 'underscore';
-import {walletStatementPropTypes, walletStatementDefaultProps} from './WalletStatementModalPropTypes';
-import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import * as Report from '../../libs/actions/Report';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import ONYXKEYS from '../../ONYXKEYS';
-import CONST from '../../CONST';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import Navigation from '@libs/Navigation/Navigation';
+import * as Report from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import {walletStatementDefaultProps, walletStatementPropTypes} from './WalletStatementModalPropTypes';
const IOU_ROUTES = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
const renderLoading = () => ;
diff --git a/src/components/ZeroWidthView/index.js b/src/components/ZeroWidthView/index.js
index 6c3809a40a04..58b2dfa039ef 100644
--- a/src/components/ZeroWidthView/index.js
+++ b/src/components/ZeroWidthView/index.js
@@ -1,8 +1,8 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import * as EmojiUtils from '../../libs/EmojiUtils';
-import * as Browser from '../../libs/Browser';
-import Text from '../Text';
+import React from 'react';
+import Text from '@components/Text';
+import * as Browser from '@libs/Browser';
+import * as EmojiUtils from '@libs/EmojiUtils';
const propTypes = {
/** If this is the Concierge chat, we'll open the modal for requesting a setup call instead of showing popover menu */
diff --git a/src/components/avatarPropTypes.js b/src/components/avatarPropTypes.js
index 915eac995fcb..9ecea0fad778 100644
--- a/src/components/avatarPropTypes.js
+++ b/src/components/avatarPropTypes.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
export default PropTypes.shape({
source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
diff --git a/src/components/createOnyxContext.tsx b/src/components/createOnyxContext.tsx
index a0ac5942b098..f7b2d6cbf297 100644
--- a/src/components/createOnyxContext.tsx
+++ b/src/components/createOnyxContext.tsx
@@ -1,9 +1,9 @@
-import React, {ComponentType, ForwardRefExoticComponent, ForwardedRef, PropsWithoutRef, ReactNode, RefAttributes, createContext, forwardRef, useContext} from 'react';
-import {withOnyx} from 'react-native-onyx';
import Str from 'expensify-common/lib/str';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-import {OnyxCollectionKey, OnyxKey, OnyxKeyValue, OnyxValues} from '../ONYXKEYS';
-import ChildrenProps from '../types/utils/ChildrenProps';
+import React, {ComponentType, createContext, ForwardedRef, forwardRef, ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes, useContext} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import {OnyxCollectionKey, OnyxKey, OnyxKeyValue, OnyxValues} from '@src/ONYXKEYS';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
type OnyxKeys = (OnyxKey | OnyxCollectionKey) & keyof OnyxValues;
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 4b37e8040d45..d4b12b9cf479 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import _ from 'underscore';
-import CONST from '../CONST';
-import stylePropTypes from '../styles/stylePropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
+import CONST from '@src/CONST';
import avatarPropTypes from './avatarPropTypes';
import refPropTypes from './refPropTypes';
diff --git a/src/components/optionPropTypes.js b/src/components/optionPropTypes.js
index 709298036f07..d5ef485b8276 100644
--- a/src/components/optionPropTypes.js
+++ b/src/components/optionPropTypes.js
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
-import CONST from '../CONST';
-import participantPropTypes from './participantPropTypes';
+import CONST from '@src/CONST';
import avatarPropTypes from './avatarPropTypes';
+import participantPropTypes from './participantPropTypes';
export default PropTypes.shape({
// Text to display
diff --git a/src/components/transactionPropTypes.js b/src/components/transactionPropTypes.js
index e3e06bb00c01..049fe60630e5 100644
--- a/src/components/transactionPropTypes.js
+++ b/src/components/transactionPropTypes.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import _ from 'underscore';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
export default PropTypes.shape({
/** The transaction id */
diff --git a/src/components/withCurrentReportID.js b/src/components/withCurrentReportID.js
index 18f716981e65..ab1b5abc2395 100644
--- a/src/components/withCurrentReportID.js
+++ b/src/components/withCurrentReportID.js
@@ -1,8 +1,7 @@
-import React, {createContext, forwardRef, useCallback, useState, useMemo} from 'react';
import PropTypes from 'prop-types';
-
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-import Navigation from '../libs/Navigation/Navigation';
+import React, {createContext, forwardRef, useCallback, useMemo, useState} from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import Navigation from '@libs/Navigation/Navigation';
const CurrentReportIDContext = createContext(null);
diff --git a/src/components/withCurrentUserPersonalDetails.tsx b/src/components/withCurrentUserPersonalDetails.tsx
index e1472f280f17..ed580b4dbe4a 100644
--- a/src/components/withCurrentUserPersonalDetails.tsx
+++ b/src/components/withCurrentUserPersonalDetails.tsx
@@ -1,9 +1,9 @@
-import React, {ComponentType, RefAttributes, ForwardedRef, useMemo} from 'react';
+import React, {ComponentType, ForwardedRef, RefAttributes, useMemo} from 'react';
import {OnyxEntry, withOnyx} from 'react-native-onyx';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-import ONYXKEYS from '../ONYXKEYS';
-import personalDetailsPropType from '../pages/personalDetailsPropType';
-import type {PersonalDetails, Session} from '../types/onyx';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import personalDetailsPropType from '@pages/personalDetailsPropType';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {PersonalDetails, Session} from '@src/types/onyx';
type CurrentUserPersonalDetails = PersonalDetails | Record;
diff --git a/src/components/withEnvironment.tsx b/src/components/withEnvironment.tsx
index 0f065eac68fe..1bfc147f0db3 100644
--- a/src/components/withEnvironment.tsx
+++ b/src/components/withEnvironment.tsx
@@ -1,8 +1,8 @@
-import React, {ComponentType, RefAttributes, ReactNode, ForwardedRef, ReactElement, createContext, useState, useEffect, forwardRef, useContext, useMemo} from 'react';
+import React, {ComponentType, createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefAttributes, useContext, useEffect, useMemo, useState} from 'react';
import {ValueOf} from 'type-fest';
-import * as Environment from '../libs/Environment/Environment';
-import CONST from '../CONST';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
+import * as Environment from '@libs/Environment/Environment';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import CONST from '@src/CONST';
type EnvironmentProviderProps = {
/** Actual content wrapped by this component */
diff --git a/src/components/withKeyboardState.js b/src/components/withKeyboardState.js
index 3154f7e98d67..d89a4a8228bf 100755
--- a/src/components/withKeyboardState.js
+++ b/src/components/withKeyboardState.js
@@ -1,7 +1,7 @@
-import React, {forwardRef, createContext, useEffect, useState, useMemo} from 'react';
-import {Keyboard} from 'react-native';
import PropTypes from 'prop-types';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
+import React, {createContext, forwardRef, useEffect, useMemo, useState} from 'react';
+import {Keyboard} from 'react-native';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
const KeyboardStateContext = createContext(null);
const keyboardStatePropTypes = {
diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index 65e98f78f312..346d402829bd 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -1,7 +1,7 @@
-import React, {forwardRef} from 'react';
import PropTypes from 'prop-types';
+import React, {forwardRef} from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
import {LocaleContext} from './LocaleContextProvider';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
const withLocalizePropTypes = {
/** Returns translated string for given locale and phrase */
diff --git a/src/components/withNavigation.tsx b/src/components/withNavigation.tsx
index c5842fdacc44..0834eabc2adb 100644
--- a/src/components/withNavigation.tsx
+++ b/src/components/withNavigation.tsx
@@ -1,6 +1,6 @@
-import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
import {NavigationProp, useNavigation} from '@react-navigation/native';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
+import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
type WithNavigationProps = {
navigation: NavigationProp;
diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
index 413d0734507a..a03c1155fa46 100644
--- a/src/components/withNavigationFallback.js
+++ b/src/components/withNavigationFallback.js
@@ -1,6 +1,6 @@
-import React, {forwardRef, useContext, useMemo} from 'react';
import {NavigationContext} from '@react-navigation/core';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
+import React, {forwardRef, useContext, useMemo} from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
import refPropTypes from './refPropTypes';
export default function (WrappedComponent) {
diff --git a/src/components/withNavigationFocus.tsx b/src/components/withNavigationFocus.tsx
index f3f1d3561d9c..8dcd06ecb4c8 100644
--- a/src/components/withNavigationFocus.tsx
+++ b/src/components/withNavigationFocus.tsx
@@ -1,6 +1,6 @@
-import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
import {useIsFocused} from '@react-navigation/native';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
+import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
type WithNavigationFocusProps = {
isFocused: boolean;
diff --git a/src/components/withTheme.js b/src/components/withTheme.js
index 753a75d2c354..1d8af53de01d 100644
--- a/src/components/withTheme.js
+++ b/src/components/withTheme.js
@@ -1,7 +1,7 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import useTheme from '../styles/themes/useTheme';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
+import React from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import useTheme from '@styles/themes/useTheme';
import refPropTypes from './refPropTypes';
const withThemePropTypes = {
diff --git a/src/components/withThemeStyles.js b/src/components/withThemeStyles.js
index 63356e20d990..533efa79a580 100644
--- a/src/components/withThemeStyles.js
+++ b/src/components/withThemeStyles.js
@@ -1,7 +1,7 @@
-import React from 'react';
import PropTypes from 'prop-types';
-import useThemeStyles from '../styles/useThemeStyles';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
+import React from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import useThemeStyles from '@styles/useThemeStyles';
import refPropTypes from './refPropTypes';
const withThemeStylesPropTypes = {
diff --git a/src/components/withToggleVisibilityView.js b/src/components/withToggleVisibilityView.js
index c168b49ced20..04c6ab8e8481 100644
--- a/src/components/withToggleVisibilityView.js
+++ b/src/components/withToggleVisibilityView.js
@@ -1,8 +1,8 @@
+import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../styles/styles';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import styles from '@styles/styles';
import refPropTypes from './refPropTypes';
const toggleVisibilityViewPropTypes = {
diff --git a/src/components/withViewportOffsetTop.tsx b/src/components/withViewportOffsetTop.tsx
index e2e1dc2d3484..d6c170b20480 100644
--- a/src/components/withViewportOffsetTop.tsx
+++ b/src/components/withViewportOffsetTop.tsx
@@ -1,6 +1,6 @@
-import React, {useEffect, forwardRef, useState, ComponentType, RefAttributes, ForwardedRef} from 'react';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-import addViewportResizeListener from '../libs/VisualViewport';
+import React, {ComponentType, ForwardedRef, forwardRef, RefAttributes, useEffect, useState} from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import addViewportResizeListener from '@libs/VisualViewport';
type ViewportOffsetTopProps = {
// viewportOffsetTop returns the offset of the top edge of the visual viewport from the
diff --git a/src/components/withWindowDimensions/index.js b/src/components/withWindowDimensions/index.js
index 16e5985e0985..f46624b2f41c 100644
--- a/src/components/withWindowDimensions/index.js
+++ b/src/components/withWindowDimensions/index.js
@@ -1,11 +1,11 @@
-import React, {forwardRef, createContext, useState, useEffect, useMemo} from 'react';
-import PropTypes from 'prop-types';
import lodashDebounce from 'lodash/debounce';
+import PropTypes from 'prop-types';
+import React, {createContext, forwardRef, useEffect, useMemo, useState} from 'react';
import {Dimensions} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import getComponentDisplayName from '../../libs/getComponentDisplayName';
-import variables from '../../styles/variables';
-import getWindowHeightAdjustment from '../../libs/getWindowHeightAdjustment';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import getWindowHeightAdjustment from '@libs/getWindowHeightAdjustment';
+import variables from '@styles/variables';
const WindowDimensionsContext = createContext(null);
const windowDimensionsPropTypes = {
diff --git a/src/components/withWindowDimensions/index.native.js b/src/components/withWindowDimensions/index.native.js
index 363196b3fd4d..91d81f5fb4e0 100644
--- a/src/components/withWindowDimensions/index.native.js
+++ b/src/components/withWindowDimensions/index.native.js
@@ -1,10 +1,10 @@
-import React, {forwardRef, createContext, useState, useEffect, useMemo} from 'react';
import PropTypes from 'prop-types';
+import React, {createContext, forwardRef, useEffect, useMemo, useState} from 'react';
import {Dimensions} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import getComponentDisplayName from '../../libs/getComponentDisplayName';
-import variables from '../../styles/variables';
-import getWindowHeightAdjustment from '../../libs/getWindowHeightAdjustment';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import getWindowHeightAdjustment from '@libs/getWindowHeightAdjustment';
+import variables from '@styles/variables';
const WindowDimensionsContext = createContext(null);
const windowDimensionsPropTypes = {
diff --git a/src/hooks/useArrowKeyFocusManager.js b/src/hooks/useArrowKeyFocusManager.js
index 58cecb169249..a633dba5ffc5 100644
--- a/src/hooks/useArrowKeyFocusManager.js
+++ b/src/hooks/useArrowKeyFocusManager.js
@@ -1,6 +1,6 @@
-import {useState, useEffect, useCallback, useMemo} from 'react';
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import CONST from '@src/CONST';
import useKeyboardShortcut from './useKeyboardShortcut';
-import CONST from '../CONST';
/**
* A hook that makes it easy to use the arrow keys to manage focus of items in a list
diff --git a/src/hooks/useAutoFocusInput.js b/src/hooks/useAutoFocusInput.js
index 6611f867f210..275fed67f52d 100644
--- a/src/hooks/useAutoFocusInput.js
+++ b/src/hooks/useAutoFocusInput.js
@@ -1,6 +1,6 @@
import {useFocusEffect} from '@react-navigation/native';
-import {useState, useEffect, useRef, useCallback} from 'react';
-import CONST from '../CONST';
+import {useCallback, useEffect, useRef, useState} from 'react';
+import CONST from '@src/CONST';
export default function useAutoFocusInput() {
const [isInputInitialized, setIsInputInitialized] = useState(false);
diff --git a/src/hooks/useCopySelectionHelper.ts b/src/hooks/useCopySelectionHelper.ts
index b41bfb3c4aee..be7830dc6170 100644
--- a/src/hooks/useCopySelectionHelper.ts
+++ b/src/hooks/useCopySelectionHelper.ts
@@ -1,9 +1,9 @@
-import {useEffect} from 'react';
import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import CONST from '../CONST';
-import KeyboardShortcut from '../libs/KeyboardShortcut';
-import Clipboard from '../libs/Clipboard';
-import SelectionScraper from '../libs/SelectionScraper';
+import {useEffect} from 'react';
+import Clipboard from '@libs/Clipboard';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import SelectionScraper from '@libs/SelectionScraper';
+import CONST from '@src/CONST';
function copySelectionToClipboard() {
const selection = SelectionScraper.getCurrentSelection();
diff --git a/src/hooks/useCurrentReportID.js b/src/hooks/useCurrentReportID.js
index b22ac55616e8..1b3e4b706c4c 100644
--- a/src/hooks/useCurrentReportID.js
+++ b/src/hooks/useCurrentReportID.js
@@ -1,5 +1,5 @@
import {useContext} from 'react';
-import {CurrentReportIDContext} from '../components/withCurrentReportID';
+import {CurrentReportIDContext} from '@components/withCurrentReportID';
export default function useCurrentReportID() {
return useContext(CurrentReportIDContext);
diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js
index 8995a0443b85..874f9d72b276 100644
--- a/src/hooks/useDebounce.js
+++ b/src/hooks/useDebounce.js
@@ -1,5 +1,5 @@
-import {useEffect, useRef} from 'react';
import lodashDebounce from 'lodash/debounce';
+import {useEffect, useRef} from 'react';
/**
* Create and return a debounced function.
diff --git a/src/hooks/useDelayedInputFocus.js b/src/hooks/useDelayedInputFocus.js
index 2fd94327a588..7a4a64104e48 100644
--- a/src/hooks/useDelayedInputFocus.js
+++ b/src/hooks/useDelayedInputFocus.js
@@ -1,6 +1,6 @@
-import {useCallback, useRef} from 'react';
import {useFocusEffect} from '@react-navigation/native';
-import CONST from '../CONST';
+import {useCallback, useRef} from 'react';
+import CONST from '@src/CONST';
/**
* Focus a text input when a screen is navigated to, after the specified time delay has elapsed.
diff --git a/src/hooks/useDragAndDrop.ts b/src/hooks/useDragAndDrop.ts
index 27230dd94679..3f0142492d0d 100644
--- a/src/hooks/useDragAndDrop.ts
+++ b/src/hooks/useDragAndDrop.ts
@@ -1,5 +1,5 @@
-import React, {useEffect, useRef, useState, useCallback} from 'react';
import {useIsFocused} from '@react-navigation/native';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
const COPY_DROP_EFFECT = 'copy';
const NONE_DROP_EFFECT = 'none';
diff --git a/src/hooks/useEnvironment.ts b/src/hooks/useEnvironment.ts
index 0b1601ee972a..60e0b4a12394 100644
--- a/src/hooks/useEnvironment.ts
+++ b/src/hooks/useEnvironment.ts
@@ -1,7 +1,7 @@
import {useContext} from 'react';
-import CONST from '../CONST';
-import {EnvironmentContext} from '../components/withEnvironment';
-import type {EnvironmentContextValue} from '../components/withEnvironment';
+import {EnvironmentContext} from '@components/withEnvironment';
+import type {EnvironmentContextValue} from '@components/withEnvironment';
+import CONST from '@src/CONST';
type UseEnvironment = Partial & {
isProduction: boolean;
diff --git a/src/hooks/useKeyboardShortcut.js b/src/hooks/useKeyboardShortcut.js
index b8e297c966ed..470d29243fe8 100644
--- a/src/hooks/useKeyboardShortcut.js
+++ b/src/hooks/useKeyboardShortcut.js
@@ -1,6 +1,6 @@
import {useEffect} from 'react';
-import KeyboardShortcut from '../libs/KeyboardShortcut';
-import CONST from '../CONST';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import CONST from '@src/CONST';
/**
* Register a keyboard shortcut handler.
diff --git a/src/hooks/useKeyboardState.js b/src/hooks/useKeyboardState.js
index 8b57fb60f2b6..68e9dbfc2b13 100644
--- a/src/hooks/useKeyboardState.js
+++ b/src/hooks/useKeyboardState.js
@@ -1,5 +1,5 @@
import {useContext} from 'react';
-import {KeyboardStateContext} from '../components/withKeyboardState';
+import {KeyboardStateContext} from '@components/withKeyboardState';
/**
* Hook for getting current state of keyboard
diff --git a/src/hooks/useLocalize.js b/src/hooks/useLocalize.js
index 7f7a610fca8b..71968cdb6e61 100644
--- a/src/hooks/useLocalize.js
+++ b/src/hooks/useLocalize.js
@@ -1,5 +1,5 @@
import {useContext} from 'react';
-import {LocaleContext} from '../components/LocaleContextProvider';
+import {LocaleContext} from '@components/LocaleContextProvider';
export default function useLocalize() {
return useContext(LocaleContext);
diff --git a/src/hooks/useNetwork.ts b/src/hooks/useNetwork.ts
index 4405dd7126a5..f9e1a627c5f5 100644
--- a/src/hooks/useNetwork.ts
+++ b/src/hooks/useNetwork.ts
@@ -1,5 +1,5 @@
-import {useRef, useContext, useEffect} from 'react';
-import {NetworkContext} from '../components/OnyxProvider';
+import {useContext, useEffect, useRef} from 'react';
+import {NetworkContext} from '@components/OnyxProvider';
type UseNetworkProps = {
onReconnect?: () => void;
diff --git a/src/hooks/usePermissions.ts b/src/hooks/usePermissions.ts
index 09e87554b5c3..e60825b610e9 100644
--- a/src/hooks/usePermissions.ts
+++ b/src/hooks/usePermissions.ts
@@ -1,6 +1,6 @@
import {useContext, useMemo} from 'react';
-import Permissions from '../libs/Permissions';
-import {BetasContext} from '../components/OnyxProvider';
+import {BetasContext} from '@components/OnyxProvider';
+import Permissions from '@libs/Permissions';
type PermissionKey = keyof typeof Permissions;
type UsePermissions = Partial>;
diff --git a/src/hooks/usePrivatePersonalDetails.js b/src/hooks/usePrivatePersonalDetails.js
index 14c1e42e629a..04d90f1ce5de 100644
--- a/src/hooks/usePrivatePersonalDetails.js
+++ b/src/hooks/usePrivatePersonalDetails.js
@@ -1,7 +1,7 @@
-import {useEffect, useContext} from 'react';
+import {useContext, useEffect} from 'react';
import _ from 'underscore';
-import * as PersonalDetails from '../libs/actions/PersonalDetails';
-import {NetworkContext} from '../components/OnyxProvider';
+import {NetworkContext} from '@components/OnyxProvider';
+import * as PersonalDetails from '@userActions/PersonalDetails';
/**
* Hook for fetching private personal details
diff --git a/src/hooks/useReportScrollManager/index.native.ts b/src/hooks/useReportScrollManager/index.native.ts
index ed9b7968636c..0d4c956b7bd8 100644
--- a/src/hooks/useReportScrollManager/index.native.ts
+++ b/src/hooks/useReportScrollManager/index.native.ts
@@ -1,5 +1,5 @@
-import {useContext, useCallback} from 'react';
-import {ActionListContext} from '../../pages/home/ReportScreenContext';
+import {useCallback, useContext} from 'react';
+import {ActionListContext} from '@pages/home/ReportScreenContext';
import ReportScrollManagerData from './types';
function useReportScrollManager(): ReportScrollManagerData {
diff --git a/src/hooks/useReportScrollManager/index.ts b/src/hooks/useReportScrollManager/index.ts
index fd2c884e5b4c..081844fc8c79 100644
--- a/src/hooks/useReportScrollManager/index.ts
+++ b/src/hooks/useReportScrollManager/index.ts
@@ -1,5 +1,5 @@
-import {useContext, useCallback} from 'react';
-import {ActionListContext} from '../../pages/home/ReportScreenContext';
+import {useCallback, useContext} from 'react';
+import {ActionListContext} from '@pages/home/ReportScreenContext';
import ReportScrollManagerData from './types';
function useReportScrollManager(): ReportScrollManagerData {
diff --git a/src/hooks/useReportScrollManager/types.ts b/src/hooks/useReportScrollManager/types.ts
index f5ff9b2f35cd..a10238d51f74 100644
--- a/src/hooks/useReportScrollManager/types.ts
+++ b/src/hooks/useReportScrollManager/types.ts
@@ -1,4 +1,4 @@
-import {ActionListContextType} from '../../pages/home/ReportScreenContext';
+import {ActionListContextType} from '@pages/home/ReportScreenContext';
type ReportScrollManagerData = {
ref: ActionListContextType;
diff --git a/src/hooks/useSingleExecution.js b/src/hooks/useSingleExecution.js
index 0b466252ed58..a2b4ccb4cd53 100644
--- a/src/hooks/useSingleExecution.js
+++ b/src/hooks/useSingleExecution.js
@@ -1,5 +1,5 @@
+import {useCallback, useRef, useState} from 'react';
import {InteractionManager} from 'react-native';
-import {useCallback, useState, useRef} from 'react';
/**
* With any action passed in, it will only allow 1 such action to occur at a time.
diff --git a/src/hooks/useWaitForNavigation.js b/src/hooks/useWaitForNavigation.js
index 00f4405dff12..81c26d7beb46 100644
--- a/src/hooks/useWaitForNavigation.js
+++ b/src/hooks/useWaitForNavigation.js
@@ -1,5 +1,5 @@
-import {useEffect, useRef} from 'react';
import {useNavigation} from '@react-navigation/native';
+import {useEffect, useRef} from 'react';
/**
* Returns a promise that resolves when navigation finishes.
diff --git a/src/hooks/useWindowDimensions/index.native.ts b/src/hooks/useWindowDimensions/index.native.ts
index 5b0ec2002201..e0268445fe4e 100644
--- a/src/hooks/useWindowDimensions/index.native.ts
+++ b/src/hooks/useWindowDimensions/index.native.ts
@@ -1,6 +1,6 @@
// eslint-disable-next-line no-restricted-imports
import {useWindowDimensions} from 'react-native';
-import variables from '../../styles/variables';
+import variables from '@styles/variables';
import WindowDimensions from './types';
/**
diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts
index f9fee6301d06..ab856bcf8e1b 100644
--- a/src/hooks/useWindowDimensions/index.ts
+++ b/src/hooks/useWindowDimensions/index.ts
@@ -1,6 +1,6 @@
// eslint-disable-next-line no-restricted-imports
import {Dimensions, useWindowDimensions} from 'react-native';
-import variables from '../../styles/variables';
+import variables from '@styles/variables';
import WindowDimensions from './types';
/**
diff --git a/src/languages/en.ts b/src/languages/en.ts
index d5bbe0e336d8..7cdce062faac 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1,84 +1,84 @@
import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
-import CONST from '../CONST';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import CONST from '@src/CONST';
import type {
AddressLineParams,
- CharacterLimitParams,
- MaxParticipantsReachedParams,
- ZipCodeExampleFormatParams,
- LoggedInAsParams,
- NewFaceEnterMagicCodeParams,
- WelcomeEnterMagicCodeParams,
AlreadySignedInParams,
- GoBackMessageParams,
- LocalTimeParams,
- EditActionParams,
- DeleteActionParams,
- DeleteConfirmationParams,
- BeginningOfChatHistoryDomainRoomPartOneParams,
+ AmountEachParams,
BeginningOfChatHistoryAdminRoomPartOneParams,
BeginningOfChatHistoryAnnounceRoomPartOneParams,
BeginningOfChatHistoryAnnounceRoomPartTwo,
- WelcomeToRoomParams,
- ReportArchiveReasonsClosedParams,
- ReportArchiveReasonsMergedParams,
- ReportArchiveReasonsRemovedFromPolicyParams,
- ReportArchiveReasonsPolicyDeletedParams,
- RequestCountParams,
- SettleExpensifyCardParams,
- RequestAmountParams,
- SplitAmountParams,
+ BeginningOfChatHistoryDomainRoomPartOneParams,
+ CharacterLimitParams,
+ ConfirmThatParams,
+ DateShouldBeAfterParams,
+ DateShouldBeBeforeParams,
+ DeleteActionParams,
+ DeleteConfirmationParams,
DidSplitAmountMessageParams,
- AmountEachParams,
+ EditActionParams,
+ EnterMagicCodeParams,
+ FormattedMaxLengthParams,
+ GoBackMessageParams,
+ GoToRoomParams,
+ IncorrectZipFormatParams,
+ InstantSummaryParams,
+ LocalTimeParams,
+ LoggedInAsParams,
+ ManagerApprovedParams,
+ MaxParticipantsReachedParams,
+ NewFaceEnterMagicCodeParams,
+ NoLongerHaveAccessParams,
+ NotAllowedExtensionParams,
+ NotYouParams,
+ OOOEventSummaryFullDayParams,
+ OOOEventSummaryPartialDayParams,
+ OurEmailProviderParams,
+ PaidElsewhereWithAmountParams,
+ PaidWithExpensifyWithAmountParams,
+ ParentNavigationSummaryParams,
PayerOwesAmountParams,
PayerOwesParams,
PayerPaidAmountParams,
PayerPaidParams,
PayerSettledParams,
- WaitingOnBankAccountParams,
- SettledAfterAddedBankAccountParams,
- PaidElsewhereWithAmountParams,
- PaidWithExpensifyWithAmountParams,
- ThreadRequestReportNameParams,
- ThreadSentMoneyReportNameParams,
- SizeExceededParams,
+ RemovedTheRequestParams,
+ RenamedRoomActionParams,
+ ReportArchiveReasonsClosedParams,
+ ReportArchiveReasonsMergedParams,
+ ReportArchiveReasonsPolicyDeletedParams,
+ ReportArchiveReasonsRemovedFromPolicyParams,
+ RequestAmountParams,
+ RequestCountParams,
+ RequestedAmountMessageParams,
ResolutionConstraintsParams,
- NotAllowedExtensionParams,
- EnterMagicCodeParams,
- TransferParams,
- InstantSummaryParams,
- NotYouParams,
- DateShouldBeBeforeParams,
- DateShouldBeAfterParams,
- IncorrectZipFormatParams,
- WeSentYouMagicSignInLinkParams,
- ToValidateLoginParams,
- NoLongerHaveAccessParams,
- OurEmailProviderParams,
- ConfirmThatParams,
- UntilTimeParams,
- StepCounterParams,
- UserIsAlreadyMemberParams,
- GoToRoomParams,
- WelcomeNoteParams,
RoomNameReservedErrorParams,
- RenamedRoomActionParams,
RoomRenamedToParams,
- OOOEventSummaryFullDayParams,
- OOOEventSummaryPartialDayParams,
- ParentNavigationSummaryParams,
- ManagerApprovedParams,
- SetTheRequestParams,
- UpdatedTheRequestParams,
SetTheDistanceParams,
- UpdatedTheDistanceParams,
- RemovedTheRequestParams,
- FormattedMaxLengthParams,
- RequestedAmountMessageParams,
+ SetTheRequestParams,
+ SettledAfterAddedBankAccountParams,
+ SettleExpensifyCardParams,
+ SizeExceededParams,
+ SplitAmountParams,
+ StepCounterParams,
TagSelectionParams,
+ ThreadRequestReportNameParams,
+ ThreadSentMoneyReportNameParams,
+ ToValidateLoginParams,
+ TransferParams,
TranslationBase,
+ UntilTimeParams,
+ UpdatedTheDistanceParams,
+ UpdatedTheRequestParams,
+ UserIsAlreadyMemberParams,
+ WaitingOnBankAccountParams,
WalletProgramParams,
+ WelcomeEnterMagicCodeParams,
+ WelcomeNoteParams,
+ WelcomeToRoomParams,
+ WeSentYouMagicSignInLinkParams,
+ ZipCodeExampleFormatParams,
} from './types';
-import * as ReportActionsUtils from '../libs/ReportActionsUtils';
type StateValue = {
stateISO: string;
@@ -423,6 +423,8 @@ export default {
deleteConfirmation: ({action}: DeleteConfirmationParams) => `Are you sure you want to delete this ${ReportActionsUtils.isMoneyRequestAction(action) ? 'request' : 'comment'}?`,
onlyVisible: 'Only visible to',
replyInThread: 'Reply in thread',
+ subscribeToThread: 'Subscribe to thread',
+ unsubscribeFromThread: 'Unsubscribe from thread',
flagAsOffensive: 'Flag as offensive',
},
emojiReactions: {
@@ -1441,6 +1443,8 @@ export default {
cannotRemove: 'You cannot remove yourself or the workspace owner.',
genericRemove: 'There was a problem removing that workspace member.',
},
+ addedWithPrimary: 'Some users were added with their primary logins.',
+ invitedBySecondaryLogin: ({secondaryLogin}) => `Added by secondary login ${secondaryLogin}.`,
},
card: {
header: 'Unlock free Expensify Cards',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 6d735b645e1d..578e027e1d14 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1,82 +1,82 @@
-import CONST from '../CONST';
-import * as ReportActionsUtils from '../libs/ReportActionsUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import CONST from '@src/CONST';
import type {
AddressLineParams,
- CharacterLimitParams,
- MaxParticipantsReachedParams,
- ZipCodeExampleFormatParams,
- LoggedInAsParams,
- NewFaceEnterMagicCodeParams,
- WelcomeEnterMagicCodeParams,
AlreadySignedInParams,
- GoBackMessageParams,
- LocalTimeParams,
- EditActionParams,
- DeleteActionParams,
- DeleteConfirmationParams,
- BeginningOfChatHistoryDomainRoomPartOneParams,
+ AmountEachParams,
BeginningOfChatHistoryAdminRoomPartOneParams,
BeginningOfChatHistoryAnnounceRoomPartOneParams,
BeginningOfChatHistoryAnnounceRoomPartTwo,
- WelcomeToRoomParams,
- ReportArchiveReasonsClosedParams,
- ReportArchiveReasonsMergedParams,
- ReportArchiveReasonsRemovedFromPolicyParams,
- ReportArchiveReasonsPolicyDeletedParams,
- RequestCountParams,
- SettleExpensifyCardParams,
- RequestAmountParams,
- SplitAmountParams,
+ BeginningOfChatHistoryDomainRoomPartOneParams,
+ CharacterLimitParams,
+ ConfirmThatParams,
+ DateShouldBeAfterParams,
+ DateShouldBeBeforeParams,
+ DeleteActionParams,
+ DeleteConfirmationParams,
DidSplitAmountMessageParams,
- AmountEachParams,
+ EditActionParams,
+ EnglishTranslation,
+ EnterMagicCodeParams,
+ FormattedMaxLengthParams,
+ GoBackMessageParams,
+ GoToRoomParams,
+ IncorrectZipFormatParams,
+ InstantSummaryParams,
+ LocalTimeParams,
+ LoggedInAsParams,
+ ManagerApprovedParams,
+ MaxParticipantsReachedParams,
+ NewFaceEnterMagicCodeParams,
+ NoLongerHaveAccessParams,
+ NotAllowedExtensionParams,
+ NotYouParams,
+ OOOEventSummaryFullDayParams,
+ OOOEventSummaryPartialDayParams,
+ OurEmailProviderParams,
+ PaidElsewhereWithAmountParams,
+ PaidWithExpensifyWithAmountParams,
+ ParentNavigationSummaryParams,
PayerOwesAmountParams,
PayerOwesParams,
PayerPaidAmountParams,
PayerPaidParams,
PayerSettledParams,
- WaitingOnBankAccountParams,
+ RemovedTheRequestParams,
+ RenamedRoomActionParams,
+ ReportArchiveReasonsClosedParams,
+ ReportArchiveReasonsMergedParams,
+ ReportArchiveReasonsPolicyDeletedParams,
+ ReportArchiveReasonsRemovedFromPolicyParams,
+ RequestAmountParams,
+ RequestCountParams,
+ RequestedAmountMessageParams,
+ ResolutionConstraintsParams,
+ RoomNameReservedErrorParams,
+ RoomRenamedToParams,
+ SetTheDistanceParams,
+ SetTheRequestParams,
SettledAfterAddedBankAccountParams,
- PaidElsewhereWithAmountParams,
- PaidWithExpensifyWithAmountParams,
+ SettleExpensifyCardParams,
+ SizeExceededParams,
+ SplitAmountParams,
+ StepCounterParams,
+ TagSelectionParams,
ThreadRequestReportNameParams,
ThreadSentMoneyReportNameParams,
- SizeExceededParams,
- ResolutionConstraintsParams,
- NotAllowedExtensionParams,
- EnterMagicCodeParams,
- TransferParams,
- InstantSummaryParams,
- NotYouParams,
- DateShouldBeBeforeParams,
- DateShouldBeAfterParams,
- IncorrectZipFormatParams,
- WeSentYouMagicSignInLinkParams,
ToValidateLoginParams,
- NoLongerHaveAccessParams,
- OurEmailProviderParams,
- ConfirmThatParams,
+ TransferParams,
UntilTimeParams,
- StepCounterParams,
- UserIsAlreadyMemberParams,
- GoToRoomParams,
- WelcomeNoteParams,
- RoomNameReservedErrorParams,
- RenamedRoomActionParams,
- RoomRenamedToParams,
- OOOEventSummaryFullDayParams,
- OOOEventSummaryPartialDayParams,
- ParentNavigationSummaryParams,
- ManagerApprovedParams,
- SetTheRequestParams,
- SetTheDistanceParams,
- UpdatedTheRequestParams,
UpdatedTheDistanceParams,
- RemovedTheRequestParams,
- FormattedMaxLengthParams,
- RequestedAmountMessageParams,
- TagSelectionParams,
- EnglishTranslation,
+ UpdatedTheRequestParams,
+ UserIsAlreadyMemberParams,
+ WaitingOnBankAccountParams,
WalletProgramParams,
+ WelcomeEnterMagicCodeParams,
+ WelcomeNoteParams,
+ WelcomeToRoomParams,
+ WeSentYouMagicSignInLinkParams,
+ ZipCodeExampleFormatParams,
} from './types';
/* eslint-disable max-len */
@@ -414,6 +414,8 @@ export default {
deleteConfirmation: ({action}: DeleteConfirmationParams) => `¿Estás seguro de que quieres eliminar este ${ReportActionsUtils.isMoneyRequestAction(action) ? 'pedido' : 'comentario'}`,
onlyVisible: 'Visible sólo para',
replyInThread: 'Responder en el hilo',
+ subscribeToThread: 'Suscribirse al hilo',
+ unsubscribeFromThread: 'Darse de baja del hilo',
flagAsOffensive: 'Marcar como ofensivo',
},
emojiReactions: {
@@ -1462,6 +1464,8 @@ export default {
cannotRemove: 'No puedes eliminarte ni a ti mismo ni al dueño del espacio de trabajo.',
genericRemove: 'Ha ocurrido un problema al eliminar al miembro del espacio de trabajo.',
},
+ addedWithPrimary: 'Se agregaron algunos usuarios con sus nombres de usuario principales.',
+ invitedBySecondaryLogin: ({secondaryLogin}) => `Agregado por nombre de usuario secundario ${secondaryLogin}.`,
},
card: {
header: 'Desbloquea Tarjetas Expensify gratis',
diff --git a/src/languages/types.ts b/src/languages/types.ts
index 5a1847e31e71..d2a387a329d0 100644
--- a/src/languages/types.ts
+++ b/src/languages/types.ts
@@ -1,4 +1,4 @@
-import {ReportAction} from '../types/onyx';
+import {ReportAction} from '@src/types/onyx';
import en from './en';
type AddressLineParams = {
diff --git a/src/libs/API.ts b/src/libs/API.ts
index ce3d6bab19bc..91cf6a7db877 100644
--- a/src/libs/API.ts
+++ b/src/libs/API.ts
@@ -1,14 +1,14 @@
import Onyx, {OnyxUpdate} from 'react-native-onyx';
import {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+import OnyxRequest from '@src/types/onyx/Request';
+import Response from '@src/types/onyx/Response';
+import pkg from '../../package.json';
import Log from './Log';
-import * as Request from './Request';
import * as Middleware from './Middleware';
import * as SequentialQueue from './Network/SequentialQueue';
-import pkg from '../../package.json';
-import CONST from '../CONST';
import * as Pusher from './Pusher/pusher';
-import OnyxRequest from '../types/onyx/Request';
-import Response from '../types/onyx/Response';
+import * as Request from './Request';
// Setup API middlewares. Each request made will pass through a series of middleware functions that will get called in sequence (each one passing the result of the previous to the next).
// Note: The ordering here is intentional as we want to Log, Recheck Connection, Reauthenticate, and Save the Response in Onyx. Errors thrown in one middleware will bubble to the next.
diff --git a/src/libs/Accessibility/index.ts b/src/libs/Accessibility/index.ts
index 213d28139c2c..5eceda8edcb1 100644
--- a/src/libs/Accessibility/index.ts
+++ b/src/libs/Accessibility/index.ts
@@ -1,4 +1,4 @@
-import {useEffect, useState, useCallback} from 'react';
+import {useCallback, useEffect, useState} from 'react';
import {AccessibilityInfo, LayoutChangeEvent} from 'react-native';
import moveAccessibilityFocus from './moveAccessibilityFocus';
diff --git a/src/libs/ActiveClientManager/index.native.ts b/src/libs/ActiveClientManager/index.native.ts
index 1d455a84a28a..866992bcc841 100644
--- a/src/libs/ActiveClientManager/index.native.ts
+++ b/src/libs/ActiveClientManager/index.native.ts
@@ -2,8 +2,7 @@
* For native devices, there will never be more than one
* client running at a time, so this lib is a big no-op
*/
-
-import {Init, IsReady, IsClientTheLeader} from './types';
+import {Init, IsClientTheLeader, IsReady} from './types';
const init: Init = () => {};
diff --git a/src/libs/ActiveClientManager/index.ts b/src/libs/ActiveClientManager/index.ts
index f99f54e84aa5..0baeb2becfce 100644
--- a/src/libs/ActiveClientManager/index.ts
+++ b/src/libs/ActiveClientManager/index.ts
@@ -3,12 +3,11 @@
* only one tab is processing those saved requests or we would be duplicating data (or creating errors).
* This file ensures exactly that by tracking all the clientIDs connected, storing the most recent one last and it considers that last clientID the "leader".
*/
-
-import Onyx from 'react-native-onyx';
import Str from 'expensify-common/lib/str';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as ActiveClients from '../actions/ActiveClients';
-import {Init, IsReady, IsClientTheLeader} from './types';
+import Onyx from 'react-native-onyx';
+import * as ActiveClients from '@userActions/ActiveClients';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {Init, IsClientTheLeader, IsReady} from './types';
const clientID = Str.guid();
const maxClients = 20;
diff --git a/src/libs/ApiUtils.ts b/src/libs/ApiUtils.ts
index 87a251ccb086..a15c900b9387 100644
--- a/src/libs/ApiUtils.ts
+++ b/src/libs/ApiUtils.ts
@@ -1,10 +1,10 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../ONYXKEYS';
-import CONFIG from '../CONFIG';
-import CONST from '../CONST';
-import * as Environment from './Environment/Environment';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {Request} from '@src/types/onyx';
import proxyConfig from '../../config/proxyConfig';
-import {Request} from '../types/onyx';
+import * as Environment from './Environment/Environment';
// To avoid rebuilding native apps, native apps use production config for both staging and prod
// We use the async environment check because it works on all platforms
diff --git a/src/libs/AppStateMonitor/index.ts b/src/libs/AppStateMonitor/index.ts
index 5c206579944d..f95fad042b98 100644
--- a/src/libs/AppStateMonitor/index.ts
+++ b/src/libs/AppStateMonitor/index.ts
@@ -1,5 +1,5 @@
import {AppState, AppStateStatus} from 'react-native';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import shouldReportActivity from './shouldReportActivity';
let appState: AppStateStatus = CONST.APP_STATE.ACTIVE;
diff --git a/src/libs/Authentication.ts b/src/libs/Authentication.ts
index cec20504dd04..9962fa55b0af 100644
--- a/src/libs/Authentication.ts
+++ b/src/libs/Authentication.ts
@@ -1,13 +1,13 @@
-import requireParameters from './requireParameters';
-import * as Network from './Network';
-import * as NetworkStore from './Network/NetworkStore';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import Response from '@src/types/onyx/Response';
import updateSessionAuthTokens from './actions/Session/updateSessionAuthTokens';
-import CONFIG from '../CONFIG';
import redirectToSignIn from './actions/SignInRedirect';
-import CONST from '../CONST';
-import Log from './Log';
import * as ErrorUtils from './ErrorUtils';
-import Response from '../types/onyx/Response';
+import Log from './Log';
+import * as Network from './Network';
+import * as NetworkStore from './Network/NetworkStore';
+import requireParameters from './requireParameters';
type Parameters = {
useExpensifyLogin?: boolean;
diff --git a/src/libs/BootSplash/index.native.ts b/src/libs/BootSplash/index.native.ts
index 307d0d62c8dd..9d472aec4a96 100644
--- a/src/libs/BootSplash/index.native.ts
+++ b/src/libs/BootSplash/index.native.ts
@@ -1,5 +1,5 @@
import {NativeModules} from 'react-native';
-import Log from '../Log';
+import Log from '@libs/Log';
const BootSplash = NativeModules.BootSplash;
diff --git a/src/libs/BootSplash/index.ts b/src/libs/BootSplash/index.ts
index e58763039129..605e65a21a7b 100644
--- a/src/libs/BootSplash/index.ts
+++ b/src/libs/BootSplash/index.ts
@@ -1,4 +1,4 @@
-import Log from '../Log';
+import Log from '@libs/Log';
import {VisibilityStatus} from './types';
function resolveAfter(delay: number): Promise {
diff --git a/src/libs/Browser/index.web.ts b/src/libs/Browser/index.web.ts
index 064358c6bed5..2ce4c5ad2040 100644
--- a/src/libs/Browser/index.web.ts
+++ b/src/libs/Browser/index.web.ts
@@ -1,6 +1,6 @@
-import CONST from '../../CONST';
-import CONFIG from '../../CONFIG';
-import ROUTES from '../../ROUTES';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
/**
* Fetch browser name from UA string
diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 52c4f7067acf..0dc483aff50e 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -1,10 +1,10 @@
import lodash from 'lodash';
import Onyx from 'react-native-onyx';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
+import ONYXKEYS, {OnyxValues} from '@src/ONYXKEYS';
+import * as OnyxTypes from '@src/types/onyx';
+import {Card} from '@src/types/onyx';
import * as Localize from './Localize';
-import * as OnyxTypes from '../types/onyx';
-import ONYXKEYS, {OnyxValues} from '../ONYXKEYS';
-import {Card} from '../types/onyx';
let allCards: OnyxValues[typeof ONYXKEYS.CARD_LIST] = {};
Onyx.connect({
diff --git a/src/libs/Clipboard/index.js b/src/libs/Clipboard/index.js
index 6fbaa8eccd31..ff05fcb45d0a 100644
--- a/src/libs/Clipboard/index.js
+++ b/src/libs/Clipboard/index.js
@@ -1,7 +1,7 @@
import Clipboard from '@react-native-clipboard/clipboard';
import lodashGet from 'lodash/get';
-import CONST from '../../CONST';
-import * as Browser from '../Browser';
+import * as Browser from '@libs/Browser';
+import CONST from '@src/CONST';
const canSetHtml = () => lodashGet(navigator, 'clipboard.write');
diff --git a/src/libs/CollectionUtils.ts b/src/libs/CollectionUtils.ts
index ac47633c2e08..3a980906d614 100644
--- a/src/libs/CollectionUtils.ts
+++ b/src/libs/CollectionUtils.ts
@@ -1,4 +1,4 @@
-import {OnyxCollectionKey} from '../ONYXKEYS';
+import {OnyxCollectionKey} from '@src/ONYXKEYS';
/**
* Return the highest item in a numbered collection
diff --git a/src/libs/ComposerUtils/getDraftComment.ts b/src/libs/ComposerUtils/getDraftComment.ts
index ac3d2f3d09be..97567a42b263 100644
--- a/src/libs/ComposerUtils/getDraftComment.ts
+++ b/src/libs/ComposerUtils/getDraftComment.ts
@@ -1,5 +1,5 @@
import Onyx, {OnyxEntry} from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
const draftCommentMap: Record> = {};
Onyx.connect({
diff --git a/src/libs/ComposerUtils/index.ts b/src/libs/ComposerUtils/index.ts
index 5e2a42fc65dd..5a7da7ca08cf 100644
--- a/src/libs/ComposerUtils/index.ts
+++ b/src/libs/ComposerUtils/index.ts
@@ -1,6 +1,6 @@
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import getNumberOfLines from './getNumberOfLines';
import updateNumberOfLines from './updateNumberOfLines';
-import * as DeviceCapabilities from '../DeviceCapabilities';
type Selection = {
start: number;
diff --git a/src/libs/ComposerUtils/updateIsFullComposerAvailable.ts b/src/libs/ComposerUtils/updateIsFullComposerAvailable.ts
index 5d73619482db..761abb8c9c8f 100644
--- a/src/libs/ComposerUtils/updateIsFullComposerAvailable.ts
+++ b/src/libs/ComposerUtils/updateIsFullComposerAvailable.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import ComposerProps from './types';
/**
diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
index b5c28cfc79e8..df9292ecd690 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
@@ -1,6 +1,6 @@
-import styles from '../../../styles/styles';
-import updateIsFullComposerAvailable from '../updateIsFullComposerAvailable';
-import getNumberOfLines from '../getNumberOfLines';
+import getNumberOfLines from '@libs/ComposerUtils/getNumberOfLines';
+import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
+import styles from '@styles/styles';
import UpdateNumberOfLines from './types';
/**
diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
index c0650be25433..b0f9ba48ddc2 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
@@ -1,5 +1,5 @@
import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
-import ComposerProps from '../types';
+import ComposerProps from '@libs/ComposerUtils/types';
type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent) => void;
diff --git a/src/libs/ControlSelection/index.ts b/src/libs/ControlSelection/index.ts
index 9625b4e49787..44d4530bc4fd 100644
--- a/src/libs/ControlSelection/index.ts
+++ b/src/libs/ControlSelection/index.ts
@@ -1,5 +1,5 @@
+import CustomRefObject from '@src/types/utils/CustomRefObject';
import ControlSelectionModule from './types';
-import CustomRefObject from '../../types/utils/CustomRefObject';
/**
* Block selection on the whole app
diff --git a/src/libs/ControlSelection/types.ts b/src/libs/ControlSelection/types.ts
index 5706a4981d30..d84347fd7ba6 100644
--- a/src/libs/ControlSelection/types.ts
+++ b/src/libs/ControlSelection/types.ts
@@ -1,4 +1,4 @@
-import CustomRefObject from '../../types/utils/CustomRefObject';
+import CustomRefObject from '@src/types/utils/CustomRefObject';
type ControlSelectionModule = {
block: () => void;
diff --git a/src/libs/CurrencyUtils.ts b/src/libs/CurrencyUtils.ts
index 85ba8340c13e..4829ce115592 100644
--- a/src/libs/CurrencyUtils.ts
+++ b/src/libs/CurrencyUtils.ts
@@ -1,8 +1,8 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS, {OnyxValues} from '../ONYXKEYS';
-import CONST from '../CONST';
-import BaseLocaleListener from './Localize/LocaleListener/BaseLocaleListener';
+import CONST from '@src/CONST';
+import ONYXKEYS, {OnyxValues} from '@src/ONYXKEYS';
import * as Localize from './Localize';
+import BaseLocaleListener from './Localize/LocaleListener/BaseLocaleListener';
import * as NumberFormatUtils from './NumberFormatUtils';
let currencyList: OnyxValues[typeof ONYXKEYS.CURRENCY_LIST] = {};
diff --git a/src/libs/DateUtils.ts b/src/libs/DateUtils.ts
index a6f2860310c2..e03e3dd55680 100644
--- a/src/libs/DateUtils.ts
+++ b/src/libs/DateUtils.ts
@@ -1,29 +1,28 @@
-import {zonedTimeToUtc, utcToZonedTime, formatInTimeZone} from 'date-fns-tz';
-import {es, enGB} from 'date-fns/locale';
import {
- formatDistanceToNow,
- subMinutes,
addDays,
- subDays,
- isBefore,
- subMilliseconds,
- startOfWeek,
+ endOfDay,
endOfWeek,
format,
- setDefaultOptions,
- endOfDay,
- isSameDay,
+ formatDistanceToNow,
isAfter,
+ isBefore,
+ isSameDay,
isSameYear,
+ setDefaultOptions,
+ startOfWeek,
+ subDays,
+ subMilliseconds,
+ subMinutes,
} from 'date-fns';
-
-import Onyx from 'react-native-onyx';
+import {formatInTimeZone, utcToZonedTime, zonedTimeToUtc} from 'date-fns-tz';
+import {enGB, es} from 'date-fns/locale';
import throttle from 'lodash/throttle';
-import ONYXKEYS from '../ONYXKEYS';
-import CONST from '../CONST';
-import * as Localize from './Localize';
+import Onyx from 'react-native-onyx';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {Timezone} from '@src/types/onyx/PersonalDetails';
import * as CurrentDate from './actions/CurrentDate';
-import {Timezone} from '../types/onyx/PersonalDetails';
+import * as Localize from './Localize';
let currentUserAccountID: number | undefined;
Onyx.connect({
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 32de571c218c..0cc4e39d83af 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -1,5 +1,5 @@
import _ from 'underscore';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
import * as CurrencyUtils from './CurrencyUtils';
import * as PolicyUtils from './PolicyUtils';
diff --git a/src/libs/E2E/API.mock.js b/src/libs/E2E/API.mock.js
index 47f445f72222..2c7da3f420a3 100644
--- a/src/libs/E2E/API.mock.js
+++ b/src/libs/E2E/API.mock.js
@@ -1,14 +1,13 @@
/* eslint-disable rulesdir/no-api-in-views */
-import _ from 'underscore';
import Onyx from 'react-native-onyx';
-import Log from '../Log';
-
+import _ from 'underscore';
+import Log from '@libs/Log';
+import mockAuthenticatePusher from './apiMocks/authenticatePusher';
// mock functions
import mockBeginSignin from './apiMocks/beginSignin';
-import mockSigninUser from './apiMocks/signinUser';
-import mockAuthenticatePusher from './apiMocks/authenticatePusher';
import mockOpenApp from './apiMocks/openApp';
import mockOpenReport from './apiMocks/openReport';
+import mockSigninUser from './apiMocks/signinUser';
/**
* A dictionary which has the name of a API command as key, and a function which
diff --git a/src/libs/E2E/actions/e2eLogin.js b/src/libs/E2E/actions/e2eLogin.js
index 77576b09d88d..e2202f7e5662 100644
--- a/src/libs/E2E/actions/e2eLogin.js
+++ b/src/libs/E2E/actions/e2eLogin.js
@@ -1,7 +1,7 @@
/* eslint-disable rulesdir/prefer-onyx-connect-in-libs */
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
-import * as Session from '../../actions/Session';
+import * as Session from '@userActions/Session';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Command for e2e test to automatically sign in a user.
diff --git a/src/libs/E2E/client.js b/src/libs/E2E/client.js
index c948c7c2c6d2..7e6932d9fce5 100644
--- a/src/libs/E2E/client.js
+++ b/src/libs/E2E/client.js
@@ -1,5 +1,5 @@
-import Routes from '../../../tests/e2e/server/routes';
import Config from '../../../tests/e2e/config';
+import Routes from '../../../tests/e2e/server/routes';
const SERVER_ADDRESS = `http://localhost:${Config.SERVER_PORT}`;
diff --git a/src/libs/E2E/isE2ETestSession.native.js b/src/libs/E2E/isE2ETestSession.native.js
index 214e8241c5dc..3c4c19e8ba24 100644
--- a/src/libs/E2E/isE2ETestSession.native.js
+++ b/src/libs/E2E/isE2ETestSession.native.js
@@ -1,3 +1,3 @@
-import CONFIG from '../../CONFIG';
+import CONFIG from '@src/CONFIG';
export default () => CONFIG.E2E_TESTING;
diff --git a/src/libs/E2E/reactNativeLaunchingTest.js b/src/libs/E2E/reactNativeLaunchingTest.js
index 13183c1044db..1e0d6a8afa3b 100644
--- a/src/libs/E2E/reactNativeLaunchingTest.js
+++ b/src/libs/E2E/reactNativeLaunchingTest.js
@@ -1,13 +1,13 @@
/* eslint-disable import/newline-after-import,import/first */
+
/**
* We are using a separate entry point for the E2E tests.
* By doing this, we avoid bundling any E2E testing code
* into the actual release app.
*/
-
-import Performance from '../Performance';
-import * as Metrics from '../Metrics';
-
+import * as Metrics from '@libs/Metrics';
+import Performance from '@libs/Performance';
+import '../../../index';
import E2EConfig from '../../../tests/e2e/config';
import E2EClient from './client';
@@ -65,5 +65,5 @@ E2EClient.getTestConfig()
// start the usual app
Performance.markStart('regularAppStart');
-import '../../../index';
+
Performance.markEnd('regularAppStart');
diff --git a/src/libs/E2E/tests/appStartTimeTest.e2e.js b/src/libs/E2E/tests/appStartTimeTest.e2e.js
index d44fd6ce1195..311b891fcd4c 100644
--- a/src/libs/E2E/tests/appStartTimeTest.e2e.js
+++ b/src/libs/E2E/tests/appStartTimeTest.e2e.js
@@ -1,7 +1,7 @@
import _ from 'underscore';
-import E2ELogin from '../actions/e2eLogin';
-import Performance from '../../Performance';
-import E2EClient from '../client';
+import E2ELogin from '@libs/E2E/actions/e2eLogin';
+import E2EClient from '@libs/E2E/client';
+import Performance from '@libs/Performance';
const test = () => {
// check for login (if already logged in the action will simply resolve)
diff --git a/src/libs/E2E/tests/openSearchPageTest.e2e.js b/src/libs/E2E/tests/openSearchPageTest.e2e.js
index 3b2d91322cf0..1101a620f413 100644
--- a/src/libs/E2E/tests/openSearchPageTest.e2e.js
+++ b/src/libs/E2E/tests/openSearchPageTest.e2e.js
@@ -1,9 +1,9 @@
-import E2ELogin from '../actions/e2eLogin';
-import Performance from '../../Performance';
-import E2EClient from '../client';
-import Navigation from '../../Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
-import CONST from '../../../CONST';
+import E2ELogin from '@libs/E2E/actions/e2eLogin';
+import E2EClient from '@libs/E2E/client';
+import Navigation from '@libs/Navigation/Navigation';
+import Performance from '@libs/Performance';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
const test = () => {
// check for login (if already logged in the action will simply resolve)
diff --git a/src/libs/EmojiTrie.ts b/src/libs/EmojiTrie.ts
index d0a53acf29c9..2ab950621f87 100644
--- a/src/libs/EmojiTrie.ts
+++ b/src/libs/EmojiTrie.ts
@@ -1,9 +1,9 @@
import React from 'react';
import {SvgProps} from 'react-native-svg';
-import emojis, {localeEmojis} from '../../assets/emojis';
-import Trie from './Trie';
+import emojis, {localeEmojis} from '@assets/emojis';
+import CONST from '@src/CONST';
import Timing from './actions/Timing';
-import CONST from '../CONST';
+import Trie from './Trie';
type Emoji = {
code: string;
diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
index 05ad1bd3c2ce..4ade70537b0b 100644
--- a/src/libs/EmojiUtils.js
+++ b/src/libs/EmojiUtils.js
@@ -1,14 +1,14 @@
-import _ from 'underscore';
import {getUnixTime} from 'date-fns';
import Str from 'expensify-common/lib/str';
-import Onyx from 'react-native-onyx';
import lodashGet from 'lodash/get';
import lodashMin from 'lodash/min';
import lodashSum from 'lodash/sum';
-import ONYXKEYS from '../ONYXKEYS';
-import CONST from '../CONST';
+import Onyx from 'react-native-onyx';
+import _ from 'underscore';
+import * as Emojis from '@assets/emojis';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import emojisTrie from './EmojiTrie';
-import * as Emojis from '../../assets/emojis';
let frequentlyUsedEmojis = [];
Onyx.connect({
diff --git a/src/libs/Environment/Environment.js b/src/libs/Environment/Environment.js
index c039b49d33aa..e89c8d74a43a 100644
--- a/src/libs/Environment/Environment.js
+++ b/src/libs/Environment/Environment.js
@@ -1,8 +1,8 @@
-import Config from 'react-native-config';
import lodashGet from 'lodash/get';
-import CONST from '../../CONST';
+import Config from 'react-native-config';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
import getEnvironment from './getEnvironment';
-import CONFIG from '../../CONFIG';
const ENVIRONMENT_URLS = {
[CONST.ENVIRONMENT.DEV]: CONST.DEV_NEW_EXPENSIFY_URL + CONFIG.DEV_PORT,
diff --git a/src/libs/Environment/betaChecker/index.android.js b/src/libs/Environment/betaChecker/index.android.js
index e74648973c34..18a4290cb634 100644
--- a/src/libs/Environment/betaChecker/index.android.js
+++ b/src/libs/Environment/betaChecker/index.android.js
@@ -1,9 +1,9 @@
-import semver from 'semver';
import Onyx from 'react-native-onyx';
-import CONST from '../../../CONST';
+import semver from 'semver';
+import * as AppUpdate from '@userActions/AppUpdate';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import pkg from '../../../../package.json';
-import ONYXKEYS from '../../../ONYXKEYS';
-import * as AppUpdate from '../../actions/AppUpdate';
let isLastSavedBeta = false;
Onyx.connect({
diff --git a/src/libs/Environment/getEnvironment/index.js b/src/libs/Environment/getEnvironment/index.js
index a987678d6a6e..bc1c31cf5076 100644
--- a/src/libs/Environment/getEnvironment/index.js
+++ b/src/libs/Environment/getEnvironment/index.js
@@ -1,6 +1,6 @@
import lodashGet from 'lodash/get';
import Config from 'react-native-config';
-import CONST from '../../../CONST';
+import CONST from '@src/CONST';
/**
* Returns a promise that resolves with the current environment string value
diff --git a/src/libs/Environment/getEnvironment/index.native.js b/src/libs/Environment/getEnvironment/index.native.js
index 73014c4beffb..ca660f9117cb 100644
--- a/src/libs/Environment/getEnvironment/index.native.js
+++ b/src/libs/Environment/getEnvironment/index.native.js
@@ -1,7 +1,7 @@
import lodashGet from 'lodash/get';
import Config from 'react-native-config';
-import betaChecker from '../betaChecker';
-import CONST from '../../../CONST';
+import betaChecker from '@libs/Environment/betaChecker';
+import CONST from '@src/CONST';
let environment = null;
diff --git a/src/libs/ErrorUtils.ts b/src/libs/ErrorUtils.ts
index bf4fc0d810a4..99cd8f34b1e7 100644
--- a/src/libs/ErrorUtils.ts
+++ b/src/libs/ErrorUtils.ts
@@ -1,9 +1,9 @@
-import CONST from '../CONST';
+import CONST from '@src/CONST';
+import {TranslationFlatObject} from '@src/languages/types';
+import {ErrorFields, Errors} from '@src/types/onyx/OnyxCommon';
+import Response from '@src/types/onyx/Response';
import DateUtils from './DateUtils';
import * as Localize from './Localize';
-import Response from '../types/onyx/Response';
-import {ErrorFields, Errors} from '../types/onyx/OnyxCommon';
-import {TranslationFlatObject} from '../languages/types';
function getAuthenticateErrorMessage(response: Response): keyof TranslationFlatObject {
switch (response.jsonCode) {
diff --git a/src/libs/Firebase/index.native.ts b/src/libs/Firebase/index.native.ts
index 2014e2b8bd3e..107b3f8905b3 100644
--- a/src/libs/Firebase/index.native.ts
+++ b/src/libs/Firebase/index.native.ts
@@ -1,6 +1,6 @@
/* eslint-disable no-unused-vars */
import perf from '@react-native-firebase/perf';
-import * as Environment from '../Environment/Environment';
+import * as Environment from '@libs/Environment/Environment';
import {StartTrace, StopTrace, TraceMap} from './types';
const traceMap: TraceMap = {};
diff --git a/src/libs/Growl.ts b/src/libs/Growl.ts
index 33d7311973cb..55bcf88206e9 100644
--- a/src/libs/Growl.ts
+++ b/src/libs/Growl.ts
@@ -1,5 +1,5 @@
import React from 'react';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
type GrowlRef = {
show?: (bodyText: string, type: string, duration: number) => void;
diff --git a/src/libs/HeaderUtils.js b/src/libs/HeaderUtils.js
index 16d375ea1124..2edca95ecf74 100644
--- a/src/libs/HeaderUtils.js
+++ b/src/libs/HeaderUtils.js
@@ -1,7 +1,7 @@
-import * as Localize from './Localize';
-import * as Session from './actions/Session';
+import * as Expensicons from '@components/Icon/Expensicons';
import * as Report from './actions/Report';
-import * as Expensicons from '../components/Icon/Expensicons';
+import * as Session from './actions/Session';
+import * as Localize from './Localize';
/**
* @param {Object} report
diff --git a/src/libs/HttpUtils.js b/src/libs/HttpUtils.js
index 5a8185a03038..2df7421ea91c 100644
--- a/src/libs/HttpUtils.js
+++ b/src/libs/HttpUtils.js
@@ -1,10 +1,10 @@
import Onyx from 'react-native-onyx';
import _ from 'underscore';
-import CONST from '../CONST';
-import ONYXKEYS from '../ONYXKEYS';
-import HttpsError from './Errors/HttpsError';
+import alert from '@components/Alert';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import * as ApiUtils from './ApiUtils';
-import alert from '../components/Alert';
+import HttpsError from './Errors/HttpsError';
let shouldFailAllRequests = false;
let shouldForceOffline = false;
diff --git a/src/libs/IOUUtils.ts b/src/libs/IOUUtils.ts
index d8a916d0dfb0..ff4f2aafc8a8 100644
--- a/src/libs/IOUUtils.ts
+++ b/src/libs/IOUUtils.ts
@@ -1,7 +1,7 @@
-import CONST from '../CONST';
-import * as TransactionUtils from './TransactionUtils';
+import CONST from '@src/CONST';
+import {Report, Transaction} from '@src/types/onyx';
import * as CurrencyUtils from './CurrencyUtils';
-import {Report, Transaction} from '../types/onyx';
+import * as TransactionUtils from './TransactionUtils';
/**
* Calculates the amount per user given a list of participants
diff --git a/src/libs/IntlPolyfill/index.native.ts b/src/libs/IntlPolyfill/index.native.ts
index 9e578558faed..a044b4c52f0d 100644
--- a/src/libs/IntlPolyfill/index.native.ts
+++ b/src/libs/IntlPolyfill/index.native.ts
@@ -1,5 +1,5 @@
-import polyfillNumberFormat from './polyfillNumberFormat';
import polyfillListFormat from './polyfillListFormat';
+import polyfillNumberFormat from './polyfillNumberFormat';
import IntlPolyfill from './types';
/**
diff --git a/src/libs/IntlPolyfill/polyfillNumberFormat.ts b/src/libs/IntlPolyfill/polyfillNumberFormat.ts
index e4fdfef16e2c..1fac01958f05 100644
--- a/src/libs/IntlPolyfill/polyfillNumberFormat.ts
+++ b/src/libs/IntlPolyfill/polyfillNumberFormat.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
/**
* Check if the locale data is as expected on the device.
diff --git a/src/libs/KeyboardShortcut/KeyDownPressListener/index.js b/src/libs/KeyboardShortcut/KeyDownPressListener/index.js
deleted file mode 100644
index 4401beef1c59..000000000000
--- a/src/libs/KeyboardShortcut/KeyDownPressListener/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function addKeyDownPressListner(callbackFunction) {
- document.addEventListener('keydown', callbackFunction);
-}
-
-function removeKeyDownPressListner(callbackFunction) {
- document.removeEventListener('keydown', callbackFunction);
-}
-
-export {addKeyDownPressListner, removeKeyDownPressListner};
diff --git a/src/libs/KeyboardShortcut/KeyDownPressListener/index.native.js b/src/libs/KeyboardShortcut/KeyDownPressListener/index.native.js
deleted file mode 100644
index aa1ded824d22..000000000000
--- a/src/libs/KeyboardShortcut/KeyDownPressListener/index.native.js
+++ /dev/null
@@ -1,4 +0,0 @@
-function addKeyDownPressListner() {}
-function removeKeyDownPressListner() {}
-
-export {addKeyDownPressListner, removeKeyDownPressListner};
diff --git a/src/libs/KeyboardShortcut/KeyDownPressListener/index.native.ts b/src/libs/KeyboardShortcut/KeyDownPressListener/index.native.ts
new file mode 100644
index 000000000000..8b460a069f05
--- /dev/null
+++ b/src/libs/KeyboardShortcut/KeyDownPressListener/index.native.ts
@@ -0,0 +1,6 @@
+import {AddKeyDownPressListener, RemoveKeyDownPressListener} from './types';
+
+const addKeyDownPressListener: AddKeyDownPressListener = () => {};
+const removeKeyDownPressListener: RemoveKeyDownPressListener = () => {};
+
+export {addKeyDownPressListener, removeKeyDownPressListener};
diff --git a/src/libs/KeyboardShortcut/KeyDownPressListener/index.ts b/src/libs/KeyboardShortcut/KeyDownPressListener/index.ts
new file mode 100644
index 000000000000..7e2b2a2ce319
--- /dev/null
+++ b/src/libs/KeyboardShortcut/KeyDownPressListener/index.ts
@@ -0,0 +1,11 @@
+import type {AddKeyDownPressListener, RemoveKeyDownPressListener} from './types';
+
+const addKeyDownPressListener: AddKeyDownPressListener = (callbackFunction) => {
+ document.addEventListener('keydown', callbackFunction);
+};
+
+const removeKeyDownPressListener: RemoveKeyDownPressListener = (callbackFunction) => {
+ document.removeEventListener('keydown', callbackFunction);
+};
+
+export {addKeyDownPressListener, removeKeyDownPressListener};
diff --git a/src/libs/KeyboardShortcut/KeyDownPressListener/types.ts b/src/libs/KeyboardShortcut/KeyDownPressListener/types.ts
new file mode 100644
index 000000000000..1e36051a794d
--- /dev/null
+++ b/src/libs/KeyboardShortcut/KeyDownPressListener/types.ts
@@ -0,0 +1,6 @@
+type KeyDownPressCallback = (event: KeyboardEvent) => void;
+
+type AddKeyDownPressListener = (callbackFunction: KeyDownPressCallback) => void;
+type RemoveKeyDownPressListener = (callbackFunction: KeyDownPressCallback) => void;
+
+export type {AddKeyDownPressListener, RemoveKeyDownPressListener};
diff --git a/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.js b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.js
deleted file mode 100644
index 7b1cb00a408b..000000000000
--- a/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import _ from 'underscore';
-import getKeyEventModifiers from '../getKeyEventModifiers';
-import isEnterWhileComposition from '../isEnterWhileComposition';
-
-/**
- * Checks if an event for that key is configured and if so, runs it.
- * @param {Function} getDisplayName
- * @param {Object} eventHandlers
- * @param {Object} keycommandEvent
- * @param {Event} event
- * @private
- */
-function bindHandlerToKeydownEvent(getDisplayName, eventHandlers, keycommandEvent, event) {
- if (!(event instanceof KeyboardEvent) || isEnterWhileComposition(event)) {
- return;
- }
-
- const eventModifiers = getKeyEventModifiers(keycommandEvent);
- const displayName = getDisplayName(keycommandEvent.input, eventModifiers);
-
- // Loop over all the callbacks
- _.every(eventHandlers[displayName], (callback) => {
- // Early return for excludedNodes
- if (_.contains(callback.excludedNodes, event.target.nodeName)) {
- return true;
- }
-
- // If configured to do so, prevent input text control to trigger this event
- if (!callback.captureOnInputs && (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || event.target.contentEditable === 'true')) {
- return true;
- }
-
- // Determine if the event should bubble before executing the callback (which may have side-effects)
- let shouldBubble = callback.shouldBubble || false;
- if (_.isFunction(callback.shouldBubble)) {
- shouldBubble = callback.shouldBubble();
- }
-
- if (_.isFunction(callback.callback)) {
- callback.callback(event);
- }
- if (callback.shouldPreventDefault) {
- event.preventDefault();
- }
-
- // If the event should not bubble, short-circuit the loop
- return shouldBubble;
- });
-}
-
-export default bindHandlerToKeydownEvent;
diff --git a/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.native.js b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.native.js
deleted file mode 100644
index de59c819c504..000000000000
--- a/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.native.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import _ from 'underscore';
-import getKeyEventModifiers from '../getKeyEventModifiers';
-
-/**
- * Checks if an event for that key is configured and if so, runs it.
- * @param {Function} getDisplayName
- * @param {Object} eventHandlers
- * @param {Object} keycommandEvent
- * @param {Event} event
- * @private
- */
-function bindHandlerToKeydownEvent(getDisplayName, eventHandlers, keycommandEvent, event) {
- const eventModifiers = getKeyEventModifiers(keycommandEvent);
- const displayName = getDisplayName(keycommandEvent.input, eventModifiers);
-
- // Loop over all the callbacks
- _.every(eventHandlers[displayName], (callback) => {
- // Determine if the event should bubble before executing the callback (which may have side-effects)
- let shouldBubble = callback.shouldBubble || false;
- if (_.isFunction(callback.shouldBubble)) {
- shouldBubble = callback.shouldBubble();
- }
-
- if (_.isFunction(callback.callback)) {
- callback.callback(event);
- }
-
- // If the event should not bubble, short-circuit the loop
- return shouldBubble;
- });
-}
-
-export default bindHandlerToKeydownEvent;
diff --git a/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.native.ts b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.native.ts
new file mode 100644
index 000000000000..72a4365b87e2
--- /dev/null
+++ b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.native.ts
@@ -0,0 +1,28 @@
+import getKeyEventModifiers from '@libs/KeyboardShortcut/getKeyEventModifiers';
+import BindHandlerToKeydownEvent from './types';
+
+/**
+ * Checks if an event for that key is configured and if so, runs it.
+ */
+const bindHandlerToKeydownEvent: BindHandlerToKeydownEvent = (getDisplayName, eventHandlers, keyCommandEvent, event) => {
+ const eventModifiers = getKeyEventModifiers(keyCommandEvent);
+ const displayName = getDisplayName(keyCommandEvent.input, eventModifiers);
+
+ // Loop over all the callbacks
+ Object.values(eventHandlers[displayName]).every((callback) => {
+ // Determine if the event should bubble before executing the callback (which may have side-effects)
+ let shouldBubble: boolean | (() => void) | void = callback.shouldBubble || false;
+ if (typeof callback.shouldBubble === 'function') {
+ shouldBubble = callback.shouldBubble();
+ }
+
+ if (typeof callback.callback === 'function') {
+ callback.callback(event);
+ }
+
+ // If the event should not bubble, short-circuit the loop
+ return shouldBubble;
+ });
+};
+
+export default bindHandlerToKeydownEvent;
diff --git a/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.ts b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.ts
new file mode 100644
index 000000000000..8f2eaad25c5b
--- /dev/null
+++ b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.ts
@@ -0,0 +1,51 @@
+import getKeyEventModifiers from '@libs/KeyboardShortcut/getKeyEventModifiers';
+import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
+import BindHandlerToKeydownEvent from './types';
+
+/**
+ * Checks if an event for that key is configured and if so, runs it.
+ */
+const bindHandlerToKeydownEvent: BindHandlerToKeydownEvent = (getDisplayName, eventHandlers, keyCommandEvent, event) => {
+ if (!(event instanceof KeyboardEvent) || isEnterWhileComposition(event)) {
+ return;
+ }
+
+ const eventModifiers = getKeyEventModifiers(keyCommandEvent);
+ const displayName = getDisplayName(keyCommandEvent.input, eventModifiers);
+
+ // Loop over all the callbacks
+ Object.values(eventHandlers[displayName]).every((callback) => {
+ const textArea = event.target as HTMLTextAreaElement;
+ const contentEditable = textArea?.contentEditable;
+ const nodeName = textArea?.nodeName;
+
+ // Early return for excludedNodes
+ if (callback.excludedNodes.includes(nodeName)) {
+ return true;
+ }
+
+ // If configured to do so, prevent input text control to trigger this event
+ if (!callback.captureOnInputs && (nodeName === 'INPUT' || nodeName === 'TEXTAREA' || contentEditable === 'true')) {
+ return true;
+ }
+
+ // Determine if the event should bubble before executing the callback (which may have side-effects)
+ let shouldBubble: boolean | (() => void) | void = callback.shouldBubble || false;
+ if (typeof callback.shouldBubble === 'function') {
+ shouldBubble = callback.shouldBubble();
+ }
+
+ if (typeof callback.callback === 'function') {
+ callback.callback(event);
+ }
+
+ if (callback.shouldPreventDefault) {
+ event.preventDefault();
+ }
+
+ // If the event should not bubble, short-circuit the loop
+ return shouldBubble;
+ });
+};
+
+export default bindHandlerToKeydownEvent;
diff --git a/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/types.ts b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/types.ts
new file mode 100644
index 000000000000..2fe9521fa117
--- /dev/null
+++ b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/types.ts
@@ -0,0 +1,11 @@
+import type {EventHandler} from '..';
+
+type KeyCommandEvent = {input: string; modifierFlags?: string};
+
+type GetDisplayName = (key: string, modifiers: string | string[]) => string;
+
+type BindHandlerToKeydownEvent = (getDisplayName: GetDisplayName, eventHandlers: Record, keyCommandEvent: KeyCommandEvent, event: KeyboardEvent) => void;
+
+export default BindHandlerToKeydownEvent;
+
+export type {KeyCommandEvent};
diff --git a/src/libs/KeyboardShortcut/getKeyEventModifiers.js b/src/libs/KeyboardShortcut/getKeyEventModifiers.js
deleted file mode 100644
index 7865d51a0507..000000000000
--- a/src/libs/KeyboardShortcut/getKeyEventModifiers.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as KeyCommand from 'react-native-key-command';
-import lodashGet from 'lodash/get';
-
-/**
- * Gets modifiers from a keyboard event.
- *
- * @param {Event} event
- * @returns {Array}
- */
-function getKeyEventModifiers(event) {
- if (event.modifierFlags === lodashGet(KeyCommand, 'constants.keyModifierControl', 'keyModifierControl')) {
- return ['CONTROL'];
- }
- if (event.modifierFlags === lodashGet(KeyCommand, 'constants.keyModifierCommand', 'keyModifierCommand')) {
- return ['META'];
- }
- if (event.modifierFlags === lodashGet(KeyCommand, 'constants.keyModifierShiftControl', 'keyModifierShiftControl')) {
- return ['CONTROL', 'Shift'];
- }
- if (event.modifierFlags === lodashGet(KeyCommand, 'constants.keyModifierShiftCommand', 'keyModifierShiftCommand')) {
- return ['META', 'Shift'];
- }
-
- return [];
-}
-
-export default getKeyEventModifiers;
diff --git a/src/libs/KeyboardShortcut/getKeyEventModifiers.ts b/src/libs/KeyboardShortcut/getKeyEventModifiers.ts
new file mode 100644
index 000000000000..f82de725bb50
--- /dev/null
+++ b/src/libs/KeyboardShortcut/getKeyEventModifiers.ts
@@ -0,0 +1,29 @@
+import * as KeyCommand from 'react-native-key-command';
+import {KeyCommandEvent} from './bindHandlerToKeydownEvent/types';
+
+const keyModifierControl = KeyCommand?.constants.keyModifierControl ?? 'keyModifierControl';
+const keyModifierCommand = KeyCommand?.constants.keyModifierCommand ?? 'keyModifierCommand';
+const keyModifierShiftControl = KeyCommand?.constants.keyModifierShiftControl ?? 'keyModifierShiftControl';
+const keyModifierShiftCommand = KeyCommand?.constants.keyModifierShiftCommand ?? 'keyModifierShiftCommand';
+
+/**
+ * Gets modifiers from a keyboard event.
+ */
+function getKeyEventModifiers(event: KeyCommandEvent): string[] {
+ if (event.modifierFlags === keyModifierControl) {
+ return ['CONTROL'];
+ }
+ if (event.modifierFlags === keyModifierCommand) {
+ return ['META'];
+ }
+ if (event.modifierFlags === keyModifierShiftControl) {
+ return ['CONTROL', 'Shift'];
+ }
+ if (event.modifierFlags === keyModifierShiftCommand) {
+ return ['META', 'Shift'];
+ }
+
+ return [];
+}
+
+export default getKeyEventModifiers;
diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js
deleted file mode 100644
index bce65744801c..000000000000
--- a/src/libs/KeyboardShortcut/index.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import _ from 'underscore';
-import lodashGet from 'lodash/get';
-import Str from 'expensify-common/lib/str';
-import * as KeyCommand from 'react-native-key-command';
-import bindHandlerToKeydownEvent from './bindHandlerToKeydownEvent';
-import getOperatingSystem from '../getOperatingSystem';
-import CONST from '../../CONST';
-
-const operatingSystem = getOperatingSystem();
-
-// Handlers for the various keyboard listeners we set up
-const eventHandlers = {};
-
-// Documentation information for keyboard shortcuts that are displayed in the keyboard shortcuts informational modal
-const documentedShortcuts = {};
-
-/**
- * @returns {Array}
- */
-function getDocumentedShortcuts() {
- return _.sortBy(_.values(documentedShortcuts), 'displayName');
-}
-
-/**
- * Generates the normalized display name for keyboard shortcuts.
- *
- * @param {String} key
- * @param {String|Array} modifiers
- * @returns {String}
- */
-function getDisplayName(key, modifiers) {
- let displayName = (() => {
- // Type of key is string and the type of KeyCommand.constants.* is number | string. Use _.isEqual to match different types.
- if (_.isEqual(key.toLowerCase(), lodashGet(KeyCommand, 'constants.keyInputEnter', 'keyInputEnter').toString().toLowerCase())) {
- return ['ENTER'];
- }
- if (_.isEqual(key.toLowerCase(), lodashGet(KeyCommand, 'constants.keyInputEscape', 'keyInputEscape').toString().toLowerCase())) {
- return ['ESCAPE'];
- }
- if (_.isEqual(key.toLowerCase(), lodashGet(KeyCommand, 'constants.keyInputUpArrow', 'keyInputUpArrow').toString().toLowerCase())) {
- return ['ARROWUP'];
- }
- if (_.isEqual(key.toLowerCase(), lodashGet(KeyCommand, 'constants.keyInputDownArrow', 'keyInputDownArrow').toString().toLowerCase())) {
- return ['ARROWDOWN'];
- }
- if (_.isEqual(key.toLowerCase(), lodashGet(KeyCommand, 'constants.keyInputLeftArrow', 'keyInputLeftArrow').toString().toLowerCase())) {
- return ['ARROWLEFT'];
- }
- if (_.isEqual(key.toLowerCase(), lodashGet(KeyCommand, 'constants.keyInputRightArrow', 'keyInputRightArrow').toString().toLowerCase())) {
- return ['ARROWRIGHT'];
- }
- return [key.toUpperCase()];
- })();
-
- if (_.isString(modifiers)) {
- displayName.unshift(modifiers);
- } else if (_.isArray(modifiers)) {
- displayName = [..._.sortBy(modifiers), ...displayName];
- }
-
- displayName = _.map(displayName, (modifier) => lodashGet(CONST.KEYBOARD_SHORTCUT_KEY_DISPLAY_NAME, modifier.toUpperCase(), modifier));
-
- return displayName.join(' + ');
-}
-
-_.each(CONST.KEYBOARD_SHORTCUTS, (shortcut) => {
- const shortcutTrigger = lodashGet(shortcut, ['trigger', operatingSystem], lodashGet(shortcut, 'trigger.DEFAULT'));
-
- // If there is no trigger for the current OS nor a default trigger, then we don't need to do anything
- if (!shortcutTrigger) {
- return;
- }
-
- KeyCommand.addListener(shortcutTrigger, (keycommandEvent, event) => bindHandlerToKeydownEvent(getDisplayName, eventHandlers, keycommandEvent, event));
-});
-
-/**
- * Unsubscribes a keyboard event handler.
- *
- * @param {String} displayName The display name for the key combo to stop watching
- * @param {String} callbackID The specific ID given to the callback at the time it was added
- * @private
- */
-function unsubscribe(displayName, callbackID) {
- eventHandlers[displayName] = _.reject(eventHandlers[displayName], (callback) => callback.id === callbackID);
- if (_.has(documentedShortcuts, displayName) && _.size(eventHandlers[displayName]) === 0) {
- delete documentedShortcuts[displayName];
- }
-}
-
-/**
- * Return platform specific modifiers for keys like Control (CMD on macOS)
- *
- * @param {Array} keys
- * @returns {Array}
- */
-function getPlatformEquivalentForKeys(keys) {
- return _.map(keys, (key) => {
- if (!_.has(CONST.PLATFORM_SPECIFIC_KEYS, key)) {
- return key;
- }
-
- const platformModifiers = CONST.PLATFORM_SPECIFIC_KEYS[key];
- return lodashGet(platformModifiers, operatingSystem, platformModifiers.DEFAULT || key);
- });
-}
-
-/**
- * Subscribes to a keyboard event.
- * @param {String} key The key to watch, i.e. 'K' or 'Escape'
- * @param {Function} callback The callback to call
- * @param {String} descriptionKey Translation key for shortcut description
- * @param {Array} [modifiers] Can either be shift or control
- * @param {Boolean} [captureOnInputs] Should we capture the event on inputs too?
- * @param {Boolean|Function} [shouldBubble] Should the event bubble?
- * @param {Number} [priority] The position the callback should take in the stack. 0 means top priority, and 1 means less priority than the most recently added.
- * @param {Boolean} [shouldPreventDefault] Should call event.preventDefault after callback?
- * @param {Array} [excludedNodes] Do not capture key events targeting excluded nodes (i.e. do not prevent default and let the event bubble)
- * @returns {Function} clean up method
- */
-function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOnInputs = false, shouldBubble = false, priority = 0, shouldPreventDefault = true, excludedNodes = []) {
- const platformAdjustedModifiers = getPlatformEquivalentForKeys(modifiers);
- const displayName = getDisplayName(key, platformAdjustedModifiers);
- if (!_.has(eventHandlers, displayName)) {
- eventHandlers[displayName] = [];
- }
-
- const callbackID = Str.guid();
- eventHandlers[displayName].splice(priority, 0, {
- id: callbackID,
- callback,
- captureOnInputs,
- shouldPreventDefault,
- shouldBubble,
- excludedNodes,
- });
-
- if (descriptionKey) {
- documentedShortcuts[displayName] = {
- shortcutKey: key,
- descriptionKey,
- displayName,
- modifiers,
- };
- }
-
- return () => unsubscribe(displayName, callbackID);
-}
-
-/**
- * This module configures a global keyboard event handler.
- *
- * It uses a stack to store event handlers for each key combination. Some additional details:
- *
- * - By default, new handlers are pushed to the top of the stack. If you pass a >0 priority when subscribing to the key event,
- * then the handler will get pushed further down the stack. This means that priority of 0 is higher than priority 1.
- *
- * - When a key event occurs, we trigger callbacks for that key starting from the top of the stack.
- * By default, events do not bubble, and only the handler at the top of the stack will be executed.
- * Individual callbacks can be configured with the shouldBubble parameter, to allow the next event handler on the stack execute.
- *
- * - Each handler has a unique callbackID, so calling the `unsubscribe` function (returned from `subscribe`) will unsubscribe the expected handler,
- * regardless of its position in the stack.
- */
-const KeyboardShortcut = {
- subscribe,
- getDisplayName,
- getDocumentedShortcuts,
- getPlatformEquivalentForKeys,
-};
-
-export default KeyboardShortcut;
diff --git a/src/libs/KeyboardShortcut/index.ts b/src/libs/KeyboardShortcut/index.ts
new file mode 100644
index 000000000000..249311f92cd2
--- /dev/null
+++ b/src/libs/KeyboardShortcut/index.ts
@@ -0,0 +1,190 @@
+import Str from 'expensify-common/lib/str';
+import * as KeyCommand from 'react-native-key-command';
+import getOperatingSystem from '@libs/getOperatingSystem';
+import CONST from '@src/CONST';
+import bindHandlerToKeydownEvent from './bindHandlerToKeydownEvent';
+
+const operatingSystem = getOperatingSystem();
+
+type EventHandler = {
+ id: string;
+ callback: (event?: KeyboardEvent) => void;
+ captureOnInputs: boolean;
+ shouldPreventDefault: boolean;
+ shouldBubble: boolean | (() => void);
+ excludedNodes: string[];
+};
+
+// Handlers for the various keyboard listeners we set up
+const eventHandlers: Record = {};
+
+type Shortcut = {
+ displayName: string;
+ shortcutKey: string;
+ descriptionKey: string;
+ modifiers: string[];
+};
+
+// Documentation information for keyboard shortcuts that are displayed in the keyboard shortcuts informational modal
+const documentedShortcuts: Record = {};
+
+function getDocumentedShortcuts(): Shortcut[] {
+ return Object.values(documentedShortcuts).sort((a, b) => a.displayName.localeCompare(b.displayName));
+}
+
+const keyInputEnter = KeyCommand?.constants?.keyInputEnter?.toString() ?? 'keyInputEnter';
+const keyInputEscape = KeyCommand?.constants?.keyInputEscape?.toString() ?? 'keyInputEscape';
+const keyInputUpArrow = KeyCommand?.constants?.keyInputUpArrow?.toString() ?? 'keyInputUpArrow';
+const keyInputDownArrow = KeyCommand?.constants?.keyInputDownArrow?.toString() ?? 'keyInputDownArrow';
+const keyInputLeftArrow = KeyCommand?.constants?.keyInputLeftArrow?.toString() ?? 'keyInputLeftArrow';
+const keyInputRightArrow = KeyCommand?.constants?.keyInputRightArrow?.toString() ?? 'keyInputRightArrow';
+
+/**
+ * Generates the normalized display name for keyboard shortcuts.
+ */
+function getDisplayName(key: string, modifiers: string | string[]): string {
+ let displayName = (() => {
+ // Type of key is string and the type of KeyCommand.constants.* is number | string.
+ if (key.toLowerCase() === keyInputEnter.toLowerCase()) {
+ return ['ENTER'];
+ }
+ if (key.toLowerCase() === keyInputEscape.toLowerCase()) {
+ return ['ESCAPE'];
+ }
+ if (key.toLowerCase() === keyInputUpArrow.toLowerCase()) {
+ return ['ARROWUP'];
+ }
+ if (key.toLowerCase() === keyInputDownArrow.toLowerCase()) {
+ return ['ARROWDOWN'];
+ }
+ if (key.toLowerCase() === keyInputLeftArrow.toLowerCase()) {
+ return ['ARROWLEFT'];
+ }
+ if (key.toLowerCase() === keyInputRightArrow.toLowerCase()) {
+ return ['ARROWRIGHT'];
+ }
+ return [key.toUpperCase()];
+ })();
+
+ if (typeof modifiers === 'string') {
+ displayName.unshift(modifiers);
+ } else if (Array.isArray(modifiers)) {
+ displayName = [...modifiers.sort(), ...displayName];
+ }
+
+ displayName = displayName.map((modifier) => CONST.KEYBOARD_SHORTCUT_KEY_DISPLAY_NAME[modifier.toUpperCase() as keyof typeof CONST.KEYBOARD_SHORTCUT_KEY_DISPLAY_NAME] ?? modifier);
+
+ return displayName.join(' + ');
+}
+
+Object.values(CONST.KEYBOARD_SHORTCUTS).forEach((shortcut) => {
+ // If there is no trigger for the current OS nor a default trigger, then we don't need to do anything
+ if (!('trigger' in shortcut)) {
+ return;
+ }
+
+ const shortcutTrigger = (operatingSystem && shortcut.trigger[operatingSystem as keyof typeof shortcut.trigger]) ?? shortcut.trigger.DEFAULT;
+
+ KeyCommand.addListener(shortcutTrigger, (keyCommandEvent, event) => bindHandlerToKeydownEvent(getDisplayName, eventHandlers, keyCommandEvent, event));
+});
+
+/**
+ * Unsubscribes a keyboard event handler.
+ */
+function unsubscribe(displayName: string, callbackID: string) {
+ eventHandlers[displayName] = eventHandlers[displayName].filter((callback) => callback.id !== callbackID);
+ if (eventHandlers[displayName]?.length === 0) {
+ delete documentedShortcuts[displayName];
+ }
+}
+
+/**
+ * Return platform specific modifiers for keys like Control (CMD on macOS)
+ */
+function getPlatformEquivalentForKeys(keys: string[]): string[] {
+ return keys.map((key) => {
+ if (!(key in CONST.PLATFORM_SPECIFIC_KEYS)) {
+ return key;
+ }
+
+ const platformModifiers = CONST.PLATFORM_SPECIFIC_KEYS[key as keyof typeof CONST.PLATFORM_SPECIFIC_KEYS];
+ return platformModifiers?.[operatingSystem as keyof typeof platformModifiers] ?? platformModifiers.DEFAULT ?? key;
+ });
+}
+
+/**
+ * Subscribes to a keyboard event.
+ * @param key The key to watch, i.e. 'K' or 'Escape'
+ * @param callback The callback to call
+ * @param descriptionKey Translation key for shortcut description
+ * @param [modifiers] Can either be shift or control
+ * @param [captureOnInputs] Should we capture the event on inputs too?
+ * @param [shouldBubble] Should the event bubble?
+ * @param [priority] The position the callback should take in the stack. 0 means top priority, and 1 means less priority than the most recently added.
+ * @param [shouldPreventDefault] Should call event.preventDefault after callback?
+ * @param [excludedNodes] Do not capture key events targeting excluded nodes (i.e. do not prevent default and let the event bubble)
+ * @returns clean up method
+ */
+function subscribe(
+ key: string,
+ callback: () => void,
+ descriptionKey: string,
+ modifiers: string[] = ['shift'],
+ captureOnInputs = false,
+ shouldBubble = false,
+ priority = 0,
+ shouldPreventDefault = true,
+ excludedNodes = [],
+) {
+ const platformAdjustedModifiers = getPlatformEquivalentForKeys(modifiers);
+ const displayName = getDisplayName(key, platformAdjustedModifiers);
+ if (!eventHandlers[displayName]) {
+ eventHandlers[displayName] = [];
+ }
+
+ const callbackID = Str.guid();
+ eventHandlers[displayName].splice(priority, 0, {
+ id: callbackID,
+ callback,
+ captureOnInputs,
+ shouldPreventDefault,
+ shouldBubble,
+ excludedNodes,
+ });
+
+ if (descriptionKey) {
+ documentedShortcuts[displayName] = {
+ shortcutKey: key,
+ descriptionKey,
+ displayName,
+ modifiers,
+ };
+ }
+
+ return () => unsubscribe(displayName, callbackID);
+}
+
+/**
+ * This module configures a global keyboard event handler.
+ *
+ * It uses a stack to store event handlers for each key combination. Some additional details:
+ *
+ * - By default, new handlers are pushed to the top of the stack. If you pass a >0 priority when subscribing to the key event,
+ * then the handler will get pushed further down the stack. This means that priority of 0 is higher than priority 1.
+ *
+ * - When a key event occurs, we trigger callbacks for that key starting from the top of the stack.
+ * By default, events do not bubble, and only the handler at the top of the stack will be executed.
+ * Individual callbacks can be configured with the shouldBubble parameter, to allow the next event handler on the stack execute.
+ *
+ * - Each handler has a unique callbackID, so calling the `unsubscribe` function (returned from `subscribe`) will unsubscribe the expected handler,
+ * regardless of its position in the stack.
+ */
+const KeyboardShortcut = {
+ subscribe,
+ getDisplayName,
+ getDocumentedShortcuts,
+ getPlatformEquivalentForKeys,
+};
+
+export default KeyboardShortcut;
+export type {EventHandler};
diff --git a/src/libs/KeyboardShortcut/isEnterWhileComposition.js b/src/libs/KeyboardShortcut/isEnterWhileComposition.ts
similarity index 73%
rename from src/libs/KeyboardShortcut/isEnterWhileComposition.js
rename to src/libs/KeyboardShortcut/isEnterWhileComposition.ts
index 6269440716b5..51e198f1c2d1 100644
--- a/src/libs/KeyboardShortcut/isEnterWhileComposition.js
+++ b/src/libs/KeyboardShortcut/isEnterWhileComposition.ts
@@ -1,13 +1,12 @@
-import * as Browser from '../Browser';
-import CONST from '../../CONST';
+import {NativeSyntheticEvent} from 'react-native';
+import * as Browser from '@libs/Browser';
+import CONST from '@src/CONST';
/**
* Check if the Enter key was pressed during IME confirmation (i.e. while the text is being composed).
* See {@link https://en.wikipedia.org/wiki/Input_method}
- * @param {Event} event
- * @returns {boolean}
*/
-const isEnterWhileComposition = (event) => {
+const isEnterWhileComposition = (event: KeyboardEvent): boolean => {
// if on mobile chrome, the enter key event is never fired when the enter key is pressed while composition.
if (Browser.isMobileChrome()) {
return false;
@@ -18,7 +17,8 @@ const isEnterWhileComposition = (event) => {
if (CONST.BROWSER.SAFARI === Browser.getBrowser()) {
return event.keyCode === 229;
}
- return event.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey && event.nativeEvent && event.nativeEvent.isComposing;
+
+ return event.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey && (event as unknown as NativeSyntheticEvent)?.nativeEvent?.isComposing;
};
export default isEnterWhileComposition;
diff --git a/src/libs/LocaleDigitUtils.ts b/src/libs/LocaleDigitUtils.ts
index e17620aa5427..d9ba23ff4f9f 100644
--- a/src/libs/LocaleDigitUtils.ts
+++ b/src/libs/LocaleDigitUtils.ts
@@ -1,5 +1,4 @@
import _ from 'lodash';
-
import * as NumberFormatUtils from './NumberFormatUtils';
const STANDARD_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '-', ','];
diff --git a/src/libs/LocalePhoneNumber.ts b/src/libs/LocalePhoneNumber.ts
index 962040aee049..e50f3be87c84 100644
--- a/src/libs/LocalePhoneNumber.ts
+++ b/src/libs/LocalePhoneNumber.ts
@@ -1,7 +1,7 @@
-import Onyx from 'react-native-onyx';
-import Str from 'expensify-common/lib/str';
import {parsePhoneNumber} from 'awesome-phonenumber';
-import ONYXKEYS from '../ONYXKEYS';
+import Str from 'expensify-common/lib/str';
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
let countryCodeByIP: number;
Onyx.connect({
diff --git a/src/libs/Localize/LocaleListener/BaseLocaleListener.js b/src/libs/Localize/LocaleListener/BaseLocaleListener.js
index 9d4e62c374b0..0f861b20040a 100644
--- a/src/libs/Localize/LocaleListener/BaseLocaleListener.js
+++ b/src/libs/Localize/LocaleListener/BaseLocaleListener.js
@@ -1,6 +1,6 @@
import Onyx from 'react-native-onyx';
-import CONST from '../../../CONST';
-import ONYXKEYS from '../../../ONYXKEYS';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
let preferredLocale = CONST.LOCALES.DEFAULT;
diff --git a/src/libs/Localize/index.js b/src/libs/Localize/index.js
index a26c7d4ebc10..f2f8cfa1f8b0 100644
--- a/src/libs/Localize/index.js
+++ b/src/libs/Localize/index.js
@@ -1,15 +1,15 @@
-import _ from 'underscore';
-import lodashGet from 'lodash/get';
import Str from 'expensify-common/lib/str';
+import lodashGet from 'lodash/get';
import * as RNLocalize from 'react-native-localize';
import Onyx from 'react-native-onyx';
-import Log from '../Log';
-import Config from '../../CONFIG';
-import translations from '../../languages/translations';
-import CONST from '../../CONST';
+import _ from 'underscore';
+import Log from '@libs/Log';
+import Config from '@src/CONFIG';
+import CONST from '@src/CONST';
+import translations from '@src/languages/translations';
+import ONYXKEYS from '@src/ONYXKEYS';
import LocaleListener from './LocaleListener';
import BaseLocaleListener from './LocaleListener/BaseLocaleListener';
-import ONYXKEYS from '../../ONYXKEYS';
// Current user mail is needed for handling missing translations
let userEmail = '';
diff --git a/src/libs/Log.ts b/src/libs/Log.ts
index cf139eec2682..e171e6338ffe 100644
--- a/src/libs/Log.ts
+++ b/src/libs/Log.ts
@@ -1,12 +1,13 @@
// Making an exception to this rule here since we don't need an "action" for Log and Log should just be used directly. Creating a Log
// action would likely cause confusion about which one to use. But most other API methods should happen inside an action file.
+
/* eslint-disable rulesdir/no-api-in-views */
-import {Merge} from 'type-fest';
import Logger from 'expensify-common/lib/Logger';
-import getPlatform from './getPlatform';
+import {Merge} from 'type-fest';
import pkg from '../../package.json';
-import requireParameters from './requireParameters';
+import getPlatform from './getPlatform';
import * as Network from './Network';
+import requireParameters from './requireParameters';
let timeout: NodeJS.Timeout;
diff --git a/src/libs/LoginUtils.ts b/src/libs/LoginUtils.ts
index 32f6aece6f96..742f9bfe16ce 100644
--- a/src/libs/LoginUtils.ts
+++ b/src/libs/LoginUtils.ts
@@ -1,9 +1,9 @@
+import {parsePhoneNumber} from 'awesome-phonenumber';
+import {PUBLIC_DOMAINS} from 'expensify-common/lib/CONST';
import Str from 'expensify-common/lib/str';
import Onyx from 'react-native-onyx';
-import {PUBLIC_DOMAINS} from 'expensify-common/lib/CONST';
-import {parsePhoneNumber} from 'awesome-phonenumber';
-import CONST from '../CONST';
-import ONYXKEYS from '../ONYXKEYS';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
let countryCodeByIP: number;
Onyx.connect({
diff --git a/src/libs/Metrics/index.native.ts b/src/libs/Metrics/index.native.ts
index 526e5c57a269..373f826e9ca3 100644
--- a/src/libs/Metrics/index.native.ts
+++ b/src/libs/Metrics/index.native.ts
@@ -1,4 +1,4 @@
-import CONFIG from '../../CONFIG';
+import CONFIG from '@src/CONFIG';
import {CanCaptureOnyxMetrics, CanCapturePerformanceMetrics} from './types';
/**
diff --git a/src/libs/Metrics/index.ts b/src/libs/Metrics/index.ts
index 7c33f31cb19e..1097826aff24 100644
--- a/src/libs/Metrics/index.ts
+++ b/src/libs/Metrics/index.ts
@@ -1,4 +1,4 @@
-import CONFIG from '../../CONFIG';
+import CONFIG from '@src/CONFIG';
import {CanCaptureOnyxMetrics, CanCapturePerformanceMetrics} from './types';
// We don't capture performance metrics on web as there are enough tools available
diff --git a/src/libs/Middleware/HandleUnusedOptimisticID.ts b/src/libs/Middleware/HandleUnusedOptimisticID.ts
index 14f7d08d1fdb..abca86522d2b 100644
--- a/src/libs/Middleware/HandleUnusedOptimisticID.ts
+++ b/src/libs/Middleware/HandleUnusedOptimisticID.ts
@@ -1,9 +1,9 @@
import _ from 'lodash';
-import ONYXKEYS from '../../ONYXKEYS';
-import Report from '../../types/onyx/Report';
-import {Middleware} from '../Request';
-import * as PersistedRequests from '../actions/PersistedRequests';
-import deepReplaceKeysAndValues from '../deepReplaceKeysAndValues';
+import deepReplaceKeysAndValues from '@libs/deepReplaceKeysAndValues';
+import {Middleware} from '@libs/Request';
+import * as PersistedRequests from '@userActions/PersistedRequests';
+import ONYXKEYS from '@src/ONYXKEYS';
+import Report from '@src/types/onyx/Report';
const handleUnusedOptimisticID: Middleware = (requestResponse, request, isFromSequentialQueue) =>
requestResponse.then((response) => {
diff --git a/src/libs/Middleware/Logging.ts b/src/libs/Middleware/Logging.ts
index 171cb4b9ab4c..3ef819298f80 100644
--- a/src/libs/Middleware/Logging.ts
+++ b/src/libs/Middleware/Logging.ts
@@ -1,7 +1,7 @@
-import Log from '../Log';
-import CONST from '../../CONST';
-import Request from '../../types/onyx/Request';
-import Response from '../../types/onyx/Response';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
+import Request from '@src/types/onyx/Request';
+import Response from '@src/types/onyx/Response';
import Middleware from './types';
function logRequestDetails(message: string, request: Request, response?: Response | void) {
diff --git a/src/libs/Middleware/Reauthentication.ts b/src/libs/Middleware/Reauthentication.ts
index aec09227e441..f1f71a85b16c 100644
--- a/src/libs/Middleware/Reauthentication.ts
+++ b/src/libs/Middleware/Reauthentication.ts
@@ -1,10 +1,10 @@
-import CONST from '../../CONST';
-import * as NetworkStore from '../Network/NetworkStore';
-import * as MainQueue from '../Network/MainQueue';
-import * as Authentication from '../Authentication';
-import * as Request from '../Request';
-import Log from '../Log';
-import NetworkConnection from '../NetworkConnection';
+import * as Authentication from '@libs/Authentication';
+import Log from '@libs/Log';
+import * as MainQueue from '@libs/Network/MainQueue';
+import * as NetworkStore from '@libs/Network/NetworkStore';
+import NetworkConnection from '@libs/NetworkConnection';
+import * as Request from '@libs/Request';
+import CONST from '@src/CONST';
import Middleware from './types';
// We store a reference to the active authentication request so that we are only ever making one request to authenticate at a time.
diff --git a/src/libs/Middleware/RecheckConnection.ts b/src/libs/Middleware/RecheckConnection.ts
index 5a685d66fd02..1f43b0171800 100644
--- a/src/libs/Middleware/RecheckConnection.ts
+++ b/src/libs/Middleware/RecheckConnection.ts
@@ -1,5 +1,5 @@
-import CONST from '../../CONST';
-import NetworkConnection from '../NetworkConnection';
+import NetworkConnection from '@libs/NetworkConnection';
+import CONST from '@src/CONST';
import Middleware from './types';
/**
diff --git a/src/libs/Middleware/SaveResponseInOnyx.ts b/src/libs/Middleware/SaveResponseInOnyx.ts
index 0a279a7425b4..d73a10d98663 100644
--- a/src/libs/Middleware/SaveResponseInOnyx.ts
+++ b/src/libs/Middleware/SaveResponseInOnyx.ts
@@ -1,7 +1,7 @@
-import CONST from '../../CONST';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as MemoryOnlyKeys from '../actions/MemoryOnlyKeys/MemoryOnlyKeys';
-import * as OnyxUpdates from '../actions/OnyxUpdates';
+import * as MemoryOnlyKeys from '@userActions/MemoryOnlyKeys/MemoryOnlyKeys';
+import * as OnyxUpdates from '@userActions/OnyxUpdates';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import Middleware from './types';
// If we're executing any of these requests, we don't need to trigger our OnyxUpdates flow to update the current data even if our current value is out of
diff --git a/src/libs/Middleware/types.ts b/src/libs/Middleware/types.ts
index ece210ffe2af..c1d199539b15 100644
--- a/src/libs/Middleware/types.ts
+++ b/src/libs/Middleware/types.ts
@@ -1,5 +1,5 @@
-import Request from '../../types/onyx/Request';
-import Response from '../../types/onyx/Response';
+import Request from '@src/types/onyx/Request';
+import Response from '@src/types/onyx/Response';
type Middleware = (response: Promise, request: Request, isFromSequentialQueue: boolean) => Promise;
diff --git a/src/libs/MoneyRequestUtils.ts b/src/libs/MoneyRequestUtils.ts
index 420184973a34..83c66be429d2 100644
--- a/src/libs/MoneyRequestUtils.ts
+++ b/src/libs/MoneyRequestUtils.ts
@@ -1,5 +1,5 @@
import {ValueOf} from 'type-fest';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
/**
* Strip comma from the amount
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 3ac6a8025eb9..fdc48aec2010 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -1,40 +1,40 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
import React, {memo, useEffect, useRef} from 'react';
+import {View} from 'react-native';
import Onyx, {withOnyx} from 'react-native-onyx';
-import PropTypes from 'prop-types';
import _ from 'underscore';
-import lodashGet from 'lodash/get';
-import {View} from 'react-native';
-import CONST from '../../../CONST';
-import * as PersonalDetails from '../../actions/PersonalDetails';
-import * as Pusher from '../../Pusher/pusher';
-import PusherConnectionManager from '../../PusherConnectionManager';
-import ROUTES from '../../../ROUTES';
-import ONYXKEYS from '../../../ONYXKEYS';
-import Timing from '../../actions/Timing';
-import NetworkConnection from '../../NetworkConnection';
-import CONFIG from '../../../CONFIG';
-import KeyboardShortcut from '../../KeyboardShortcut';
-import Navigation from '../Navigation';
-import * as User from '../../actions/User';
-import * as Modal from '../../actions/Modal';
-import * as Report from '../../actions/Report';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import getCurrentUrl from '@libs/Navigation/currentUrl';
+import Navigation from '@libs/Navigation/Navigation';
+import NetworkConnection from '@libs/NetworkConnection';
+import * as Pusher from '@libs/Pusher/pusher';
+import PusherConnectionManager from '@libs/PusherConnectionManager';
+import * as SessionUtils from '@libs/SessionUtils';
+import DemoSetupPage from '@pages/DemoSetupPage';
+import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
+import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage';
+import styles from '@styles/styles';
+import * as App from '@userActions/App';
+import * as Download from '@userActions/Download';
+import * as Modal from '@userActions/Modal';
+import * as PersonalDetails from '@userActions/PersonalDetails';
+import * as Report from '@userActions/Report';
+import * as Session from '@userActions/Session';
+import Timing from '@userActions/Timing';
+import * as User from '@userActions/User';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import NAVIGATORS from '@src/NAVIGATORS';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
import createCustomStackNavigator from './createCustomStackNavigator';
-import SCREENS from '../../../SCREENS';
import defaultScreenOptions from './defaultScreenOptions';
-import * as App from '../../actions/App';
-import * as Download from '../../actions/Download';
-import * as Session from '../../actions/Session';
-import RightModalNavigator from './Navigators/RightModalNavigator';
-import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
-import NAVIGATORS from '../../../NAVIGATORS';
-import DesktopSignInRedirectPage from '../../../pages/signin/DesktopSignInRedirectPage';
-import styles from '../../../styles/styles';
-import * as SessionUtils from '../../SessionUtils';
-import NotFoundPage from '../../../pages/ErrorPage/NotFoundPage';
import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
-import DemoSetupPage from '../../../pages/DemoSetupPage';
-import getCurrentUrl from '../currentUrl';
-import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
+import RightModalNavigator from './Navigators/RightModalNavigator';
const loadReportAttachments = () => require('../../../pages/home/report/ReportAttachments').default;
const loadSidebarScreen = () => require('../../../pages/home/sidebar/SidebarScreen').default;
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 088da657a693..2f0a75a02cc3 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -1,8 +1,8 @@
-import _ from 'underscore';
+import {CardStyleInterpolators, createStackNavigator} from '@react-navigation/stack';
import React from 'react';
-import {createStackNavigator, CardStyleInterpolators} from '@react-navigation/stack';
-import styles from '../../../styles/styles';
-import SCREENS from '../../../SCREENS';
+import _ from 'underscore';
+import styles from '@styles/styles';
+import SCREENS from '@src/SCREENS';
const defaultSubRouteOptions = {
cardStyle: styles.navigationScreenCardStyle,
diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.js
index 64eadcbe06c3..fc75f3544346 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.js
@@ -1,10 +1,10 @@
-import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
-import SCREENS from '../../../../SCREENS';
-import ReportScreenWrapper from '../ReportScreenWrapper';
-import getCurrentUrl from '../../currentUrl';
-import styles from '../../../../styles/styles';
-import FreezeWrapper from '../../FreezeWrapper';
+import React from 'react';
+import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper';
+import getCurrentUrl from '@libs/Navigation/currentUrl';
+import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
+import styles from '@styles/styles';
+import SCREENS from '@src/SCREENS';
const Stack = createStackNavigator();
diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay.js b/src/libs/Navigation/AppNavigator/Navigators/Overlay.js
index 1b2faff8c5e3..a36f98076d22 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/Overlay.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay.js
@@ -1,13 +1,11 @@
-import React from 'react';
-import {Animated, View} from 'react-native';
import {useCardAnimation} from '@react-navigation/stack';
-
import PropTypes from 'prop-types';
-import styles from '../../../../styles/styles';
-
-import PressableWithoutFeedback from '../../../../components/Pressable/PressableWithoutFeedback';
-import useLocalize from '../../../../hooks/useLocalize';
-import CONST from '../../../../CONST';
+import React from 'react';
+import {Animated, View} from 'react-native';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
const propTypes = {
/* Callback to close the modal */
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index 76203763bb0e..de3fb9e79659 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -1,14 +1,13 @@
-import React from 'react';
-import {View} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import PropTypes from 'prop-types';
-
-import * as ModalStackNavigators from '../ModalStackNavigators';
-import RHPScreenOptions from '../RHPScreenOptions';
-import useWindowDimensions from '../../../../hooks/useWindowDimensions';
-import styles from '../../../../styles/styles';
+import React from 'react';
+import {View} from 'react-native';
+import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
+import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions';
+import styles from '@styles/styles';
import Overlay from './Overlay';
-import NoDropZone from '../../../../components/DragAndDrop/NoDropZone';
const Stack = createStackNavigator();
diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.js b/src/libs/Navigation/AppNavigator/PublicScreens.js
index 7b0afb787278..b50769c7caed 100644
--- a/src/libs/Navigation/AppNavigator/PublicScreens.js
+++ b/src/libs/Navigation/AppNavigator/PublicScreens.js
@@ -1,14 +1,14 @@
-import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
-import SignInPage from '../../../pages/signin/SignInPage';
-import ValidateLoginPage from '../../../pages/ValidateLoginPage';
-import LogInWithShortLivedAuthTokenPage from '../../../pages/LogInWithShortLivedAuthTokenPage';
-import SCREENS from '../../../SCREENS';
+import React from 'react';
+import LogInWithShortLivedAuthTokenPage from '@pages/LogInWithShortLivedAuthTokenPage';
+import AppleSignInDesktopPage from '@pages/signin/AppleSignInDesktopPage';
+import GoogleSignInDesktopPage from '@pages/signin/GoogleSignInDesktopPage';
+import SAMLSignInPage from '@pages/signin/SAMLSignInPage';
+import SignInPage from '@pages/signin/SignInPage';
+import UnlinkLoginPage from '@pages/UnlinkLoginPage';
+import ValidateLoginPage from '@pages/ValidateLoginPage';
+import SCREENS from '@src/SCREENS';
import defaultScreenOptions from './defaultScreenOptions';
-import UnlinkLoginPage from '../../../pages/UnlinkLoginPage';
-import AppleSignInDesktopPage from '../../../pages/signin/AppleSignInDesktopPage';
-import GoogleSignInDesktopPage from '../../../pages/signin/GoogleSignInDesktopPage';
-import SAMLSignInPage from '../../../pages/signin/SAMLSignInPage';
const RootStack = createStackNavigator();
diff --git a/src/libs/Navigation/AppNavigator/RHPScreenOptions.js b/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
index d7448dcf2314..6adf5bd2b507 100644
--- a/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
@@ -1,5 +1,5 @@
import {CardStyleInterpolators} from '@react-navigation/stack';
-import styles from '../../../styles/styles';
+import styles from '@styles/styles';
const RHPScreenOptions = {
headerShown: false,
diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
index 8cfef2439adb..70a33ee34a67 100644
--- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
+++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
@@ -1,13 +1,13 @@
-import {useEffect} from 'react';
-import PropTypes from 'prop-types';
import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import {useEffect} from 'react';
import {withOnyx} from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
-import * as ReportUtils from '../../ReportUtils';
-import reportPropTypes from '../../../pages/reportPropTypes';
-import * as App from '../../actions/App';
-import usePermissions from '../../../hooks/usePermissions';
-import Navigation from '../Navigation';
+import usePermissions from '@hooks/usePermissions';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import reportPropTypes from '@pages/reportPropTypes';
+import * as App from '@userActions/App';
+import ONYXKEYS from '@src/ONYXKEYS';
const propTypes = {
/** Available reports that would be displayed in this navigator */
diff --git a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
index 542be8ed859e..87a8a4abc687 100644
--- a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
+++ b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
-import ReportScreen from '../../../pages/home/ReportScreen';
+import ReportScreen from '@pages/home/ReportScreen';
import ReportScreenIDSetter from './ReportScreenIDSetter';
const propTypes = {
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js
index 42caad5b3969..5d3eb38d49dc 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js
@@ -1,8 +1,8 @@
-import _ from 'underscore';
import {StackRouter} from '@react-navigation/native';
import lodashFindLast from 'lodash/findLast';
-import NAVIGATORS from '../../../../NAVIGATORS';
-import SCREENS from '../../../../SCREENS';
+import _ from 'underscore';
+import NAVIGATORS from '@src/NAVIGATORS';
+import SCREENS from '@src/SCREENS';
/**
* @param {Object} state - react-navigation state
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js
index 58be3d2af3da..ae36f4aff9ad 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js
@@ -1,9 +1,9 @@
-import React, {useRef} from 'react';
-import PropTypes from 'prop-types';
-import {useNavigationBuilder, createNavigatorFactory} from '@react-navigation/native';
+import {createNavigatorFactory, useNavigationBuilder} from '@react-navigation/native';
import {StackView} from '@react-navigation/stack';
+import PropTypes from 'prop-types';
+import React, {useRef} from 'react';
+import useWindowDimensions from '@hooks/useWindowDimensions';
import CustomRouter from './CustomRouter';
-import useWindowDimensions from '../../../../hooks/useWindowDimensions';
const propTypes = {
/* Determines if the navigator should render the StackView (narrow) or ThreePaneView (wide) */
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
index a7456fb071b4..04784fb9d0e1 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
@@ -1,8 +1,8 @@
+import getNavigationModalCardStyle from '@styles/getNavigationModalCardStyles';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
+import CONFIG from '@src/CONFIG';
import modalCardStyleInterpolator from './modalCardStyleInterpolator';
-import styles from '../../../styles/styles';
-import variables from '../../../styles/variables';
-import getNavigationModalCardStyle from '../../../styles/getNavigationModalCardStyles';
-import CONFIG from '../../../CONFIG';
const commonScreenOptions = {
headerShown: false,
diff --git a/src/libs/Navigation/AppNavigator/index.js b/src/libs/Navigation/AppNavigator/index.js
index dee8027b2f30..0d03badf37bc 100644
--- a/src/libs/Navigation/AppNavigator/index.js
+++ b/src/libs/Navigation/AppNavigator/index.js
@@ -1,5 +1,5 @@
-import React from 'react';
import PropTypes from 'prop-types';
+import React from 'react';
const propTypes = {
/** If we have an authToken this is true */
diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
index ec442efbba86..446d195fc466 100644
--- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
+++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
@@ -1,6 +1,6 @@
import {Animated} from 'react-native';
-import variables from '../../../styles/variables';
-import getCardStyles from '../../../styles/cardStyles';
+import getCardStyles from '@styles/cardStyles';
+import variables from '@styles/variables';
export default (isSmallScreenWidth, isFullScreenModal, {current: {progress}, inverted, layouts: {screen}}) => {
const translateX = Animated.multiply(
diff --git a/src/libs/Navigation/FreezeWrapper.js b/src/libs/Navigation/FreezeWrapper.js
index 07b05651a769..592d869dc0de 100644
--- a/src/libs/Navigation/FreezeWrapper.js
+++ b/src/libs/Navigation/FreezeWrapper.js
@@ -1,7 +1,7 @@
-import React, {useEffect, useState, useRef} from 'react';
+import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
import lodashFindIndex from 'lodash/findIndex';
import PropTypes from 'prop-types';
-import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
+import React, {useEffect, useRef, useState} from 'react';
import {Freeze} from 'react-freeze';
const propTypes = {
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index 6bbf53ffa6ea..ae13e2b07206 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -1,19 +1,19 @@
+import {getActionFromState} from '@react-navigation/core';
+import {CommonActions, getPathFromState, StackActions} from '@react-navigation/native';
import _ from 'lodash';
import lodashGet from 'lodash/get';
-import {CommonActions, getPathFromState, StackActions} from '@react-navigation/native';
-import {getActionFromState} from '@react-navigation/core';
-import Log from '../Log';
-import linkTo from './linkTo';
-import ROUTES from '../../ROUTES';
-import linkingConfig from './linkingConfig';
-import navigationRef from './navigationRef';
-import NAVIGATORS from '../../NAVIGATORS';
-import originalGetTopmostReportId from './getTopmostReportId';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
+import NAVIGATORS from '@src/NAVIGATORS';
+import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
+import getStateFromPath from './getStateFromPath';
import originalGetTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName';
import originalGetTopmostReportActionId from './getTopmostReportActionID';
-import getStateFromPath from './getStateFromPath';
-import SCREENS from '../../SCREENS';
-import CONST from '../../CONST';
+import originalGetTopmostReportId from './getTopmostReportId';
+import linkingConfig from './linkingConfig';
+import linkTo from './linkTo';
+import navigationRef from './navigationRef';
let resolveNavigationIsReadyPromise;
const navigationIsReadyPromise = new Promise((resolve) => {
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index c7a3b14e4fb0..3478f7b8ed8d 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -1,17 +1,17 @@
-import React, {useRef, useEffect, useContext} from 'react';
+import {DefaultTheme, getPathFromState, NavigationContainer} from '@react-navigation/native';
import PropTypes from 'prop-types';
-import {NavigationContainer, DefaultTheme, getPathFromState} from '@react-navigation/native';
-import {useSharedValue, useAnimatedReaction, interpolateColor, withTiming, withDelay, Easing, runOnJS} from 'react-native-reanimated';
-import useFlipper from '../../hooks/useFlipper';
-import Navigation, {navigationRef} from './Navigation';
-import linkingConfig from './linkingConfig';
+import React, {useContext, useEffect, useRef} from 'react';
+import {Easing, interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated';
+import useCurrentReportID from '@hooks/useCurrentReportID';
+import useFlipper from '@hooks/useFlipper';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import Log from '@libs/Log';
+import StatusBar from '@libs/StatusBar';
+import {SidebarNavigationContext} from '@pages/home/sidebar/SidebarNavigationContext';
+import themeColors from '@styles/themes/default';
import AppNavigator from './AppNavigator';
-import themeColors from '../../styles/themes/default';
-import Log from '../Log';
-import StatusBar from '../StatusBar';
-import useCurrentReportID from '../../hooks/useCurrentReportID';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
-import {SidebarNavigationContext} from '../../pages/home/sidebar/SidebarNavigationContext';
+import linkingConfig from './linkingConfig';
+import Navigation, {navigationRef} from './Navigation';
// https://reactnavigation.org/docs/themes
const navigationTheme = {
diff --git a/src/libs/Navigation/OnyxTabNavigator.js b/src/libs/Navigation/OnyxTabNavigator.js
index 158160e9aa13..eeed3e0cd270 100644
--- a/src/libs/Navigation/OnyxTabNavigator.js
+++ b/src/libs/Navigation/OnyxTabNavigator.js
@@ -1,9 +1,9 @@
-import React from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
-import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
-import Tab from '../actions/Tab';
-import ONYXKEYS from '../../ONYXKEYS';
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import Tab from '@userActions/Tab';
+import ONYXKEYS from '@src/ONYXKEYS';
const propTypes = {
/** ID of the tab component to be saved in onyx */
diff --git a/src/libs/Navigation/linkTo.js b/src/libs/Navigation/linkTo.js
index fcb3bd5df9c5..e77d787ab4f8 100644
--- a/src/libs/Navigation/linkTo.js
+++ b/src/libs/Navigation/linkTo.js
@@ -1,11 +1,11 @@
import {getActionFromState} from '@react-navigation/core';
import _ from 'lodash';
-import NAVIGATORS from '../../NAVIGATORS';
-import linkingConfig from './linkingConfig';
-import getTopmostReportId from './getTopmostReportId';
+import CONST from '@src/CONST';
+import NAVIGATORS from '@src/NAVIGATORS';
import getStateFromPath from './getStateFromPath';
-import CONST from '../../CONST';
import getTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName';
+import getTopmostReportId from './getTopmostReportId';
+import linkingConfig from './linkingConfig';
/**
* Motivation for this function is described in NAVIGATION.md
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 79609f551ee4..fff86b684872 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -1,7 +1,7 @@
-import ROUTES from '../../ROUTES';
-import SCREENS from '../../SCREENS';
-import CONST from '../../CONST';
-import NAVIGATORS from '../../NAVIGATORS';
+import CONST from '@src/CONST';
+import NAVIGATORS from '@src/NAVIGATORS';
+import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
export default {
prefixes: ['new-expensify://', 'https://www.expensify.cash', 'https://staging.expensify.cash', 'http://localhost', CONST.NEW_EXPENSIFY_URL, CONST.STAGING_NEW_EXPENSIFY_URL],
diff --git a/src/libs/Navigation/shouldPreventDeeplinkPrompt/index.js b/src/libs/Navigation/shouldPreventDeeplinkPrompt/index.js
index 861e40eaa24d..23f46cb9808f 100644
--- a/src/libs/Navigation/shouldPreventDeeplinkPrompt/index.js
+++ b/src/libs/Navigation/shouldPreventDeeplinkPrompt/index.js
@@ -1,4 +1,4 @@
-import CONST from '../../../CONST';
+import CONST from '@src/CONST';
/**
* Determines if the deeplink prompt should be shown on the current screen
diff --git a/src/libs/Network/MainQueue.ts b/src/libs/Network/MainQueue.ts
index 5f069e2d0ed4..3ae0d44680a4 100644
--- a/src/libs/Network/MainQueue.ts
+++ b/src/libs/Network/MainQueue.ts
@@ -1,7 +1,7 @@
+import * as Request from '@libs/Request';
+import OnyxRequest from '@src/types/onyx/Request';
import * as NetworkStore from './NetworkStore';
import * as SequentialQueue from './SequentialQueue';
-import * as Request from '../Request';
-import OnyxRequest from '../../types/onyx/Request';
// Queue for network requests so we don't lose actions done by the user while offline
let networkRequestQueue: OnyxRequest[] = [];
diff --git a/src/libs/Network/NetworkStore.ts b/src/libs/Network/NetworkStore.ts
index 0910031bdb63..52e4147f1b3c 100644
--- a/src/libs/Network/NetworkStore.ts
+++ b/src/libs/Network/NetworkStore.ts
@@ -1,6 +1,6 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
-import Credentials from '../../types/onyx/Credentials';
+import ONYXKEYS from '@src/ONYXKEYS';
+import Credentials from '@src/types/onyx/Credentials';
let credentials: Credentials | null = null;
let authToken: string | null = null;
diff --git a/src/libs/Network/SequentialQueue.ts b/src/libs/Network/SequentialQueue.ts
index 980bbc0efc44..d4aee4a221e5 100644
--- a/src/libs/Network/SequentialQueue.ts
+++ b/src/libs/Network/SequentialQueue.ts
@@ -1,13 +1,13 @@
import Onyx from 'react-native-onyx';
-import * as PersistedRequests from '../actions/PersistedRequests';
+import * as ActiveClientManager from '@libs/ActiveClientManager';
+import * as Request from '@libs/Request';
+import * as RequestThrottle from '@libs/RequestThrottle';
+import * as PersistedRequests from '@userActions/PersistedRequests';
+import * as QueuedOnyxUpdates from '@userActions/QueuedOnyxUpdates';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import OnyxRequest from '@src/types/onyx/Request';
import * as NetworkStore from './NetworkStore';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as ActiveClientManager from '../ActiveClientManager';
-import * as Request from '../Request';
-import * as RequestThrottle from '../RequestThrottle';
-import CONST from '../../CONST';
-import * as QueuedOnyxUpdates from '../actions/QueuedOnyxUpdates';
-import OnyxRequest from '../../types/onyx/Request';
let resolveIsReadyPromise: ((args?: unknown[]) => void) | undefined;
let isReadyPromise = new Promise((resolve) => {
diff --git a/src/libs/Network/enhanceParameters.ts b/src/libs/Network/enhanceParameters.ts
index 54d72a7c6c99..6ff54f94bc88 100644
--- a/src/libs/Network/enhanceParameters.ts
+++ b/src/libs/Network/enhanceParameters.ts
@@ -1,5 +1,5 @@
-import CONFIG from '../../CONFIG';
-import getPlatform from '../getPlatform';
+import getPlatform from '@libs/getPlatform';
+import CONFIG from '@src/CONFIG';
import * as NetworkStore from './NetworkStore';
/**
diff --git a/src/libs/Network/index.ts b/src/libs/Network/index.ts
index bf38bc33e95a..4ccb8df01163 100644
--- a/src/libs/Network/index.ts
+++ b/src/libs/Network/index.ts
@@ -1,10 +1,10 @@
-import * as ActiveClientManager from '../ActiveClientManager';
-import CONST from '../../CONST';
+import * as ActiveClientManager from '@libs/ActiveClientManager';
+import CONST from '@src/CONST';
+import {Request} from '@src/types/onyx';
+import Response from '@src/types/onyx/Response';
+import pkg from '../../../package.json';
import * as MainQueue from './MainQueue';
import * as SequentialQueue from './SequentialQueue';
-import pkg from '../../../package.json';
-import {Request} from '../../types/onyx';
-import Response from '../../types/onyx/Response';
// We must wait until the ActiveClientManager is ready so that we ensure only the "leader" tab processes any persisted requests
ActiveClientManager.isReady().then(() => {
diff --git a/src/libs/NetworkConnection.ts b/src/libs/NetworkConnection.ts
index 663a9c1b37d5..e150b8b650c1 100644
--- a/src/libs/NetworkConnection.ts
+++ b/src/libs/NetworkConnection.ts
@@ -1,12 +1,12 @@
-import Onyx from 'react-native-onyx';
import NetInfo from '@react-native-community/netinfo';
import throttle from 'lodash/throttle';
+import Onyx from 'react-native-onyx';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import * as NetworkActions from './actions/Network';
import AppStateMonitor from './AppStateMonitor';
import Log from './Log';
-import * as NetworkActions from './actions/Network';
-import CONFIG from '../CONFIG';
-import CONST from '../CONST';
-import ONYXKEYS from '../ONYXKEYS';
let isOffline = false;
let hasPendingNetworkCheck = false;
diff --git a/src/libs/NextStepUtils.js b/src/libs/NextStepUtils.js
index 78214bac7df9..303f9b2a9925 100644
--- a/src/libs/NextStepUtils.js
+++ b/src/libs/NextStepUtils.js
@@ -1,5 +1,5 @@
-import _ from 'underscore';
import Str from 'expensify-common/lib/str';
+import _ from 'underscore';
function parseMessage(messageToParse) {
let nextStepHTML = '';
diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.js b/src/libs/Notification/LocalNotification/BrowserNotifications.js
index 3199e4c6388d..20d9be48d915 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.js
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.js
@@ -1,9 +1,9 @@
// Web and desktop implementation only. Do not import for direct use. Use LocalNotification.
import _ from 'underscore';
+import EXPENSIFY_ICON_URL from '@assets/images/expensify-logo-round-clearspace.png';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as AppUpdate from '@userActions/AppUpdate';
import focusApp from './focusApp';
-import * as AppUpdate from '../../actions/AppUpdate';
-import EXPENSIFY_ICON_URL from '../../../../assets/images/expensify-logo-round-clearspace.png';
-import * as ReportUtils from '../../ReportUtils';
const DEFAULT_DELAY = 4000;
diff --git a/src/libs/Notification/PushNotification/ForegroundNotifications/index.android.js b/src/libs/Notification/PushNotification/ForegroundNotifications/index.android.js
index 0afc8fe10490..b36c0d0c7d18 100644
--- a/src/libs/Notification/PushNotification/ForegroundNotifications/index.android.js
+++ b/src/libs/Notification/PushNotification/ForegroundNotifications/index.android.js
@@ -1,5 +1,5 @@
import Airship from '@ua/react-native-airship';
-import shouldShowPushNotification from '../shouldShowPushNotification';
+import shouldShowPushNotification from '@libs/Notification/PushNotification/shouldShowPushNotification';
function configureForegroundNotifications() {
Airship.push.android.setForegroundDisplayPredicate((pushPayload) => Promise.resolve(shouldShowPushNotification(pushPayload)));
diff --git a/src/libs/Notification/PushNotification/ForegroundNotifications/index.ios.js b/src/libs/Notification/PushNotification/ForegroundNotifications/index.ios.js
index 17ad1baaebe3..0f0929951a90 100644
--- a/src/libs/Notification/PushNotification/ForegroundNotifications/index.ios.js
+++ b/src/libs/Notification/PushNotification/ForegroundNotifications/index.ios.js
@@ -1,5 +1,5 @@
import Airship, {iOS} from '@ua/react-native-airship';
-import shouldShowPushNotification from '../shouldShowPushNotification';
+import shouldShowPushNotification from '@libs/Notification/PushNotification/shouldShowPushNotification';
function configureForegroundNotifications() {
// Set our default iOS foreground presentation to be loud with a banner
diff --git a/src/libs/Notification/PushNotification/backgroundRefresh/index.android.js b/src/libs/Notification/PushNotification/backgroundRefresh/index.android.js
index d86589e2f207..b672069727a5 100644
--- a/src/libs/Notification/PushNotification/backgroundRefresh/index.android.js
+++ b/src/libs/Notification/PushNotification/backgroundRefresh/index.android.js
@@ -1,7 +1,7 @@
import Onyx from 'react-native-onyx';
-import * as App from '../../../actions/App';
-import Visibility from '../../../Visibility';
-import ONYXKEYS from '../../../../ONYXKEYS';
+import Visibility from '@libs/Visibility';
+import * as App from '@userActions/App';
+import ONYXKEYS from '@src/ONYXKEYS';
function getLastOnyxUpdateID() {
return new Promise((resolve) => {
diff --git a/src/libs/Notification/PushNotification/index.native.js b/src/libs/Notification/PushNotification/index.native.js
index 7192ee66a791..8513a88e46d3 100644
--- a/src/libs/Notification/PushNotification/index.native.js
+++ b/src/libs/Notification/PushNotification/index.native.js
@@ -1,12 +1,12 @@
-import _ from 'underscore';
-import Onyx from 'react-native-onyx';
import Airship, {EventType} from '@ua/react-native-airship';
import lodashGet from 'lodash/get';
-import Log from '../../Log';
-import NotificationType from './NotificationType';
-import * as PushNotification from '../../actions/PushNotification';
-import ONYXKEYS from '../../../ONYXKEYS';
+import Onyx from 'react-native-onyx';
+import _ from 'underscore';
+import Log from '@libs/Log';
+import * as PushNotification from '@userActions/PushNotification';
+import ONYXKEYS from '@src/ONYXKEYS';
import ForegroundNotifications from './ForegroundNotifications';
+import NotificationType from './NotificationType';
let isUserOptedInToPushNotifications = false;
Onyx.connect({
diff --git a/src/libs/Notification/PushNotification/shouldShowPushNotification.js b/src/libs/Notification/PushNotification/shouldShowPushNotification.js
index b9b9d974374c..f25d452a77d5 100644
--- a/src/libs/Notification/PushNotification/shouldShowPushNotification.js
+++ b/src/libs/Notification/PushNotification/shouldShowPushNotification.js
@@ -1,7 +1,7 @@
import _ from 'underscore';
-import * as Report from '../../actions/Report';
-import Log from '../../Log';
-import * as ReportActionUtils from '../../ReportActionsUtils';
+import Log from '@libs/Log';
+import * as ReportActionUtils from '@libs/ReportActionsUtils';
+import * as Report from '@userActions/Report';
/**
* Returns whether the given Airship notification should be shown depending on the current state of the app
diff --git a/src/libs/Notification/PushNotification/subscribePushNotification/index.js b/src/libs/Notification/PushNotification/subscribePushNotification/index.js
index 45dc8d8a7ae9..c5519b42dc09 100644
--- a/src/libs/Notification/PushNotification/subscribePushNotification/index.js
+++ b/src/libs/Notification/PushNotification/subscribePushNotification/index.js
@@ -1,7 +1,7 @@
import Onyx from 'react-native-onyx';
+import subscribeToReportCommentPushNotifications from '@libs/Notification/PushNotification/subscribeToReportCommentPushNotifications';
+import ONYXKEYS from '@src/ONYXKEYS';
import PushNotification from '..';
-import subscribeToReportCommentPushNotifications from '../subscribeToReportCommentPushNotifications';
-import ONYXKEYS from '../../../../ONYXKEYS';
/**
* Manage push notification subscriptions on sign-in/sign-out.
diff --git a/src/libs/Notification/PushNotification/subscribeToReportCommentPushNotifications.js b/src/libs/Notification/PushNotification/subscribeToReportCommentPushNotifications.js
index 269d00404a9d..04fd34bf6075 100644
--- a/src/libs/Notification/PushNotification/subscribeToReportCommentPushNotifications.js
+++ b/src/libs/Notification/PushNotification/subscribeToReportCommentPushNotifications.js
@@ -1,10 +1,10 @@
import Onyx from 'react-native-onyx';
-import PushNotification from './index';
-import ROUTES from '../../../ROUTES';
-import Log from '../../Log';
-import Navigation from '../../Navigation/Navigation';
-import Visibility from '../../Visibility';
+import Log from '@libs/Log';
+import Navigation from '@libs/Navigation/Navigation';
+import Visibility from '@libs/Visibility';
+import ROUTES from '@src/ROUTES';
import backgroundRefresh from './backgroundRefresh';
+import PushNotification from './index';
/**
* Setup reportComment push notification callbacks.
diff --git a/src/libs/NumberUtils.ts b/src/libs/NumberUtils.ts
index 6e8d0fa4362b..ddbd42243758 100644
--- a/src/libs/NumberUtils.ts
+++ b/src/libs/NumberUtils.ts
@@ -1,4 +1,4 @@
-import CONST from '../CONST';
+import CONST from '@src/CONST';
/**
* Generates a random positive 64 bit numeric string by randomly generating the left, middle, and right parts and concatenating them. Used to generate client-side ids.
diff --git a/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts b/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts
index 8819cc8aa47c..9fd89cfdf146 100644
--- a/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts
+++ b/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts
@@ -1,4 +1,4 @@
-import {OnyxKeyValue} from '../../ONYXKEYS';
+import {OnyxKeyValue} from '@src/ONYXKEYS';
export default function reportWithoutHasDraftSelector(report: OnyxKeyValue<'report_'>) {
if (!report) {
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 79c480711c4d..74382c8b9065 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -1,25 +1,25 @@
/* eslint-disable no-continue */
-import _ from 'underscore';
-import Onyx from 'react-native-onyx';
-import lodashOrderBy from 'lodash/orderBy';
+import {parsePhoneNumber} from 'awesome-phonenumber';
+import Str from 'expensify-common/lib/str';
import lodashGet from 'lodash/get';
+import lodashOrderBy from 'lodash/orderBy';
import lodashSet from 'lodash/set';
-import Str from 'expensify-common/lib/str';
-import {parsePhoneNumber} from 'awesome-phonenumber';
-import ONYXKEYS from '../ONYXKEYS';
-import CONST from '../CONST';
-import * as ReportUtils from './ReportUtils';
-import * as Localize from './Localize';
-import Permissions from './Permissions';
+import Onyx from 'react-native-onyx';
+import _ from 'underscore';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import * as CollectionUtils from './CollectionUtils';
-import Navigation from './Navigation/Navigation';
-import * as LoginUtils from './LoginUtils';
+import * as ErrorUtils from './ErrorUtils';
import * as LocalePhoneNumber from './LocalePhoneNumber';
-import * as UserUtils from './UserUtils';
-import * as ReportActionUtils from './ReportActionsUtils';
+import * as Localize from './Localize';
+import * as LoginUtils from './LoginUtils';
+import Navigation from './Navigation/Navigation';
+import Permissions from './Permissions';
import * as PersonalDetailsUtils from './PersonalDetailsUtils';
-import * as ErrorUtils from './ErrorUtils';
+import * as ReportActionUtils from './ReportActionsUtils';
+import * as ReportUtils from './ReportUtils';
import * as TransactionUtils from './TransactionUtils';
+import * as UserUtils from './UserUtils';
/**
* OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts
index 380f10589b3f..b37db2584394 100644
--- a/src/libs/PaymentUtils.ts
+++ b/src/libs/PaymentUtils.ts
@@ -1,10 +1,10 @@
-import BankAccountModel from './models/BankAccount';
-import getBankIcon from '../components/Icon/BankIcons';
-import CONST from '../CONST';
+import getBankIcon from '@components/Icon/BankIcons';
+import CONST from '@src/CONST';
+import BankAccount from '@src/types/onyx/BankAccount';
+import Fund from '@src/types/onyx/Fund';
+import PaymentMethod from '@src/types/onyx/PaymentMethod';
import * as Localize from './Localize';
-import Fund from '../types/onyx/Fund';
-import BankAccount from '../types/onyx/BankAccount';
-import PaymentMethod from '../types/onyx/PaymentMethod';
+import BankAccountModel from './models/BankAccount';
type AccountType = BankAccount['accountType'] | Fund['accountType'];
diff --git a/src/libs/Performance.tsx b/src/libs/Performance.tsx
index cfb5e258c9f8..45ae0f5cc5f0 100644
--- a/src/libs/Performance.tsx
+++ b/src/libs/Performance.tsx
@@ -1,15 +1,14 @@
-import React, {Profiler, forwardRef} from 'react';
-import {Alert, InteractionManager} from 'react-native';
-import lodashTransform from 'lodash/transform';
-import isObject from 'lodash/isObject';
import isEqual from 'lodash/isEqual';
-import {Performance as RNPerformance, PerformanceEntry, PerformanceMark, PerformanceMeasure} from 'react-native-performance';
+import isObject from 'lodash/isObject';
+import lodashTransform from 'lodash/transform';
+import React, {forwardRef, Profiler} from 'react';
+import {Alert, InteractionManager} from 'react-native';
+import {PerformanceEntry, PerformanceMark, PerformanceMeasure, Performance as RNPerformance} from 'react-native-performance';
import {PerformanceObserverEntryList} from 'react-native-performance/lib/typescript/performance-observer';
-
-import * as Metrics from './Metrics';
-import getComponentDisplayName from './getComponentDisplayName';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
import isE2ETestSession from './E2E/isE2ETestSession';
+import getComponentDisplayName from './getComponentDisplayName';
+import * as Metrics from './Metrics';
type WrappedComponentConfig = {id: string};
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 9703a4368abe..2eb1d3b02f25 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -1,5 +1,5 @@
-import CONST from '../CONST';
-import Beta from '../types/onyx/Beta';
+import CONST from '@src/CONST';
+import Beta from '@src/types/onyx/Beta';
function canUseAllBetas(betas: Beta[]): boolean {
return betas?.includes(CONST.BETAS.ALL);
diff --git a/src/libs/PersonalDetailsUtils.js b/src/libs/PersonalDetailsUtils.js
index ddb24d62ef26..e346dcde4fc4 100644
--- a/src/libs/PersonalDetailsUtils.js
+++ b/src/libs/PersonalDetailsUtils.js
@@ -1,10 +1,10 @@
import lodashGet from 'lodash/get';
import Onyx from 'react-native-onyx';
import _ from 'underscore';
-import ONYXKEYS from '../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
+import * as LocalePhoneNumber from './LocalePhoneNumber';
import * as Localize from './Localize';
import * as UserUtils from './UserUtils';
-import * as LocalePhoneNumber from './LocalePhoneNumber';
let personalDetails = [];
let allPersonalDetails = {};
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index e33af862f63d..62640a11311a 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -1,8 +1,8 @@
-import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import Str from 'expensify-common/lib/str';
-import CONST from '../CONST';
-import ONYXKEYS from '../ONYXKEYS';
-import {PersonalDetails, Policy, PolicyMembers, PolicyTags} from '../types/onyx';
+import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {PersonalDetails, Policy, PolicyMembers, PolicyTags} from '@src/types/onyx';
type MemberEmailsToAccountIDs = Record;
type PersonalDetailsList = Record;
diff --git a/src/libs/Pusher/pusher.ts b/src/libs/Pusher/pusher.ts
index dad963e933fe..dd8af08db229 100644
--- a/src/libs/Pusher/pusher.ts
+++ b/src/libs/Pusher/pusher.ts
@@ -1,15 +1,15 @@
-import Onyx from 'react-native-onyx';
-import {Channel, ChannelAuthorizerGenerator, Options} from 'pusher-js/with-encryption';
import isObject from 'lodash/isObject';
+import {Channel, ChannelAuthorizerGenerator, Options} from 'pusher-js/with-encryption';
+import Onyx from 'react-native-onyx';
import {LiteralUnion, ValueOf} from 'type-fest';
-import ONYXKEYS from '../../ONYXKEYS';
-import Pusher from './library';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {OnyxUpdateEvent, OnyxUpdatesFromServer} from '@src/types/onyx';
+import DeepValueOf from '@src/types/utils/DeepValueOf';
import TYPE from './EventType';
-import Log from '../Log';
-import DeepValueOf from '../../types/utils/DeepValueOf';
+import Pusher from './library';
import {SocketEventName} from './library/types';
-import CONST from '../../CONST';
-import {OnyxUpdateEvent, OnyxUpdatesFromServer} from '../../types/onyx';
type States = {
previous: string;
diff --git a/src/libs/PusherConnectionManager.ts b/src/libs/PusherConnectionManager.ts
index 9b1f6ebe1b2a..a0c5673af729 100644
--- a/src/libs/PusherConnectionManager.ts
+++ b/src/libs/PusherConnectionManager.ts
@@ -1,9 +1,9 @@
import {ChannelAuthorizationCallback} from 'pusher-js/with-encryption';
-import * as Pusher from './Pusher/pusher';
+import CONST from '@src/CONST';
import * as Session from './actions/Session';
import Log from './Log';
-import CONST from '../CONST';
import {SocketEventName} from './Pusher/library/types';
+import * as Pusher from './Pusher/pusher';
import {EventCallbackError, States} from './Pusher/pusher';
function init() {
diff --git a/src/libs/PusherUtils.ts b/src/libs/PusherUtils.ts
index d47283f21bbf..e5782d12acd3 100644
--- a/src/libs/PusherUtils.ts
+++ b/src/libs/PusherUtils.ts
@@ -1,9 +1,9 @@
import {OnyxUpdate} from 'react-native-onyx';
-import CONFIG from '../CONFIG';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
import Log from './Log';
import NetworkConnection from './NetworkConnection';
import * as Pusher from './Pusher/pusher';
-import CONST from '../CONST';
import {PushJSON} from './Pusher/pusher';
type Callback = (data: OnyxUpdate[]) => Promise;
diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts
index 13e8a195cccb..38b4823d54c6 100644
--- a/src/libs/ReceiptUtils.ts
+++ b/src/libs/ReceiptUtils.ts
@@ -1,13 +1,13 @@
import Str from 'expensify-common/lib/str';
import {ImageSourcePropType} from 'react-native';
+import ReceiptDoc from '@assets/images/receipt-doc.png';
+import ReceiptGeneric from '@assets/images/receipt-generic.png';
+import ReceiptHTML from '@assets/images/receipt-html.png';
+import ReceiptSVG from '@assets/images/receipt-svg.png';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import {Transaction} from '@src/types/onyx';
import * as FileUtils from './fileDownload/FileUtils';
-import CONST from '../CONST';
-import ReceiptHTML from '../../assets/images/receipt-html.png';
-import ReceiptDoc from '../../assets/images/receipt-doc.png';
-import ReceiptGeneric from '../../assets/images/receipt-generic.png';
-import ReceiptSVG from '../../assets/images/receipt-svg.png';
-import {Transaction} from '../types/onyx';
-import ROUTES from '../ROUTES';
type ThumbnailAndImageURI = {
image: ImageSourcePropType | string;
diff --git a/src/libs/ReportActionComposeFocusManager.ts b/src/libs/ReportActionComposeFocusManager.ts
index 65466fa4a204..9d4039117989 100644
--- a/src/libs/ReportActionComposeFocusManager.ts
+++ b/src/libs/ReportActionComposeFocusManager.ts
@@ -1,6 +1,6 @@
import React from 'react';
import {TextInput} from 'react-native';
-import ROUTES from '../ROUTES';
+import ROUTES from '@src/ROUTES';
import Navigation from './Navigation/Navigation';
type FocusCallback = () => void;
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 5d9b4fbdc9cf..11e11f549682 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -2,15 +2,15 @@ import _ from 'lodash';
import lodashFindLast from 'lodash/findLast';
import Onyx, {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
import {ValueOf} from 'type-fest';
-import CONST from '../CONST';
-import ONYXKEYS from '../ONYXKEYS';
-import ReportAction, {ReportActions} from '../types/onyx/ReportAction';
-import Report from '../types/onyx/Report';
-import {ActionName} from '../types/onyx/OriginalMessage';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {ActionName} from '@src/types/onyx/OriginalMessage';
+import Report from '@src/types/onyx/Report';
+import ReportAction, {ReportActions} from '@src/types/onyx/ReportAction';
import * as CollectionUtils from './CollectionUtils';
-import Log from './Log';
-import isReportMessageAttachment from './isReportMessageAttachment';
import * as Environment from './Environment/Environment';
+import isReportMessageAttachment from './isReportMessageAttachment';
+import Log from './Log';
type LastVisibleMessage = {
lastMessageTranslationKey?: string;
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index eb558e7ac066..0e9091fd6cb2 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1,27 +1,27 @@
/* eslint-disable rulesdir/prefer-underscore-method */
-import _ from 'underscore';
import {format} from 'date-fns';
+import ExpensiMark from 'expensify-common/lib/ExpensiMark';
import Str from 'expensify-common/lib/str';
import lodashGet from 'lodash/get';
import lodashIntersection from 'lodash/intersection';
import Onyx from 'react-native-onyx';
-import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import ONYXKEYS from '../ONYXKEYS';
-import CONST from '../CONST';
+import _ from 'underscore';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import * as CurrencyUtils from './CurrencyUtils';
+import DateUtils from './DateUtils';
+import isReportMessageAttachment from './isReportMessageAttachment';
import * as Localize from './Localize';
-import * as Expensicons from '../components/Icon/Expensicons';
+import linkingConfig from './Navigation/linkingConfig';
import Navigation from './Navigation/Navigation';
-import ROUTES from '../ROUTES';
import * as NumberUtils from './NumberUtils';
+import Permissions from './Permissions';
import * as ReportActionsUtils from './ReportActionsUtils';
import * as TransactionUtils from './TransactionUtils';
import * as Url from './Url';
-import Permissions from './Permissions';
-import DateUtils from './DateUtils';
-import linkingConfig from './Navigation/linkingConfig';
-import isReportMessageAttachment from './isReportMessageAttachment';
-import * as defaultWorkspaceAvatars from '../components/Icon/WorkspaceDefaultAvatars';
-import * as CurrencyUtils from './CurrencyUtils';
import * as UserUtils from './UserUtils';
let currentUserEmail;
@@ -783,6 +783,16 @@ function getReport(reportID) {
return lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {}) || {};
}
+/**
+ * Returns whether or not the author of the action is this user
+ *
+ * @param {Object} reportAction
+ * @returns {Boolean}
+ */
+function isActionCreator(reportAction) {
+ return reportAction.actorAccountID === currentUserAccountID;
+}
+
/**
* Can only delete if the author is this user and the action is an ADDCOMMENT action or an IOU action in an unsettled report, or if the user is a
* policy admin
@@ -4121,6 +4131,7 @@ export {
canEditReportAction,
canFlagReportAction,
shouldShowFlagComment,
+ isActionCreator,
canDeleteReportAction,
canLeaveRoom,
sortReportsByLastRead,
diff --git a/src/libs/Request.ts b/src/libs/Request.ts
index 9c4af4aa7e18..335731763ec9 100644
--- a/src/libs/Request.ts
+++ b/src/libs/Request.ts
@@ -1,9 +1,9 @@
+import Request from '@src/types/onyx/Request';
+import Response from '@src/types/onyx/Response';
import HttpUtils from './HttpUtils';
+import Middleware from './Middleware/types';
import enhanceParameters from './Network/enhanceParameters';
import * as NetworkStore from './Network/NetworkStore';
-import Request from '../types/onyx/Request';
-import Response from '../types/onyx/Response';
-import Middleware from './Middleware/types';
let middlewares: Middleware[] = [];
diff --git a/src/libs/RequestThrottle.ts b/src/libs/RequestThrottle.ts
index 00dca2ebf61e..36935982afbb 100644
--- a/src/libs/RequestThrottle.ts
+++ b/src/libs/RequestThrottle.ts
@@ -1,4 +1,4 @@
-import CONST from '../CONST';
+import CONST from '@src/CONST';
import {generateRandomInt} from './NumberUtils';
let requestWaitTime = 0;
diff --git a/src/libs/RoomNameInputUtils.ts b/src/libs/RoomNameInputUtils.ts
index 2777acee45dd..cff0bbc30274 100644
--- a/src/libs/RoomNameInputUtils.ts
+++ b/src/libs/RoomNameInputUtils.ts
@@ -1,4 +1,4 @@
-import CONST from '../CONST';
+import CONST from '@src/CONST';
/**
* Replaces spaces with dashes
diff --git a/src/libs/SelectionScraper/index.js b/src/libs/SelectionScraper/index.js
index 44b87deba796..02b3ff8bf61b 100644
--- a/src/libs/SelectionScraper/index.js
+++ b/src/libs/SelectionScraper/index.js
@@ -1,8 +1,8 @@
import render from 'dom-serializer';
+import Str from 'expensify-common/lib/str';
import {parseDocument} from 'htmlparser2';
import _ from 'underscore';
-import Str from 'expensify-common/lib/str';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
const elementsWillBeSkipped = ['html', 'body'];
const tagAttribute = 'data-testid';
diff --git a/src/libs/SessionUtils.ts b/src/libs/SessionUtils.ts
index fcbc9a887fa9..6cd20e0b56b2 100644
--- a/src/libs/SessionUtils.ts
+++ b/src/libs/SessionUtils.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Determine if the transitioning user is logging in as a new user.
diff --git a/src/libs/SidebarUtils.ts b/src/libs/SidebarUtils.ts
index bfe7d2281049..79d3280e859e 100644
--- a/src/libs/SidebarUtils.ts
+++ b/src/libs/SidebarUtils.ts
@@ -1,23 +1,23 @@
/* eslint-disable rulesdir/prefer-underscore-method */
-import Onyx from 'react-native-onyx';
import Str from 'expensify-common/lib/str';
+import Onyx from 'react-native-onyx';
import {ValueOf} from 'type-fest';
-import ONYXKEYS from '../ONYXKEYS';
-import * as ReportUtils from './ReportUtils';
-import * as ReportActionsUtils from './ReportActionsUtils';
-import * as Localize from './Localize';
-import CONST from '../CONST';
-import * as OptionsListUtils from './OptionsListUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {PersonalDetails} from '@src/types/onyx';
+import Beta from '@src/types/onyx/Beta';
+import * as OnyxCommon from '@src/types/onyx/OnyxCommon';
+import Policy from '@src/types/onyx/Policy';
+import Report from '@src/types/onyx/Report';
+import ReportAction, {ReportActions} from '@src/types/onyx/ReportAction';
import * as CollectionUtils from './CollectionUtils';
import * as LocalePhoneNumber from './LocalePhoneNumber';
-import * as UserUtils from './UserUtils';
+import * as Localize from './Localize';
+import * as OptionsListUtils from './OptionsListUtils';
import * as PersonalDetailsUtils from './PersonalDetailsUtils';
-import ReportAction, {ReportActions} from '../types/onyx/ReportAction';
-import Beta from '../types/onyx/Beta';
-import Policy from '../types/onyx/Policy';
-import Report from '../types/onyx/Report';
-import {PersonalDetails} from '../types/onyx';
-import * as OnyxCommon from '../types/onyx/OnyxCommon';
+import * as ReportActionsUtils from './ReportActionsUtils';
+import * as ReportUtils from './ReportUtils';
+import * as UserUtils from './UserUtils';
const visibleReportActionItems: ReportActions = {};
const lastReportActions: ReportActions = {};
diff --git a/src/libs/StartupTimer/index.ts b/src/libs/StartupTimer/index.ts
index 421524a70fc8..1cc656b329f4 100644
--- a/src/libs/StartupTimer/index.ts
+++ b/src/libs/StartupTimer/index.ts
@@ -1,7 +1,6 @@
/**
* Web noop as there is no "startup" to time from the native layer.
*/
-
import StartupTimer from './types';
const startupTimer: StartupTimer = {
diff --git a/src/libs/StringUtils.ts b/src/libs/StringUtils.ts
index 8ef23bb0751b..290380ce2cff 100644
--- a/src/libs/StringUtils.ts
+++ b/src/libs/StringUtils.ts
@@ -1,5 +1,5 @@
import _ from 'lodash';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
/**
* Removes diacritical marks and non-alphabetic and non-latin characters from a string.
diff --git a/src/libs/SuggestionUtils.js b/src/libs/SuggestionUtils.js
index 9c3e92799334..45641ebb5a0f 100644
--- a/src/libs/SuggestionUtils.js
+++ b/src/libs/SuggestionUtils.js
@@ -1,4 +1,4 @@
-import CONST from '../CONST';
+import CONST from '@src/CONST';
/**
* Return the max available index for arrow manager.
diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts
index abd646fc19f1..a30ba7fc2723 100644
--- a/src/libs/TransactionUtils.ts
+++ b/src/libs/TransactionUtils.ts
@@ -1,12 +1,12 @@
-import Onyx, {OnyxCollection} from 'react-native-onyx';
import {format, isValid} from 'date-fns';
-import CONST from '../CONST';
-import ONYXKEYS from '../ONYXKEYS';
-import DateUtils from './DateUtils';
+import Onyx, {OnyxCollection} from 'react-native-onyx';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {RecentWaypoint, ReportAction, Transaction} from '@src/types/onyx';
+import {Comment, Receipt, Waypoint, WaypointCollection} from '@src/types/onyx/Transaction';
import {isExpensifyCard} from './CardUtils';
+import DateUtils from './DateUtils';
import * as NumberUtils from './NumberUtils';
-import {RecentWaypoint, ReportAction, Transaction} from '../types/onyx';
-import {Receipt, Comment, WaypointCollection, Waypoint} from '../types/onyx/Transaction';
type AdditionalTransactionChanges = {comment?: string; waypoints?: WaypointCollection};
diff --git a/src/libs/UnreadIndicatorUpdater/index.js b/src/libs/UnreadIndicatorUpdater/index.js
index 9acf1a17bbc6..9af74f8313c3 100644
--- a/src/libs/UnreadIndicatorUpdater/index.js
+++ b/src/libs/UnreadIndicatorUpdater/index.js
@@ -1,9 +1,9 @@
-import _ from 'underscore';
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import _ from 'underscore';
+import * as ReportUtils from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import updateUnread from './updateUnread/index';
-import * as ReportUtils from '../ReportUtils';
-import CONST from '../../CONST';
Onyx.connect({
key: ONYXKEYS.COLLECTION.REPORT,
diff --git a/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js b/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js
index 4c829239ef14..56aa7f02509d 100644
--- a/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js
+++ b/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js
@@ -1,7 +1,7 @@
/**
* Web browsers have a tab title and favicon which can be updated to show there are unread comments
*/
-import CONFIG from '../../../CONFIG';
+import CONFIG from '@src/CONFIG';
let unreadTotalCount = 0;
/**
diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts
index 15bf3c0f1029..f7883609f625 100644
--- a/src/libs/UserUtils.ts
+++ b/src/libs/UserUtils.ts
@@ -1,10 +1,10 @@
import {SvgProps} from 'react-native-svg';
import {ValueOf} from 'type-fest';
-import CONST from '../CONST';
+import * as defaultAvatars from '@components/Icon/DefaultAvatars';
+import {ConciergeAvatar, FallbackAvatar} from '@components/Icon/Expensicons';
+import CONST from '@src/CONST';
+import Login from '@src/types/onyx/Login';
import hashCode from './hashCode';
-import {ConciergeAvatar, FallbackAvatar} from '../components/Icon/Expensicons';
-import * as defaultAvatars from '../components/Icon/DefaultAvatars';
-import Login from '../types/onyx/Login';
type AvatarRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
diff --git a/src/libs/ValidationUtils.ts b/src/libs/ValidationUtils.ts
index b94c240b6e92..5947d45a6f76 100644
--- a/src/libs/ValidationUtils.ts
+++ b/src/libs/ValidationUtils.ts
@@ -1,14 +1,14 @@
-import {subYears, addYears, startOfDay, endOfMonth, parse, isAfter, isBefore, isValid, isWithinInterval, isSameDay, format} from 'date-fns';
-import {URL_REGEX_WITH_REQUIRED_PROTOCOL} from 'expensify-common/lib/Url';
import {parsePhoneNumber} from 'awesome-phonenumber';
+import {addYears, endOfMonth, format, isAfter, isBefore, isSameDay, isValid, isWithinInterval, parse, startOfDay, subYears} from 'date-fns';
+import {URL_REGEX_WITH_REQUIRED_PROTOCOL} from 'expensify-common/lib/Url';
import isDate from 'lodash/isDate';
import isEmpty from 'lodash/isEmpty';
import isObject from 'lodash/isObject';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
+import {Report} from '@src/types/onyx';
+import * as OnyxCommon from '@src/types/onyx/OnyxCommon';
import * as CardUtils from './CardUtils';
import * as LoginUtils from './LoginUtils';
-import {Report} from '../types/onyx';
-import * as OnyxCommon from '../types/onyx/OnyxCommon';
/**
* Implements the Luhn Algorithm, a checksum formula used to validate credit card
diff --git a/src/libs/Visibility/index.native.ts b/src/libs/Visibility/index.native.ts
index 695df3651da7..42bd56531207 100644
--- a/src/libs/Visibility/index.native.ts
+++ b/src/libs/Visibility/index.native.ts
@@ -1,6 +1,5 @@
// Mobile apps do not require this check for visibility as
// they do not use the Notification lib.
-
import {AppState} from 'react-native';
import {HasFocus, IsVisible, OnVisibilityChange} from './types';
diff --git a/src/libs/__mocks__/Permissions.ts b/src/libs/__mocks__/Permissions.ts
index 66ef64bbb994..e95d13f52803 100644
--- a/src/libs/__mocks__/Permissions.ts
+++ b/src/libs/__mocks__/Permissions.ts
@@ -1,5 +1,5 @@
-import CONST from '../../CONST';
-import Beta from '../../types/onyx/Beta';
+import CONST from '@src/CONST';
+import Beta from '@src/types/onyx/Beta';
/**
* This module is mocked in tests because all the permission methods call canUseAllBetas() and that will
diff --git a/src/libs/actions/ActiveClients.ts b/src/libs/actions/ActiveClients.ts
index 45fcff402f49..e59fdc14410e 100644
--- a/src/libs/actions/ActiveClients.ts
+++ b/src/libs/actions/ActiveClients.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
function setActiveClients(activeClients: string[]): Promise {
return Onyx.set(ONYXKEYS.ACTIVE_CLIENTS, activeClients);
diff --git a/src/libs/actions/App.js b/src/libs/actions/App.js
index 75520d483f98..7ffac85650f3 100644
--- a/src/libs/actions/App.js
+++ b/src/libs/actions/App.js
@@ -1,25 +1,25 @@
// Do not remove this import until moment package is fully removed.
// Issue - https://github.com/Expensify/App/issues/26719
+import Str from 'expensify-common/lib/str';
+import lodashGet from 'lodash/get';
import 'moment/locale/es';
import {AppState} from 'react-native';
import Onyx from 'react-native-onyx';
-import lodashGet from 'lodash/get';
-import Str from 'expensify-common/lib/str';
import _ from 'underscore';
-import * as API from '../API';
-import ONYXKEYS from '../../ONYXKEYS';
-import CONST from '../../CONST';
-import Log from '../Log';
-import Performance from '../Performance';
+import * as API from '@libs/API';
+import * as Browser from '@libs/Browser';
+import Log from '@libs/Log';
+import getCurrentUrl from '@libs/Navigation/currentUrl';
+import Navigation from '@libs/Navigation/Navigation';
+import Performance from '@libs/Performance';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as SessionUtils from '@libs/SessionUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import * as Policy from './Policy';
-import Navigation from '../Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import * as SessionUtils from '../SessionUtils';
-import getCurrentUrl from '../Navigation/currentUrl';
import * as Session from './Session';
-import * as ReportActionsUtils from '../ReportActionsUtils';
import Timing from './Timing';
-import * as Browser from '../Browser';
let currentUserAccountID;
let currentUserEmail;
diff --git a/src/libs/actions/AppUpdate.ts b/src/libs/actions/AppUpdate.ts
index f0e3c1c3da20..29ee2a4547ab 100644
--- a/src/libs/actions/AppUpdate.ts
+++ b/src/libs/actions/AppUpdate.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
function triggerUpdateAvailable() {
Onyx.set(ONYXKEYS.UPDATE_AVAILABLE, true);
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
index cc755f10dfc6..8d0c59ab8d60 100644
--- a/src/libs/actions/BankAccounts.ts
+++ b/src/libs/actions/BankAccounts.ts
@@ -1,16 +1,16 @@
import Onyx from 'react-native-onyx';
-import CONST from '../../CONST';
-import * as API from '../API';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as ErrorUtils from '../ErrorUtils';
-import * as PlaidDataProps from '../../pages/ReimbursementAccount/plaidDataPropTypes';
-import Navigation from '../Navigation/Navigation';
-import ROUTES from '../../ROUTES';
+import * as API from '@libs/API';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as PlaidDataProps from '@pages/ReimbursementAccount/plaidDataPropTypes';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type PlaidBankAccount from '@src/types/onyx/PlaidBankAccount';
+import type {BankAccountStep, BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount';
+import type {ACHContractStepProps, BankAccountStepProps, CompanyStepProps, OnfidoData, ReimbursementAccountProps, RequestorStepProps} from '@src/types/onyx/ReimbursementAccountDraft';
+import type {OnyxData} from '@src/types/onyx/Request';
import * as ReimbursementAccount from './ReimbursementAccount';
-import type PlaidBankAccount from '../../types/onyx/PlaidBankAccount';
-import type {ACHContractStepProps, BankAccountStepProps, CompanyStepProps, OnfidoData, ReimbursementAccountProps, RequestorStepProps} from '../../types/onyx/ReimbursementAccountDraft';
-import type {OnyxData} from '../../types/onyx/Request';
-import type {BankAccountStep, BankAccountSubStep} from '../../types/onyx/ReimbursementAccount';
export {
goToWithdrawalAccountSetupStep,
@@ -35,7 +35,7 @@ type ReimbursementAccountSubStep = BankAccountSubStep | '';
function clearPlaid(): Promise {
Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, '');
-
+ Onyx.set(ONYXKEYS.PLAID_CURRENT_EVENT, null);
return Onyx.set(ONYXKEYS.PLAID_DATA, PlaidDataProps.plaidDataDefaultProps);
}
@@ -43,6 +43,10 @@ function openPlaidView() {
clearPlaid().then(() => ReimbursementAccount.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID));
}
+function setPlaidEvent(eventName: string) {
+ Onyx.set(ONYXKEYS.PLAID_CURRENT_EVENT, eventName);
+}
+
/**
* Open the personal bank account setup flow, with an optional exitReportID to redirect to once the flow is finished.
*/
@@ -433,6 +437,7 @@ export {
clearOnfidoToken,
clearPersonalBankAccount,
clearPlaid,
+ setPlaidEvent,
openPlaidView,
connectBankAccountManually,
connectBankAccountWithPlaid,
diff --git a/src/libs/actions/CanvasSize.js b/src/libs/actions/CanvasSize.js
index 0c4cd88fea70..b313763131b9 100644
--- a/src/libs/actions/CanvasSize.js
+++ b/src/libs/actions/CanvasSize.js
@@ -1,7 +1,7 @@
-import Onyx from 'react-native-onyx';
import canvasSize from 'canvas-size';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as Browser from '../Browser';
+import Onyx from 'react-native-onyx';
+import * as Browser from '@libs/Browser';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Calculate the max area of canvas on this specific platform and save it in onyx
diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js
index 97c902876a3a..126608cf1b47 100644
--- a/src/libs/actions/Card.js
+++ b/src/libs/actions/Card.js
@@ -1,7 +1,8 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as API from '../API';
-import CONST from '../../CONST';
+import * as API from '@libs/API';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
/**
* @param {Number} cardID
*/
diff --git a/src/libs/actions/Chronos.ts b/src/libs/actions/Chronos.ts
index ce821e524722..76308f225fe4 100644
--- a/src/libs/actions/Chronos.ts
+++ b/src/libs/actions/Chronos.ts
@@ -1,8 +1,8 @@
import Onyx, {OnyxUpdate} from 'react-native-onyx';
-import CONST from '../../CONST';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as API from '../API';
-import {ChronosOOOEvent} from '../../types/onyx/OriginalMessage';
+import * as API from '@libs/API';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {ChronosOOOEvent} from '@src/types/onyx/OriginalMessage';
const removeEvent = (reportID: string, reportActionID: string, eventID: string, events: ChronosOOOEvent[]) => {
const optimisticData: OnyxUpdate[] = [
diff --git a/src/libs/actions/CloseAccount.ts b/src/libs/actions/CloseAccount.ts
index 8a8f395277e1..01b115a23518 100644
--- a/src/libs/actions/CloseAccount.ts
+++ b/src/libs/actions/CloseAccount.ts
@@ -1,6 +1,6 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Clear CloseAccount error message to hide modal
diff --git a/src/libs/actions/Composer.ts b/src/libs/actions/Composer.ts
index d3f9ef9814a5..edd42fb801f2 100644
--- a/src/libs/actions/Composer.ts
+++ b/src/libs/actions/Composer.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
function setShouldShowComposeInput(shouldShowComposeInput: boolean) {
Onyx.set(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, shouldShowComposeInput);
diff --git a/src/libs/actions/CurrentDate.ts b/src/libs/actions/CurrentDate.ts
index b19a3430e96f..4a382156012b 100644
--- a/src/libs/actions/CurrentDate.ts
+++ b/src/libs/actions/CurrentDate.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
function setCurrentDate(currentDate: string) {
Onyx.set(ONYXKEYS.CURRENT_DATE, currentDate);
diff --git a/src/libs/actions/DemoActions.js b/src/libs/actions/DemoActions.js
index e7ce02d2796b..245e475e7ca9 100644
--- a/src/libs/actions/DemoActions.js
+++ b/src/libs/actions/DemoActions.js
@@ -1,11 +1,11 @@
+import lodashGet from 'lodash/get';
import Config from 'react-native-config';
import Onyx from 'react-native-onyx';
-import lodashGet from 'lodash/get';
-import * as API from '../API';
-import * as ReportUtils from '../ReportUtils';
-import Navigation from '../Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import ONYXKEYS from '../../ONYXKEYS';
+import * as API from '@libs/API';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
let currentUserEmail;
Onyx.connect({
diff --git a/src/libs/actions/Device/generateDeviceID/index.android.js b/src/libs/actions/Device/generateDeviceID/index.android.js
index f61b860bda7d..41fc946839b7 100644
--- a/src/libs/actions/Device/generateDeviceID/index.android.js
+++ b/src/libs/actions/Device/generateDeviceID/index.android.js
@@ -1,5 +1,5 @@
-import DeviceInfo from 'react-native-device-info';
import Str from 'expensify-common/lib/str';
+import DeviceInfo from 'react-native-device-info';
const deviceID = DeviceInfo.getDeviceId();
const uniqueID = Str.guid(deviceID);
diff --git a/src/libs/actions/Device/index.js b/src/libs/actions/Device/index.js
index 8f548b75bd93..8394bf226b12 100644
--- a/src/libs/actions/Device/index.js
+++ b/src/libs/actions/Device/index.js
@@ -1,6 +1,6 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
-import Log from '../../Log';
+import Log from '@libs/Log';
+import ONYXKEYS from '@src/ONYXKEYS';
import generateDeviceID from './generateDeviceID';
import getDeviceInfo from './getDeviceInfo';
diff --git a/src/libs/actions/Download.ts b/src/libs/actions/Download.ts
index 06b97d735d39..6eb3b1f05b4b 100644
--- a/src/libs/actions/Download.ts
+++ b/src/libs/actions/Download.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Set whether an attachment is being downloaded so that a spinner can be shown.
diff --git a/src/libs/actions/EmojiPickerAction.ts b/src/libs/actions/EmojiPickerAction.ts
index edf82eb46da3..07b00a508dad 100644
--- a/src/libs/actions/EmojiPickerAction.ts
+++ b/src/libs/actions/EmojiPickerAction.ts
@@ -1,7 +1,7 @@
-import {ValueOf} from 'type-fest';
import React from 'react';
import {View} from 'react-native';
-import CONST from '../../CONST';
+import {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
type AnchorOrigin = {
horizontal: ValueOf;
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 714ea7b9aa9f..77ab246506ce 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -1,29 +1,29 @@
-import Onyx from 'react-native-onyx';
-import _ from 'underscore';
+import {format} from 'date-fns';
+import Str from 'expensify-common/lib/str';
import lodashGet from 'lodash/get';
import lodashHas from 'lodash/has';
-import Str from 'expensify-common/lib/str';
-import {format} from 'date-fns';
-import CONST from '../../CONST';
-import ROUTES from '../../ROUTES';
-import ONYXKEYS from '../../ONYXKEYS';
-import Navigation from '../Navigation/Navigation';
-import * as Localize from '../Localize';
-import * as API from '../API';
-import * as ReportUtils from '../ReportUtils';
-import * as CurrencyUtils from '../CurrencyUtils';
-import * as ReportActionsUtils from '../ReportActionsUtils';
-import * as IOUUtils from '../IOUUtils';
-import * as OptionsListUtils from '../OptionsListUtils';
-import DateUtils from '../DateUtils';
-import * as TransactionUtils from '../TransactionUtils';
-import * as ErrorUtils from '../ErrorUtils';
-import * as UserUtils from '../UserUtils';
-import * as Report from './Report';
-import * as NumberUtils from '../NumberUtils';
-import ReceiptGeneric from '../../../assets/images/receipt-generic.png';
-import * as LocalePhoneNumber from '../LocalePhoneNumber';
+import Onyx from 'react-native-onyx';
+import _ from 'underscore';
+import ReceiptGeneric from '@assets/images/receipt-generic.png';
+import * as API from '@libs/API';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import DateUtils from '@libs/DateUtils';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import * as IOUUtils from '@libs/IOUUtils';
+import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
+import * as Localize from '@libs/Localize';
+import Navigation from '@libs/Navigation/Navigation';
+import * as NumberUtils from '@libs/NumberUtils';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import * as UserUtils from '@libs/UserUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import * as Policy from './Policy';
+import * as Report from './Report';
let allPersonalDetails;
Onyx.connect({
@@ -137,6 +137,7 @@ function resetMoneyRequestInfo(id = '') {
receiptFilename: '',
transactionID: '',
billable: null,
+ isSplitRequest: false,
});
}
@@ -2863,9 +2864,10 @@ function setMoneyRequestBillable(billable) {
/**
* @param {Object[]} participants
+ * @param {Boolean} isSplitRequest
*/
-function setMoneyRequestParticipants(participants) {
- Onyx.merge(ONYXKEYS.IOU, {participants});
+function setMoneyRequestParticipants(participants, isSplitRequest) {
+ Onyx.merge(ONYXKEYS.IOU, {participants, isSplitRequest});
}
/**
diff --git a/src/libs/actions/InputFocus/index.desktop.ts b/src/libs/actions/InputFocus/index.desktop.ts
index b6cf1aba6138..86a562f0531e 100644
--- a/src/libs/actions/InputFocus/index.desktop.ts
+++ b/src/libs/actions/InputFocus/index.desktop.ts
@@ -1,6 +1,6 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
-import ReportActionComposeFocusManager from '../../ReportActionComposeFocusManager';
+import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
+import ONYXKEYS from '@src/ONYXKEYS';
function inputFocusChange(focus: boolean) {
Onyx.set(ONYXKEYS.INPUT_FOCUSED, focus);
diff --git a/src/libs/actions/InputFocus/index.website.ts b/src/libs/actions/InputFocus/index.website.ts
index 7c044b169a03..8e41e06d7401 100644
--- a/src/libs/actions/InputFocus/index.website.ts
+++ b/src/libs/actions/InputFocus/index.website.ts
@@ -1,7 +1,7 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
-import * as Browser from '../../Browser';
-import ReportActionComposeFocusManager from '../../ReportActionComposeFocusManager';
+import * as Browser from '@libs/Browser';
+import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
+import ONYXKEYS from '@src/ONYXKEYS';
function inputFocusChange(focus: boolean) {
Onyx.set(ONYXKEYS.INPUT_FOCUSED, focus);
diff --git a/src/libs/actions/Link.js b/src/libs/actions/Link.js
index 06705182a626..0a50bb62ddc8 100644
--- a/src/libs/actions/Link.js
+++ b/src/libs/actions/Link.js
@@ -1,11 +1,11 @@
-import Onyx from 'react-native-onyx';
import lodashGet from 'lodash/get';
+import Onyx from 'react-native-onyx';
import _ from 'underscore';
-import ONYXKEYS from '../../ONYXKEYS';
-import asyncOpenURL from '../asyncOpenURL';
-import * as API from '../API';
-import * as Environment from '../Environment/Environment';
-import * as Url from '../Url';
+import * as API from '@libs/API';
+import asyncOpenURL from '@libs/asyncOpenURL';
+import * as Environment from '@libs/Environment/Environment';
+import * as Url from '@libs/Url';
+import ONYXKEYS from '@src/ONYXKEYS';
let isNetworkOffline = false;
Onyx.connect({
diff --git a/src/libs/actions/MapboxToken.ts b/src/libs/actions/MapboxToken.ts
index f795adf0df2b..4596e82a9354 100644
--- a/src/libs/actions/MapboxToken.ts
+++ b/src/libs/actions/MapboxToken.ts
@@ -1,11 +1,11 @@
import {isAfter} from 'date-fns';
-import Onyx from 'react-native-onyx';
import {AppState, NativeEventSubscription} from 'react-native';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as API from '../API';
-import CONST from '../../CONST';
-import * as ActiveClientManager from '../ActiveClientManager';
-import {MapboxAccessToken, Network} from '../../types/onyx';
+import Onyx from 'react-native-onyx';
+import * as ActiveClientManager from '@libs/ActiveClientManager';
+import * as API from '@libs/API';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {MapboxAccessToken, Network} from '@src/types/onyx';
let authToken: string | null;
Onyx.connect({
diff --git a/src/libs/actions/MemoryOnlyKeys/MemoryOnlyKeys.js b/src/libs/actions/MemoryOnlyKeys/MemoryOnlyKeys.js
index d46222189804..028bce225909 100644
--- a/src/libs/actions/MemoryOnlyKeys/MemoryOnlyKeys.js
+++ b/src/libs/actions/MemoryOnlyKeys/MemoryOnlyKeys.js
@@ -1,6 +1,6 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
-import Log from '../../Log';
+import Log from '@libs/Log';
+import ONYXKEYS from '@src/ONYXKEYS';
const memoryOnlyKeys = [ONYXKEYS.COLLECTION.REPORT, ONYXKEYS.COLLECTION.POLICY, ONYXKEYS.PERSONAL_DETAILS_LIST];
diff --git a/src/libs/actions/MemoryOnlyKeys/exposeGlobalMemoryOnlyKeysMethods/index.js b/src/libs/actions/MemoryOnlyKeys/exposeGlobalMemoryOnlyKeysMethods/index.js
index fa62268753db..1d039c8980a9 100644
--- a/src/libs/actions/MemoryOnlyKeys/exposeGlobalMemoryOnlyKeysMethods/index.js
+++ b/src/libs/actions/MemoryOnlyKeys/exposeGlobalMemoryOnlyKeysMethods/index.js
@@ -1,4 +1,4 @@
-import * as MemoryOnlyKeys from '../MemoryOnlyKeys';
+import * as MemoryOnlyKeys from '@userActions/MemoryOnlyKeys/MemoryOnlyKeys';
const exposeGlobalMemoryOnlyKeysMethods = () => {
window.enableMemoryOnlyKeys = () => {
diff --git a/src/libs/actions/Modal.ts b/src/libs/actions/Modal.ts
index ff09731f59a7..5114d5c1f42f 100644
--- a/src/libs/actions/Modal.ts
+++ b/src/libs/actions/Modal.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
let closeModal: (isNavigating: boolean) => void;
let onModalClose: null | (() => void);
diff --git a/src/libs/actions/Network.ts b/src/libs/actions/Network.ts
index 212e44f6782d..17580c214376 100644
--- a/src/libs/actions/Network.ts
+++ b/src/libs/actions/Network.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
function setIsOffline(isOffline: boolean) {
Onyx.merge(ONYXKEYS.NETWORK, {isOffline});
diff --git a/src/libs/actions/OnyxUpdateManager.js b/src/libs/actions/OnyxUpdateManager.js
index b6318b784439..21cea452295b 100644
--- a/src/libs/actions/OnyxUpdateManager.js
+++ b/src/libs/actions/OnyxUpdateManager.js
@@ -1,11 +1,11 @@
import Onyx from 'react-native-onyx';
import _ from 'underscore';
-import ONYXKEYS from '../../ONYXKEYS';
-import Log from '../Log';
-import * as SequentialQueue from '../Network/SequentialQueue';
+import Log from '@libs/Log';
+import * as SequentialQueue from '@libs/Network/SequentialQueue';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import * as App from './App';
import * as OnyxUpdates from './OnyxUpdates';
-import CONST from '../../CONST';
// This file is in charge of looking at the updateIDs coming from the server and comparing them to the last updateID that the client has.
// If the client is behind the server, then we need to
diff --git a/src/libs/actions/OnyxUpdates.ts b/src/libs/actions/OnyxUpdates.ts
index 39a20ae9362a..b44b485ac60f 100644
--- a/src/libs/actions/OnyxUpdates.ts
+++ b/src/libs/actions/OnyxUpdates.ts
@@ -1,11 +1,11 @@
import Onyx, {OnyxEntry} from 'react-native-onyx';
import {Merge} from 'type-fest';
-import PusherUtils from '../PusherUtils';
-import ONYXKEYS from '../../ONYXKEYS';
+import PusherUtils from '@libs/PusherUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {OnyxUpdateEvent, OnyxUpdatesFromServer, Request} from '@src/types/onyx';
+import Response from '@src/types/onyx/Response';
import * as QueuedOnyxUpdates from './QueuedOnyxUpdates';
-import CONST from '../../CONST';
-import {OnyxUpdatesFromServer, OnyxUpdateEvent, Request} from '../../types/onyx';
-import Response from '../../types/onyx/Response';
// This key needs to be separate from ONYXKEYS.ONYX_UPDATES_FROM_SERVER so that it can be updated without triggering the callback when the server IDs are updated. If that
// callback were triggered it would lead to duplicate processing of server updates.
diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts
index fe1b5ebe10e9..dc5b7b83aa8e 100644
--- a/src/libs/actions/PaymentMethods.ts
+++ b/src/libs/actions/PaymentMethods.ts
@@ -1,14 +1,14 @@
import {createRef} from 'react';
import Onyx, {OnyxUpdate} from 'react-native-onyx';
import {ValueOf} from 'type-fest';
-import ONYXKEYS, {OnyxValues} from '../../ONYXKEYS';
-import * as API from '../API';
-import CONST from '../../CONST';
-import Navigation from '../Navigation/Navigation';
-import * as CardUtils from '../CardUtils';
-import ROUTES from '../../ROUTES';
-import {FilterMethodPaymentType} from '../../types/onyx/WalletTransfer';
-import PaymentMethod from '../../types/onyx/PaymentMethod';
+import * as API from '@libs/API';
+import * as CardUtils from '@libs/CardUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import ONYXKEYS, {OnyxValues} from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import PaymentMethod from '@src/types/onyx/PaymentMethod';
+import {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer';
type KYCWallRef = {
continue?: () => void;
diff --git a/src/libs/actions/PersistedRequests.ts b/src/libs/actions/PersistedRequests.ts
index d9f4ed020109..c35de9ee94c4 100644
--- a/src/libs/actions/PersistedRequests.ts
+++ b/src/libs/actions/PersistedRequests.ts
@@ -1,7 +1,7 @@
-import Onyx from 'react-native-onyx';
import isEqual from 'lodash/isEqual';
-import ONYXKEYS from '../../ONYXKEYS';
-import {Request} from '../../types/onyx';
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {Request} from '@src/types/onyx';
let persistedRequests: Request[] = [];
diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js
index 69cf05b89b34..351943ca1f29 100644
--- a/src/libs/actions/PersonalDetails.js
+++ b/src/libs/actions/PersonalDetails.js
@@ -1,14 +1,14 @@
+import Str from 'expensify-common/lib/str';
import lodashGet from 'lodash/get';
import Onyx from 'react-native-onyx';
-import Str from 'expensify-common/lib/str';
import _ from 'underscore';
-import ONYXKEYS from '../../ONYXKEYS';
-import CONST from '../../CONST';
-import * as API from '../API';
-import * as UserUtils from '../UserUtils';
-import * as LocalePhoneNumber from '../LocalePhoneNumber';
-import ROUTES from '../../ROUTES';
-import Navigation from '../Navigation/Navigation';
+import * as API from '@libs/API';
+import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
+import Navigation from '@libs/Navigation/Navigation';
+import * as UserUtils from '@libs/UserUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
let currentUserEmail = '';
let currentUserAccountID;
diff --git a/src/libs/actions/Plaid.ts b/src/libs/actions/Plaid.ts
index 410a8c57d176..ab828eefeece 100644
--- a/src/libs/actions/Plaid.ts
+++ b/src/libs/actions/Plaid.ts
@@ -1,8 +1,8 @@
import Onyx from 'react-native-onyx';
-import getPlaidLinkTokenParameters from '../getPlaidLinkTokenParameters';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as API from '../API';
-import * as PlaidDataProps from '../../pages/ReimbursementAccount/plaidDataPropTypes';
+import * as API from '@libs/API';
+import getPlaidLinkTokenParameters from '@libs/getPlaidLinkTokenParameters';
+import * as PlaidDataProps from '@pages/ReimbursementAccount/plaidDataPropTypes';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Gets the Plaid Link token used to initialize the Plaid SDK
diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
index 0e063d3e0c48..67352526baad 100644
--- a/src/libs/actions/Policy.js
+++ b/src/libs/actions/Policy.js
@@ -1,19 +1,19 @@
-import _ from 'underscore';
-import Onyx from 'react-native-onyx';
-import lodashGet from 'lodash/get';
-import lodashUnion from 'lodash/union';
import {PUBLIC_DOMAINS} from 'expensify-common/lib/CONST';
import Str from 'expensify-common/lib/str';
import {escapeRegExp} from 'lodash';
-import * as API from '../API';
-import ONYXKEYS from '../../ONYXKEYS';
-import CONST from '../../CONST';
-import * as NumberUtils from '../NumberUtils';
-import * as OptionsListUtils from '../OptionsListUtils';
-import * as ErrorUtils from '../ErrorUtils';
-import * as ReportUtils from '../ReportUtils';
-import * as PersonalDetailsUtils from '../PersonalDetailsUtils';
-import Log from '../Log';
+import lodashGet from 'lodash/get';
+import lodashUnion from 'lodash/union';
+import Onyx from 'react-native-onyx';
+import _ from 'underscore';
+import * as API from '@libs/API';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import Log from '@libs/Log';
+import * as NumberUtils from '@libs/NumberUtils';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
const allPolicies = {};
Onyx.connect({
@@ -45,6 +45,13 @@ Onyx.connect({
},
});
+let allPolicyMembers;
+Onyx.connect({
+ key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
+ waitForCollectionCallback: true,
+ callback: (val) => (allPolicyMembers = val),
+});
+
let lastAccessedWorkspacePolicyID = null;
Onyx.connect({
key: ONYXKEYS.LAST_ACCESSED_WORKSPACE_POLICY_ID,
@@ -169,7 +176,7 @@ function deleteWorkspace(policyID, reports, policyName) {
/**
* Is the user an admin of a free policy (aka workspace)?
*
- * @param {Array} policies
+ * @param {Record} [policies]
* @returns {Boolean}
*/
function isAdminOfFreePolicy(policies) {
@@ -249,6 +256,27 @@ function removeMembers(accountIDs, policyID) {
})),
];
+ // If the policy has primaryLoginsInvited, then it displays informative messages on the members page about which primary logins were added by secondary logins.
+ // If we delete all these logins then we should clear the informative messages since they are no longer relevant.
+ if (!_.isEmpty(policy.primaryLoginsInvited)) {
+ // Take the current policy members and remove them optimistically
+ const policyMemberAccountIDs = _.map(allPolicyMembers[`${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`], (value, key) => Number(key));
+ const remainingMemberAccountIDs = _.difference(policyMemberAccountIDs, accountIDs);
+ const remainingLogins = PersonalDetailsUtils.getLoginsByAccountIDs(remainingMemberAccountIDs);
+ const invitedPrimaryToSecondaryLogins = _.invert(policy.primaryLoginsInvited);
+
+ // Then, if no remaining members exist that were invited by a secondary login, clear the informative messages
+ if (!_.some(remainingLogins, (remainingLogin) => Boolean(invitedPrimaryToSecondaryLogins[remainingLogin]))) {
+ optimisticData.push({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+ value: {
+ primaryLoginsInvited: null,
+ },
+ });
+ }
+ }
+
const successData = [
{
onyxMethod: Onyx.METHOD.MERGE,
@@ -1306,6 +1334,15 @@ function clearErrors(policyID) {
hideWorkspaceAlertMessage(policyID);
}
+/**
+ * Dismiss the informative messages about which policy members were added with primary logins when invited with their secondary login.
+ *
+ * @param {String} policyID
+ */
+function dismissAddedWithPrimaryMessages(policyID) {
+ Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {primaryLoginsInvited: null});
+}
+
/**
* @param {String} policyID
* @param {String} category
@@ -1349,6 +1386,7 @@ export {
removeWorkspace,
setWorkspaceInviteMembersDraft,
clearErrors,
+ dismissAddedWithPrimaryMessages,
openDraftWorkspaceRequest,
buildOptimisticPolicyRecentlyUsedCategories,
createDraftInitialWorkspace,
diff --git a/src/libs/actions/PushNotification.js b/src/libs/actions/PushNotification.js
index b9a75767d8f6..7abbd7b94ba0 100644
--- a/src/libs/actions/PushNotification.js
+++ b/src/libs/actions/PushNotification.js
@@ -1,6 +1,6 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as API from '../API';
+import * as API from '@libs/API';
+import ONYXKEYS from '@src/ONYXKEYS';
import * as Device from './Device';
let isUserOptedInToPushNotifications = false;
diff --git a/src/libs/actions/ReimbursementAccount/deleteFromBankAccountList.js b/src/libs/actions/ReimbursementAccount/deleteFromBankAccountList.js
index b640d45683ec..6161066c1c69 100644
--- a/src/libs/actions/ReimbursementAccount/deleteFromBankAccountList.js
+++ b/src/libs/actions/ReimbursementAccount/deleteFromBankAccountList.js
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
import * as store from './store';
/**
diff --git a/src/libs/actions/ReimbursementAccount/errors.js b/src/libs/actions/ReimbursementAccount/errors.js
index 54d881cc4516..fd2eaf852bce 100644
--- a/src/libs/actions/ReimbursementAccount/errors.js
+++ b/src/libs/actions/ReimbursementAccount/errors.js
@@ -1,6 +1,6 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
-import * as ErrorUtils from '../../ErrorUtils';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Set the current fields with errors.
diff --git a/src/libs/actions/ReimbursementAccount/index.js b/src/libs/actions/ReimbursementAccount/index.js
index 68774d0ba8b0..0404115f086b 100644
--- a/src/libs/actions/ReimbursementAccount/index.js
+++ b/src/libs/actions/ReimbursementAccount/index.js
@@ -1,7 +1,7 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
-import resetFreePlanBankAccount from './resetFreePlanBankAccount';
+import ONYXKEYS from '@src/ONYXKEYS';
import deleteFromBankAccountList from './deleteFromBankAccountList';
+import resetFreePlanBankAccount from './resetFreePlanBankAccount';
export {goToWithdrawalAccountSetupStep, navigateToBankAccountRoute} from './navigation';
export {setBankAccountFormValidationErrors, setPersonalBankAccountFormValidationErrorFields, resetReimbursementAccount, showBankAccountFormValidationError} from './errors';
diff --git a/src/libs/actions/ReimbursementAccount/navigation.js b/src/libs/actions/ReimbursementAccount/navigation.js
index 1b75e6f16a58..ebc1862e9c74 100644
--- a/src/libs/actions/ReimbursementAccount/navigation.js
+++ b/src/libs/actions/ReimbursementAccount/navigation.js
@@ -1,7 +1,7 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
-import ROUTES from '../../../ROUTES';
-import Navigation from '../../Navigation/Navigation';
+import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
/**
* Navigate to a specific step in the VBA flow
diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js
index 388010e99569..37122c107359 100644
--- a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js
+++ b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js
@@ -1,9 +1,9 @@
import Onyx from 'react-native-onyx';
-import CONST from '../../../CONST';
-import ONYXKEYS from '../../../ONYXKEYS';
-import * as API from '../../API';
-import * as PlaidDataProps from '../../../pages/ReimbursementAccount/plaidDataPropTypes';
-import * as ReimbursementAccountProps from '../../../pages/ReimbursementAccount/reimbursementAccountPropTypes';
+import * as API from '@libs/API';
+import * as PlaidDataProps from '@pages/ReimbursementAccount/plaidDataPropTypes';
+import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Reset user's reimbursement account. This will delete the bank account.
diff --git a/src/libs/actions/ReimbursementAccount/store.js b/src/libs/actions/ReimbursementAccount/store.js
index 422c0ffc43dd..4b8549b60b2e 100644
--- a/src/libs/actions/ReimbursementAccount/store.js
+++ b/src/libs/actions/ReimbursementAccount/store.js
@@ -1,8 +1,8 @@
-import Onyx from 'react-native-onyx';
import lodashGet from 'lodash/get';
+import Onyx from 'react-native-onyx';
import _ from 'underscore';
-import ONYXKEYS from '../../../ONYXKEYS';
-import BankAccount from '../../models/BankAccount';
+import BankAccount from '@libs/models/BankAccount';
+import ONYXKEYS from '@src/ONYXKEYS';
/** Reimbursement account actively being set up */
let reimbursementAccountInSetup = {};
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index fcef11132283..3f7dc76b174d 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -1,33 +1,33 @@
-import {InteractionManager} from 'react-native';
-import _ from 'underscore';
-import lodashGet from 'lodash/get';
-import lodashDebounce from 'lodash/debounce';
+import {format as timezoneFormat, utcToZonedTime} from 'date-fns-tz';
import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import Onyx from 'react-native-onyx';
import Str from 'expensify-common/lib/str';
-import {format as timezoneFormat, utcToZonedTime} from 'date-fns-tz';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as Pusher from '../Pusher/pusher';
-import LocalNotification from '../Notification/LocalNotification';
-import Navigation from '../Navigation/Navigation';
-import * as ActiveClientManager from '../ActiveClientManager';
-import Visibility from '../Visibility';
-import ROUTES from '../../ROUTES';
-import * as API from '../API';
-import CONFIG from '../../CONFIG';
-import CONST from '../../CONST';
-import Log from '../Log';
-import * as ReportUtils from '../ReportUtils';
-import DateUtils from '../DateUtils';
-import * as ReportActionsUtils from '../ReportActionsUtils';
-import * as CollectionUtils from '../CollectionUtils';
-import * as EmojiUtils from '../EmojiUtils';
-import * as ErrorUtils from '../ErrorUtils';
-import * as UserUtils from '../UserUtils';
-import * as Welcome from './Welcome';
-import * as PersonalDetailsUtils from '../PersonalDetailsUtils';
-import * as Environment from '../Environment/Environment';
+import lodashDebounce from 'lodash/debounce';
+import lodashGet from 'lodash/get';
+import {InteractionManager} from 'react-native';
+import Onyx from 'react-native-onyx';
+import _ from 'underscore';
+import * as ActiveClientManager from '@libs/ActiveClientManager';
+import * as API from '@libs/API';
+import * as CollectionUtils from '@libs/CollectionUtils';
+import DateUtils from '@libs/DateUtils';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import * as Environment from '@libs/Environment/Environment';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import Log from '@libs/Log';
+import Navigation from '@libs/Navigation/Navigation';
+import LocalNotification from '@libs/Notification/LocalNotification';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import * as Pusher from '@libs/Pusher/pusher';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as UserUtils from '@libs/UserUtils';
+import Visibility from '@libs/Visibility';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import * as Session from './Session';
+import * as Welcome from './Welcome';
let currentUserAccountID;
Onyx.connect({
@@ -1360,8 +1360,10 @@ function saveReportActionDraftNumberOfLines(reportID, reportActionID, numberOfLi
* @param {String} previousValue
* @param {String} newValue
* @param {boolean} navigate
+ * @param {String} parentReportID
+ * @param {String} parentReportActionID
*/
-function updateNotificationPreference(reportID, previousValue, newValue, navigate) {
+function updateNotificationPreference(reportID, previousValue, newValue, navigate, parentReportID = 0, parentReportActionID = 0) {
if (previousValue === newValue) {
if (navigate) {
Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(reportID));
@@ -1382,12 +1384,68 @@ function updateNotificationPreference(reportID, previousValue, newValue, navigat
value: {notificationPreference: previousValue},
},
];
+ if (parentReportID && parentReportActionID) {
+ optimisticData.push({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`,
+ value: {[parentReportActionID]: {childReportNotificationPreference: newValue}},
+ });
+ failureData.push({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`,
+ value: {[parentReportActionID]: {childReportNotificationPreference: previousValue}},
+ });
+ }
API.write('UpdateReportNotificationPreference', {reportID, notificationPreference: newValue}, {optimisticData, failureData});
if (navigate) {
Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(reportID));
}
}
+/**
+ * This will subscribe to an existing thread, or create a new one and then subsribe to it if necessary
+ *
+ * @param {String} childReportID The reportID we are trying to open
+ * @param {Object} parentReportAction the parent comment of a thread
+ * @param {String} parentReportID The reportID of the parent
+ * @param {String} prevNotificationPreference The previous notification preference for the child report
+ *
+ */
+function toggleSubscribeToChildReport(childReportID = '0', parentReportAction = {}, parentReportID = '0', prevNotificationPreference) {
+ if (childReportID !== '0') {
+ openReport(childReportID);
+ const parentReportActionID = lodashGet(parentReportAction, 'reportActionID', '0');
+ if (!prevNotificationPreference || prevNotificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) {
+ updateNotificationPreference(childReportID, prevNotificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, false, parentReportID, parentReportActionID);
+ } else {
+ updateNotificationPreference(childReportID, prevNotificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN, false, parentReportID, parentReportActionID);
+ }
+ } else {
+ const participantAccountIDs = _.uniq([currentUserAccountID, Number(parentReportAction.actorAccountID)]);
+ const parentReport = allReports[parentReportID];
+ const newChat = ReportUtils.buildOptimisticChatReport(
+ participantAccountIDs,
+ lodashGet(parentReportAction, ['message', 0, 'text']),
+ lodashGet(parentReport, 'chatType', ''),
+ lodashGet(parentReport, 'policyID', CONST.POLICY.OWNER_EMAIL_FAKE),
+ CONST.POLICY.OWNER_ACCOUNT_ID_FAKE,
+ false,
+ '',
+ undefined,
+ undefined,
+ CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS,
+ parentReportAction.reportActionID,
+ parentReportID,
+ );
+
+ const participantLogins = PersonalDetailsUtils.getLoginsByAccountIDs(newChat.participantAccountIDs);
+ openReport(newChat.reportID, participantLogins, newChat, parentReportAction.reportActionID);
+ const notificationPreference =
+ prevNotificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN ? CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS : CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN;
+ updateNotificationPreference(newChat.reportID, prevNotificationPreference, notificationPreference, false, parentReportID, parentReportAction.reportActionID);
+ }
+}
+
/**
* @param {String} reportID
* @param {String} previousValue
@@ -2362,7 +2420,7 @@ function clearPrivateNotesError(reportID, accountID) {
}
function getDraftPrivateNote(reportID) {
- return draftNoteMap[reportID];
+ return draftNoteMap[reportID] || '';
}
/**
@@ -2467,6 +2525,7 @@ export {
navigateToAndOpenReport,
navigateToAndOpenReportWithAccountIDs,
navigateToAndOpenChildReport,
+ toggleSubscribeToChildReport,
updatePolicyRoomNameAndNavigate,
clearPolicyRoomNameErrors,
clearIOUError,
diff --git a/src/libs/actions/ReportActions.ts b/src/libs/actions/ReportActions.ts
index 3faa1dbe3574..b9cea498a3fa 100644
--- a/src/libs/actions/ReportActions.ts
+++ b/src/libs/actions/ReportActions.ts
@@ -1,9 +1,9 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
-import CONST from '../../CONST';
-import * as ReportActionUtils from '../ReportActionsUtils';
-import * as ReportUtils from '../ReportUtils';
-import ReportAction from '../../types/onyx/ReportAction';
+import * as ReportActionUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ReportAction from '@src/types/onyx/ReportAction';
function clearReportActionErrors(reportID: string, reportAction: ReportAction) {
const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction);
diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts
index 7015fa44da3a..74d2f609ab9b 100644
--- a/src/libs/actions/Session/index.ts
+++ b/src/libs/actions/Session/index.ts
@@ -1,30 +1,30 @@
-import Onyx, {OnyxUpdate} from 'react-native-onyx';
-import {Linking} from 'react-native';
-import {ValueOf} from 'type-fest';
import throttle from 'lodash/throttle';
-import {ChannelAuthorizationCallback} from 'pusher-js/with-encryption';
import {ChannelAuthorizationData} from 'pusher-js/types/src/core/auth/options';
+import {ChannelAuthorizationCallback} from 'pusher-js/with-encryption';
+import {Linking} from 'react-native';
+import Onyx, {OnyxUpdate} from 'react-native-onyx';
+import {ValueOf} from 'type-fest';
+import * as API from '@libs/API';
+import * as Authentication from '@libs/Authentication';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import Log from '@libs/Log';
+import Navigation from '@libs/Navigation/Navigation';
+import * as NetworkStore from '@libs/Network/NetworkStore';
+import * as Pusher from '@libs/Pusher/pusher';
+import * as ReportUtils from '@libs/ReportUtils';
+import Timers from '@libs/Timers';
+import {hideContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import * as Device from '@userActions/Device';
+import redirectToSignIn from '@userActions/SignInRedirect';
+import Timing from '@userActions/Timing';
+import * as Welcome from '@userActions/Welcome';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import Credentials from '@src/types/onyx/Credentials';
+import {AutoAuthState} from '@src/types/onyx/Session';
import clearCache from './clearCache';
-import ONYXKEYS from '../../../ONYXKEYS';
-import redirectToSignIn from '../SignInRedirect';
-import CONFIG from '../../../CONFIG';
-import Log from '../../Log';
-import Timing from '../Timing';
-import CONST from '../../../CONST';
-import Timers from '../../Timers';
-import * as Pusher from '../../Pusher/pusher';
-import * as Authentication from '../../Authentication';
-import * as Welcome from '../Welcome';
-import * as API from '../../API';
-import * as NetworkStore from '../../Network/NetworkStore';
-import Navigation from '../../Navigation/Navigation';
-import * as Device from '../Device';
-import ROUTES from '../../../ROUTES';
-import * as ErrorUtils from '../../ErrorUtils';
-import * as ReportUtils from '../../ReportUtils';
-import {hideContextMenu} from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
-import Credentials from '../../../types/onyx/Credentials';
-import {AutoAuthState} from '../../../types/onyx/Session';
let sessionAuthTokenType: string | null = '';
let sessionAuthToken: string | null = null;
diff --git a/src/libs/actions/Session/updateSessionAuthTokens.ts b/src/libs/actions/Session/updateSessionAuthTokens.ts
index 9614face2070..6f90b60ef06d 100644
--- a/src/libs/actions/Session/updateSessionAuthTokens.ts
+++ b/src/libs/actions/Session/updateSessionAuthTokens.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
export default function updateSessionAuthTokens(authToken?: string, encryptedAuthToken?: string) {
Onyx.merge(ONYXKEYS.SESSION, {authToken, encryptedAuthToken});
diff --git a/src/libs/actions/SignInRedirect.ts b/src/libs/actions/SignInRedirect.ts
index 67f5f2d8586f..9ca4e6813567 100644
--- a/src/libs/actions/SignInRedirect.ts
+++ b/src/libs/actions/SignInRedirect.ts
@@ -1,14 +1,14 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS, {OnyxKey} from '../../ONYXKEYS';
-import * as MainQueue from '../Network/MainQueue';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import HttpUtils from '@libs/HttpUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import navigationRef from '@libs/Navigation/navigationRef';
+import * as MainQueue from '@libs/Network/MainQueue';
+import NetworkConnection from '@libs/NetworkConnection';
+import * as SessionUtils from '@libs/SessionUtils';
+import ONYXKEYS, {OnyxKey} from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
import * as PersistedRequests from './PersistedRequests';
-import NetworkConnection from '../NetworkConnection';
-import HttpUtils from '../HttpUtils';
-import navigationRef from '../Navigation/navigationRef';
-import SCREENS from '../../SCREENS';
-import Navigation from '../Navigation/Navigation';
-import * as ErrorUtils from '../ErrorUtils';
-import * as SessionUtils from '../SessionUtils';
let currentIsOffline: boolean | undefined;
let currentShouldForceOffline: boolean | undefined;
diff --git a/src/libs/actions/Tab.ts b/src/libs/actions/Tab.ts
index 7acd978d6b1a..a210cef36c73 100644
--- a/src/libs/actions/Tab.ts
+++ b/src/libs/actions/Tab.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Sets the selected tab for a given tab ID
diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index cc2b58f78b75..76396b1f31b8 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -1,20 +1,20 @@
-import Onyx from 'react-native-onyx';
import lodashGet from 'lodash/get';
+import Onyx from 'react-native-onyx';
import _ from 'underscore';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as API from '../API';
-import * as ReportUtils from '../ReportUtils';
-import Navigation from '../Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import CONST from '../../CONST';
-import DateUtils from '../DateUtils';
-import * as OptionsListUtils from '../OptionsListUtils';
-import * as UserUtils from '../UserUtils';
-import * as ErrorUtils from '../ErrorUtils';
-import * as ReportActionsUtils from '../ReportActionsUtils';
-import * as Expensicons from '../../components/Icon/Expensicons';
-import * as LocalePhoneNumber from '../LocalePhoneNumber';
-import * as Localize from '../Localize';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as API from '@libs/API';
+import DateUtils from '@libs/DateUtils';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
+import * as Localize from '@libs/Localize';
+import Navigation from '@libs/Navigation/Navigation';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as UserUtils from '@libs/UserUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
let currentUserEmail;
let currentUserAccountID;
diff --git a/src/libs/actions/TeachersUnite.js b/src/libs/actions/TeachersUnite.js
index 39b9de8c6478..98b1f82629a4 100644
--- a/src/libs/actions/TeachersUnite.js
+++ b/src/libs/actions/TeachersUnite.js
@@ -1,12 +1,12 @@
-import _ from 'underscore';
-import Onyx from 'react-native-onyx';
import lodashGet from 'lodash/get';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as API from '../API';
-import Navigation from '../Navigation/Navigation';
-import CONST from '../../CONST';
-import * as ReportUtils from '../ReportUtils';
-import * as OptionsListUtils from '../OptionsListUtils';
+import Onyx from 'react-native-onyx';
+import _ from 'underscore';
+import * as API from '@libs/API';
+import Navigation from '@libs/Navigation/Navigation';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
let sessionEmail = '';
let sessionAccountID = 0;
diff --git a/src/libs/actions/TestTool.ts b/src/libs/actions/TestTool.ts
index 11de9498b7b0..dc7b371bfe12 100644
--- a/src/libs/actions/TestTool.ts
+++ b/src/libs/actions/TestTool.ts
@@ -1,7 +1,7 @@
import throttle from 'lodash/throttle';
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
let isTestToolsModalOpen = false;
Onyx.connect({
diff --git a/src/libs/actions/Timing.ts b/src/libs/actions/Timing.ts
index 13f40bab87c9..0cef2fe4d2b8 100644
--- a/src/libs/actions/Timing.ts
+++ b/src/libs/actions/Timing.ts
@@ -1,8 +1,8 @@
-import getPlatform from '../getPlatform';
-import * as Environment from '../Environment/Environment';
-import Firebase from '../Firebase';
-import * as API from '../API';
-import Log from '../Log';
+import * as API from '@libs/API';
+import * as Environment from '@libs/Environment/Environment';
+import Firebase from '@libs/Firebase';
+import getPlatform from '@libs/getPlatform';
+import Log from '@libs/Log';
type TimestampData = {
startTime: number;
diff --git a/src/libs/actions/Transaction.ts b/src/libs/actions/Transaction.ts
index 8a7f0f7bd533..a649267c0ae9 100644
--- a/src/libs/actions/Transaction.ts
+++ b/src/libs/actions/Transaction.ts
@@ -1,14 +1,14 @@
-import Onyx from 'react-native-onyx';
-import lodashHas from 'lodash/has';
-import lodashClone from 'lodash/clone';
import {isEqual} from 'lodash';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as CollectionUtils from '../CollectionUtils';
-import * as API from '../API';
-import CONST from '../../CONST';
-import {RecentWaypoint, Transaction} from '../../types/onyx';
-import {WaypointCollection} from '../../types/onyx/Transaction';
-import * as TransactionUtils from '../TransactionUtils';
+import lodashClone from 'lodash/clone';
+import lodashHas from 'lodash/has';
+import Onyx from 'react-native-onyx';
+import * as API from '@libs/API';
+import * as CollectionUtils from '@libs/CollectionUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {RecentWaypoint, Transaction} from '@src/types/onyx';
+import {WaypointCollection} from '@src/types/onyx/Transaction';
let recentWaypoints: RecentWaypoint[] = [];
Onyx.connect({
diff --git a/src/libs/actions/TransactionEdit.js b/src/libs/actions/TransactionEdit.js
index 44b489b72c43..78a271f0f8cd 100644
--- a/src/libs/actions/TransactionEdit.js
+++ b/src/libs/actions/TransactionEdit.js
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Makes a backup copy of a transaction object that can be restored when the user cancels editing a transaction.
diff --git a/src/libs/actions/TwoFactorAuthActions.ts b/src/libs/actions/TwoFactorAuthActions.ts
index 0cec7d3c16c8..ccd4e2baf662 100644
--- a/src/libs/actions/TwoFactorAuthActions.ts
+++ b/src/libs/actions/TwoFactorAuthActions.ts
@@ -1,8 +1,8 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
-import Navigation from '../Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import {TwoFactorAuthStep} from '../../types/onyx/Account';
+import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import {TwoFactorAuthStep} from '@src/types/onyx/Account';
/**
* Clear 2FA data if the flow is interrupted without finishing
diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js
index f65c20cd7e5b..f7375a5583a6 100644
--- a/src/libs/actions/User.js
+++ b/src/libs/actions/User.js
@@ -1,22 +1,22 @@
-import _ from 'underscore';
+import {isBefore} from 'date-fns';
import lodashGet from 'lodash/get';
import Onyx from 'react-native-onyx';
-import {isBefore} from 'date-fns';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as API from '../API';
-import CONST from '../../CONST';
-import Navigation from '../Navigation/Navigation';
-import ROUTES from '../../ROUTES';
-import * as Pusher from '../Pusher/pusher';
+import _ from 'underscore';
+import * as API from '@libs/API';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as SequentialQueue from '@libs/Network/SequentialQueue';
+import * as Pusher from '@libs/Pusher/pusher';
+import PusherUtils from '@libs/PusherUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import * as Link from './Link';
-import * as SequentialQueue from '../Network/SequentialQueue';
-import PusherUtils from '../PusherUtils';
+import * as OnyxUpdates from './OnyxUpdates';
+import * as PersonalDetails from './PersonalDetails';
import * as Report from './Report';
-import * as ReportActionsUtils from '../ReportActionsUtils';
-import * as ErrorUtils from '../ErrorUtils';
import * as Session from './Session';
-import * as PersonalDetails from './PersonalDetails';
-import * as OnyxUpdates from './OnyxUpdates';
import redirectToSignIn from './SignInRedirect';
let currentUserAccountID = '';
diff --git a/src/libs/actions/Wallet.js b/src/libs/actions/Wallet.js
index 9ef4b547d4b4..bfc2a7306434 100644
--- a/src/libs/actions/Wallet.js
+++ b/src/libs/actions/Wallet.js
@@ -1,6 +1,6 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as API from '../API';
+import * as API from '@libs/API';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* Fetch and save locally the Onfido SDK token and applicantID
diff --git a/src/libs/actions/Welcome.js b/src/libs/actions/Welcome.ts
similarity index 59%
rename from src/libs/actions/Welcome.js
rename to src/libs/actions/Welcome.ts
index 8e1832edb9a7..7fd7adeafa96 100644
--- a/src/libs/actions/Welcome.js
+++ b/src/libs/actions/Welcome.ts
@@ -1,22 +1,33 @@
-import Onyx from 'react-native-onyx';
-import _ from 'underscore';
-import lodashGet from 'lodash/get';
-import Navigation from '../Navigation/Navigation';
-import * as ReportUtils from '../ReportUtils';
-import ROUTES from '../../ROUTES';
+import Onyx, {OnyxCollection} from 'react-native-onyx';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
+import OnyxPolicy from '@src/types/onyx/Policy';
+import Report from '@src/types/onyx/Report';
import * as Policy from './Policy';
-import ONYXKEYS from '../../ONYXKEYS';
-import SCREENS from '../../SCREENS';
-import CONST from '../../CONST';
-let resolveIsReadyPromise;
-let isReadyPromise = new Promise((resolve) => {
+let resolveIsReadyPromise: (value?: Promise) => void | undefined;
+let isReadyPromise = new Promise((resolve) => {
resolveIsReadyPromise = resolve;
});
-let isFirstTimeNewExpensifyUser;
+let isFirstTimeNewExpensifyUser: boolean | undefined;
let isLoadingReportData = true;
-let currentUserAccountID;
+let currentUserAccountID: number | undefined;
+
+type Route = {
+ name: string;
+ params?: {path: string; exitTo?: string; openOnAdminRoom?: boolean};
+};
+
+type ShowParams = {
+ routes: Route[];
+ showCreateMenu?: () => void;
+ showPopoverMenu?: () => boolean;
+};
/**
* Check that a few requests have completed so that the welcome action can proceed:
@@ -26,22 +37,22 @@ let currentUserAccountID;
* - Whether we have loaded all reports the server knows about
*/
function checkOnReady() {
- if (!_.isBoolean(isFirstTimeNewExpensifyUser) || isLoadingReportData) {
+ if (isFirstTimeNewExpensifyUser === undefined || isLoadingReportData) {
return;
}
- resolveIsReadyPromise();
+ resolveIsReadyPromise?.();
}
Onyx.connect({
key: ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER,
initWithStoredValues: false,
- callback: (val) => {
+ callback: (value) => {
// If isFirstTimeNewExpensifyUser was true do not update it to false. We update it to false inside the Welcome.show logic
// More context here https://github.com/Expensify/App/pull/16962#discussion_r1167351359
- if (!isFirstTimeNewExpensifyUser) {
- isFirstTimeNewExpensifyUser = val;
- }
+
+ isFirstTimeNewExpensifyUser = value ?? undefined;
+
checkOnReady();
},
});
@@ -49,13 +60,13 @@ Onyx.connect({
Onyx.connect({
key: ONYXKEYS.IS_LOADING_REPORT_DATA,
initWithStoredValues: false,
- callback: (val) => {
- isLoadingReportData = val;
+ callback: (value) => {
+ isLoadingReportData = value ?? false;
checkOnReady();
},
});
-const allReports = {};
+const allReports: OnyxCollection = {};
Onyx.connect({
key: ONYXKEYS.COLLECTION.REPORT,
initWithStoredValues: false,
@@ -68,7 +79,7 @@ Onyx.connect({
},
});
-const allPolicies = {};
+const allPolicies: OnyxCollection = {};
Onyx.connect({
key: ONYXKEYS.COLLECTION.POLICY,
callback: (val, key) => {
@@ -98,13 +109,8 @@ Onyx.connect({
/**
* Shows a welcome action on first login
- *
- * @param {Object} params
- * @param {Object} params.routes
- * @param {Function} [params.showCreateMenu]
- * @param {Function} [params.showPopoverMenu]
*/
-function show({routes, showCreateMenu = () => {}, showPopoverMenu = () => {}}) {
+function show({routes, showCreateMenu = () => {}, showPopoverMenu = () => false}: ShowParams) {
isReadyPromise.then(() => {
if (!isFirstTimeNewExpensifyUser) {
return;
@@ -112,33 +118,37 @@ function show({routes, showCreateMenu = () => {}, showPopoverMenu = () => {}}) {
// If we are rendering the SidebarScreen at the same time as a workspace route that means we've already created a workspace via workspace/new and should not open the global
// create menu right now. We should also stay on the workspace page if that is our destination.
- const topRoute = _.last(routes);
- const isWorkspaceRoute = topRoute.name === 'Settings' && topRoute.params.path.includes('workspace');
- const transitionRoute = _.find(routes, (route) => route.name === SCREENS.TRANSITION_BETWEEN_APPS);
- const exitingToWorkspaceRoute = lodashGet(transitionRoute, 'params.exitTo', '') === 'workspace/new';
- const openOnAdminRoom = lodashGet(topRoute, 'params.openOnAdminRoom', false);
- const isDisplayingWorkspaceRoute = isWorkspaceRoute || exitingToWorkspaceRoute;
+ const topRoute = routes.length > 0 ? routes[routes.length - 1] : undefined;
+ const isWorkspaceRoute = topRoute !== undefined && topRoute.name === 'Settings' && topRoute.params?.path.includes('workspace');
+ const transitionRoute = routes.find((route) => route.name === SCREENS.TRANSITION_BETWEEN_APPS);
+ const exitingToWorkspaceRoute = transitionRoute?.params?.exitTo === 'workspace/new';
+ const openOnAdminRoom = topRoute?.params?.openOnAdminRoom ?? false;
+ const isDisplayingWorkspaceRoute = isWorkspaceRoute ?? exitingToWorkspaceRoute;
// If we already opened the workspace settings or want the admin room to stay open, do not
// navigate away to the workspace chat report
const shouldNavigateToWorkspaceChat = !isDisplayingWorkspaceRoute && !openOnAdminRoom;
- const workspaceChatReport = _.find(
- allReports,
- (report) => ReportUtils.isPolicyExpenseChat(report) && report.ownerAccountID === currentUserAccountID && report.statusNum !== CONST.REPORT.STATUS.CLOSED,
- );
+ const workspaceChatReport = Object.values(allReports ?? {}).find((report) => {
+ if (report) {
+ return ReportUtils.isPolicyExpenseChat(report) && report.ownerAccountID === currentUserAccountID && report.statusNum !== CONST.REPORT.STATUS.CLOSED;
+ }
+ return false;
+ });
- if (workspaceChatReport || openOnAdminRoom) {
+ if (workspaceChatReport ?? openOnAdminRoom) {
// This key is only updated when we call ReconnectApp, setting it to false now allows the user to navigate normally instead of always redirecting to the workspace chat
Onyx.set(ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER, false);
}
if (shouldNavigateToWorkspaceChat && workspaceChatReport) {
- Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(workspaceChatReport.reportID));
+ if (workspaceChatReport.reportID !== null) {
+ Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(workspaceChatReport.reportID));
+ }
// If showPopoverMenu exists and returns true then it opened the Popover Menu successfully, and we can update isFirstTimeNewExpensifyUser
// so the Welcome logic doesn't run again
- if (showPopoverMenu()) {
+ if (showPopoverMenu?.()) {
isFirstTimeNewExpensifyUser = false;
}
@@ -147,7 +157,7 @@ function show({routes, showCreateMenu = () => {}, showPopoverMenu = () => {}}) {
// If user is not already an admin of a free policy and we are not navigating them to their workspace or creating a new workspace via workspace/new then
// we will show the create menu.
- if (!Policy.isAdminOfFreePolicy(allPolicies) && !isDisplayingWorkspaceRoute) {
+ if (!Policy.isAdminOfFreePolicy(allPolicies ?? undefined) && !isDisplayingWorkspaceRoute) {
showCreateMenu();
}
@@ -164,7 +174,7 @@ function resetReadyCheck() {
isLoadingReportData = true;
}
-function serverDataIsReadyPromise() {
+function serverDataIsReadyPromise(): Promise {
return isReadyPromise;
}
diff --git a/src/libs/addEncryptedAuthTokenToURL.ts b/src/libs/addEncryptedAuthTokenToURL.ts
index 9bdb83c284ce..ea6f0bc6d34d 100644
--- a/src/libs/addEncryptedAuthTokenToURL.ts
+++ b/src/libs/addEncryptedAuthTokenToURL.ts
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
let encryptedAuthToken = '';
Onyx.connect({
diff --git a/src/libs/calculateAnchorPosition.ts b/src/libs/calculateAnchorPosition.ts
index 39fb3032ee09..8db4c053aba6 100644
--- a/src/libs/calculateAnchorPosition.ts
+++ b/src/libs/calculateAnchorPosition.ts
@@ -1,7 +1,7 @@
/* eslint-disable no-console */
-import {ValueOf} from 'type-fest';
import {View} from 'react-native';
-import CONST from '../CONST';
+import {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
type AnchorOrigin = {
horizontal: ValueOf;
diff --git a/src/libs/canFocusInputOnScreenFocus/index.ts b/src/libs/canFocusInputOnScreenFocus/index.ts
index be500074d7e3..57baac02245d 100644
--- a/src/libs/canFocusInputOnScreenFocus/index.ts
+++ b/src/libs/canFocusInputOnScreenFocus/index.ts
@@ -1,4 +1,4 @@
-import * as DeviceCapabilities from '../DeviceCapabilities';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import CanFocusInputOnScreenFocus from './types';
const canFocusInputOnScreenFocus: CanFocusInputOnScreenFocus = () => !DeviceCapabilities.canUseTouchScreen();
diff --git a/src/libs/convertToLTR/index.android.ts b/src/libs/convertToLTR/index.android.ts
index 3a4755b1710f..d73fd3de7a21 100644
--- a/src/libs/convertToLTR/index.android.ts
+++ b/src/libs/convertToLTR/index.android.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import ConvertToLTR from './types';
/**
diff --git a/src/libs/convertToLTRForComposer/index.ts b/src/libs/convertToLTRForComposer/index.ts
index eb14bfa8c11a..37015a755869 100644
--- a/src/libs/convertToLTRForComposer/index.ts
+++ b/src/libs/convertToLTRForComposer/index.ts
@@ -1,20 +1,21 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import ConvertToLTRForComposer from './types';
-function hasLTRorRTLCharacters(text: string): boolean {
- // Regular expressions to match LTR and RTL character ranges.
- // eslint-disable-next-line no-control-regex
- const ltrPattern = /[\u0001-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/;
+function hasRTLCharacters(text: string): boolean {
+ // Regular expressions to match RTL character ranges.
const rtlPattern = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
-
- return ltrPattern.test(text) || rtlPattern.test(text);
+ return rtlPattern.test(text);
}
// Converts a given text to ensure it starts with the LTR (Left-to-Right) marker.
const convertToLTRForComposer: ConvertToLTRForComposer = (text) => {
- // Ensure the text contains LTR or RTL characters to avoid an unwanted special character at the beginning, even after a backspace deletion.
- if (!hasLTRorRTLCharacters(text)) {
- return '';
+ // Ensure that the text starts with RTL characters if not we return the same text to avoid concatination with special character at the start which leads to unexpected behaviour for Emoji/Mention suggestions.
+ if (!hasRTLCharacters(text)) {
+ // If text is empty string return empty string to avoid an empty draft due to special character.
+ if (text === '' || CONST.UNICODE.LTR.match(text)) {
+ return '';
+ }
+ return text;
}
// Check if the text contains only spaces. If it does, we do not concatenate it with CONST.UNICODE.LTR,
diff --git a/src/libs/fileDownload/FileUtils.js b/src/libs/fileDownload/FileUtils.js
index ba06b80f7c43..fab014de302f 100644
--- a/src/libs/fileDownload/FileUtils.js
+++ b/src/libs/fileDownload/FileUtils.js
@@ -1,7 +1,7 @@
import {Alert, Linking, Platform} from 'react-native';
-import CONST from '../../CONST';
-import * as Localize from '../Localize';
-import DateUtils from '../DateUtils';
+import DateUtils from '@libs/DateUtils';
+import * as Localize from '@libs/Localize';
+import CONST from '@src/CONST';
/**
* Show alert on successful attachment download
diff --git a/src/libs/fileDownload/getAttachmentDetails.js b/src/libs/fileDownload/getAttachmentDetails.js
index 72cbad115681..28b678ffb651 100644
--- a/src/libs/fileDownload/getAttachmentDetails.js
+++ b/src/libs/fileDownload/getAttachmentDetails.js
@@ -1,5 +1,5 @@
-import CONST from '../../CONST';
-import tryResolveUrlFromApiRoot from '../tryResolveUrlFromApiRoot';
+import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
+import CONST from '@src/CONST';
/**
* Extract the thumbnail URL, source URL and the original filename from the HTML.
diff --git a/src/libs/fileDownload/index.ios.js b/src/libs/fileDownload/index.ios.js
index 95d92f1e3103..1599e919d28a 100644
--- a/src/libs/fileDownload/index.ios.js
+++ b/src/libs/fileDownload/index.ios.js
@@ -1,8 +1,8 @@
-import RNFetchBlob from 'react-native-blob-util';
import {CameraRoll} from '@react-native-camera-roll/camera-roll';
import lodashGet from 'lodash/get';
+import RNFetchBlob from 'react-native-blob-util';
+import CONST from '@src/CONST';
import * as FileUtils from './FileUtils';
-import CONST from '../../CONST';
/**
* Downloads the file to Documents section in iOS
diff --git a/src/libs/fileDownload/index.js b/src/libs/fileDownload/index.js
index a775576eb365..0b86daf7141f 100644
--- a/src/libs/fileDownload/index.js
+++ b/src/libs/fileDownload/index.js
@@ -1,5 +1,5 @@
+import * as Link from '@userActions/Link';
import * as FileUtils from './FileUtils';
-import * as Link from '../actions/Link';
/**
* Downloading attachment in web, desktop
diff --git a/src/libs/focusAndUpdateMultilineInputRange.ts b/src/libs/focusAndUpdateMultilineInputRange.ts
index 50c3703239df..92da790e383f 100644
--- a/src/libs/focusAndUpdateMultilineInputRange.ts
+++ b/src/libs/focusAndUpdateMultilineInputRange.ts
@@ -1,4 +1,5 @@
import {TextInput} from 'react-native';
+
/**
* Focus a multiline text input and place the cursor at the end of the value (if there is a value in the input).
*
diff --git a/src/libs/getButtonState.ts b/src/libs/getButtonState.ts
index af7c4db6b4ec..6b89e1b7d383 100644
--- a/src/libs/getButtonState.ts
+++ b/src/libs/getButtonState.ts
@@ -1,5 +1,5 @@
import {ValueOf} from 'type-fest';
-import CONST from '../CONST';
+import CONST from '@src/CONST';
type GetButtonState = (isActive: boolean, isPressed: boolean, isComplete: boolean, isDisabled: boolean, isInteractive: boolean) => ValueOf;
diff --git a/src/libs/getModalState.js b/src/libs/getModalState.js
index 12023a5bdc42..30ff8499809a 100644
--- a/src/libs/getModalState.js
+++ b/src/libs/getModalState.js
@@ -1,5 +1,5 @@
import Onyx from 'react-native-onyx';
-import ONYXKEYS from '../ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
let modalState = {};
diff --git a/src/libs/getOperatingSystem/index.native.ts b/src/libs/getOperatingSystem/index.native.ts
index 38b87f4983b7..f3e856cb14c9 100644
--- a/src/libs/getOperatingSystem/index.native.ts
+++ b/src/libs/getOperatingSystem/index.native.ts
@@ -1,5 +1,5 @@
import {Platform} from 'react-native';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import GetOperatingSystem from './types';
/**
diff --git a/src/libs/getOperatingSystem/index.ts b/src/libs/getOperatingSystem/index.ts
index 7adfa27c45fc..630595d97471 100644
--- a/src/libs/getOperatingSystem/index.ts
+++ b/src/libs/getOperatingSystem/index.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import GetOperatingSystem from './types';
/**
diff --git a/src/libs/getOperatingSystem/types.ts b/src/libs/getOperatingSystem/types.ts
index 64bb103db083..a4b3046b4cd9 100644
--- a/src/libs/getOperatingSystem/types.ts
+++ b/src/libs/getOperatingSystem/types.ts
@@ -1,5 +1,5 @@
import {ValueOf} from 'type-fest';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
type OS = ValueOf | null;
type GetOperatingSystem = () => OS;
diff --git a/src/libs/getPermittedDecimalSeparator/index.js b/src/libs/getPermittedDecimalSeparator/index.js
index 9ac4156bc3ff..03fa644fc327 100644
--- a/src/libs/getPermittedDecimalSeparator/index.js
+++ b/src/libs/getPermittedDecimalSeparator/index.js
@@ -1,6 +1,6 @@
-import getOperatingSystem from '../getOperatingSystem';
+import getOperatingSystem from '@libs/getOperatingSystem';
+import CONST from '@src/CONST';
import getPermittedDecimalSeparatorIOS from './index.ios';
-import CONST from '../../CONST';
export default (localizedSeparator) => {
if (getOperatingSystem() === CONST.OS.IOS) {
diff --git a/src/libs/getPlaidLinkTokenParameters/index.android.ts b/src/libs/getPlaidLinkTokenParameters/index.android.ts
index 39d444abdba2..c7e2aa8efd1e 100644
--- a/src/libs/getPlaidLinkTokenParameters/index.android.ts
+++ b/src/libs/getPlaidLinkTokenParameters/index.android.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import GetPlaidLinkTokenParameters from './types';
const getPlaidLinkTokenParameters: GetPlaidLinkTokenParameters = () => ({
diff --git a/src/libs/getPlaidLinkTokenParameters/index.ios.ts b/src/libs/getPlaidLinkTokenParameters/index.ios.ts
index 330efad4839a..8c69ddc71bb2 100644
--- a/src/libs/getPlaidLinkTokenParameters/index.ios.ts
+++ b/src/libs/getPlaidLinkTokenParameters/index.ios.ts
@@ -1,4 +1,4 @@
-import CONFIG from '../../CONFIG';
+import CONFIG from '@src/CONFIG';
import GetPlaidLinkTokenParameters from './types';
const getPlaidLinkTokenParameters: GetPlaidLinkTokenParameters = () => ({
diff --git a/src/libs/getPlaidLinkTokenParameters/index.ts b/src/libs/getPlaidLinkTokenParameters/index.ts
index e47629e85d09..570951e3d683 100644
--- a/src/libs/getPlaidLinkTokenParameters/index.ts
+++ b/src/libs/getPlaidLinkTokenParameters/index.ts
@@ -1,5 +1,5 @@
-import ROUTES from '../../ROUTES';
-import CONFIG from '../../CONFIG';
+import CONFIG from '@src/CONFIG';
+import ROUTES from '@src/ROUTES';
import GetPlaidLinkTokenParameters from './types';
const getPlaidLinkTokenParameters: GetPlaidLinkTokenParameters = () => {
diff --git a/src/libs/getPlatform/index.android.ts b/src/libs/getPlatform/index.android.ts
index 14ed65ace19d..a0f4edb055af 100644
--- a/src/libs/getPlatform/index.android.ts
+++ b/src/libs/getPlatform/index.android.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import Platform from './types';
export default function getPlatform(): Platform {
diff --git a/src/libs/getPlatform/index.desktop.ts b/src/libs/getPlatform/index.desktop.ts
index c9f5720c541d..0b90b5f121bb 100644
--- a/src/libs/getPlatform/index.desktop.ts
+++ b/src/libs/getPlatform/index.desktop.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import Platform from './types';
export default function getPlatform(): Platform {
diff --git a/src/libs/getPlatform/index.ios.ts b/src/libs/getPlatform/index.ios.ts
index 8c21189b92e7..ee35c8b610bc 100644
--- a/src/libs/getPlatform/index.ios.ts
+++ b/src/libs/getPlatform/index.ios.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import Platform from './types';
export default function getPlatform(): Platform {
diff --git a/src/libs/getPlatform/index.ts b/src/libs/getPlatform/index.ts
index c53963f5b80f..ca87e79170f5 100644
--- a/src/libs/getPlatform/index.ts
+++ b/src/libs/getPlatform/index.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import Platform from './types';
export default function getPlatform(): Platform {
diff --git a/src/libs/getPlatform/types.ts b/src/libs/getPlatform/types.ts
index ceddb4e17224..9c43c696a6f8 100644
--- a/src/libs/getPlatform/types.ts
+++ b/src/libs/getPlatform/types.ts
@@ -1,5 +1,5 @@
import {ValueOf} from 'type-fest';
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
type Platform = ValueOf;
diff --git a/src/libs/getSecureEntryKeyboardType/index.android.ts b/src/libs/getSecureEntryKeyboardType/index.android.ts
index afd808f35b10..bc50e202381b 100644
--- a/src/libs/getSecureEntryKeyboardType/index.android.ts
+++ b/src/libs/getSecureEntryKeyboardType/index.android.ts
@@ -1,4 +1,4 @@
-import CONST from '../../CONST';
+import CONST from '@src/CONST';
import GetSecureEntryKeyboardType from './types';
/**
diff --git a/src/libs/isReportMessageAttachment.ts b/src/libs/isReportMessageAttachment.ts
index 8d1112261d1f..097f46465dc9 100644
--- a/src/libs/isReportMessageAttachment.ts
+++ b/src/libs/isReportMessageAttachment.ts
@@ -1,5 +1,5 @@
-import CONST from '../CONST';
-import {Message} from '../types/onyx/ReportAction';
+import CONST from '@src/CONST';
+import {Message} from '@src/types/onyx/ReportAction';
/**
* Check whether a report action is Attachment or not.
diff --git a/src/libs/localFileDownload/index.android.ts b/src/libs/localFileDownload/index.android.ts
index ad13b5c5cfa7..4de6cbd0e940 100644
--- a/src/libs/localFileDownload/index.android.ts
+++ b/src/libs/localFileDownload/index.android.ts
@@ -1,5 +1,5 @@
import RNFetchBlob from 'react-native-blob-util';
-import * as FileUtils from '../fileDownload/FileUtils';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
import LocalFileDownload from './types';
/**
diff --git a/src/libs/localFileDownload/index.ios.ts b/src/libs/localFileDownload/index.ios.ts
index 3597ea5f6d3c..5461c6ffc4c4 100644
--- a/src/libs/localFileDownload/index.ios.ts
+++ b/src/libs/localFileDownload/index.ios.ts
@@ -1,6 +1,6 @@
import {Share} from 'react-native';
import RNFetchBlob from 'react-native-blob-util';
-import * as FileUtils from '../fileDownload/FileUtils';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
import LocalFileDownload from './types';
/**
diff --git a/src/libs/localFileDownload/index.ts b/src/libs/localFileDownload/index.ts
index 7b9b4973d5c1..2a70a01f88c0 100644
--- a/src/libs/localFileDownload/index.ts
+++ b/src/libs/localFileDownload/index.ts
@@ -1,4 +1,4 @@
-import * as FileUtils from '../fileDownload/FileUtils';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
import LocalFileDownload from './types';
/**
diff --git a/src/libs/migrateOnyx.js b/src/libs/migrateOnyx.js
index 2ac9f0d92d91..b65670819418 100644
--- a/src/libs/migrateOnyx.js
+++ b/src/libs/migrateOnyx.js
@@ -1,8 +1,8 @@
import _ from 'underscore';
import Log from './Log';
+import KeyReportActionsDraftByReportActionID from './migrations/KeyReportActionsDraftByReportActionID';
import PersonalDetailsByAccountID from './migrations/PersonalDetailsByAccountID';
import RenameReceiptFilename from './migrations/RenameReceiptFilename';
-import KeyReportActionsDraftByReportActionID from './migrations/KeyReportActionsDraftByReportActionID';
export default function () {
const startTime = Date.now();
diff --git a/src/libs/migrations/CheckForPreviousReportActionID.js b/src/libs/migrations/CheckForPreviousReportActionID.js
index a61d9bfb08ec..35f862fd5b3a 100644
--- a/src/libs/migrations/CheckForPreviousReportActionID.js
+++ b/src/libs/migrations/CheckForPreviousReportActionID.js
@@ -1,7 +1,7 @@
-import _ from 'underscore';
import Onyx from 'react-native-onyx';
-import Log from '../Log';
-import ONYXKEYS from '../../ONYXKEYS';
+import _ from 'underscore';
+import Log from '@libs/Log';
+import ONYXKEYS from '@src/ONYXKEYS';
/**
* @returns {Promise