Unable to import in react-native project from symlink which resides in the react-native project itself

frontend/app-core/services/ApiGateway.ts -> actual file where I want to import code from react-native project frontend/react-native-app/services -> symlink of above frontend/react-native-app/screens/Auth/tokenStorage.ts -> which I want to import in the ApiGateway.ts file.

Error when I use alias which is configured successfully. None of these files exist:

• screens/*/Auth/tokenStorage(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• screens/*/Auth/tokenStorage/index(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx) 1 | import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';

2 | import { retrieveTokenSecurely } from '@screens/Auth/tokenStorage'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 3 | 4 | // Function to create an axios instance 5 | export const createApiGateway = (baseURL: string, timeout = 10000) => { at ModuleResolver.resolveDependency (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:112:15) at DependencyGraph.resolveDependency (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/node-haste/DependencyGraph.js:235:43) at /Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/lib/transformHelpers.js:156:21 at resolveDependencies (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25) at visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30) at async Promise.all (index 9) at async visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5) at async Promise.all (index 3) at async visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5) at async Promise.all (index 5)

Error without alias:

Error: Unable to resolve module ../screens/Auth/tokenStorage from /Users/amit/Projects/projecttracker/frontend/app-core/services/ApiGateway.ts:

None of these files exist:

• ../app-core/screens/Auth/tokenStorage(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• ../app-core/screens/Auth/tokenStorage/index(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx) 1 | import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';

2 | import { retrieveTokenSecurely } from '../screens/Auth/tokenStorage'; | ^ 3 | 4 | // Function to create an axios instance 5 | export const createApiGateway = (baseURL: string, timeout = 10000) => { at ModuleResolver.resolveDependency (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:112:15) at DependencyGraph.resolveDependency (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/node-haste/DependencyGraph.js:235:43) at /Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/lib/transformHelpers.js:156:21 at resolveDependencies (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25) at visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Promise.all (index 9) at async visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5) at async Promise.all (index 3) at async visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)

I added following in the babel

plugins: [
    [
      'module-resolver',
      {
        root: ['./'], // Assuming your source
        alias: {
          '@components': './components',
          '@screens': './screens',
          '@services': '../app-core/services', //  //change this for production, move services to project folder
          '@_services': './services',
          "@constants": "./constants",
          "@redux" : "./redux"
        },
      },
    ],
  ],

& following to the tsconfig & it worked fine

 "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["./components/*"],
      "@screens/*": ["./screens/*"],
      "@services/*": ["./shared/services/*"],
      "@_services/*": ["services/*"],
      "@constants/*": ["./constants/*"],
      "@redux/*" : ["./redux/*"]
    },
    "preserveSymlinks": true
  }