In my react native project, I am trying to make aliases for paths so that I can have cleaner imports like so

import A from '../../components/a'

vs

import A from 'components/a`

I have npm tsconfig-paths installed and my tsconfig looks like this

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["assets/*"],
      "@screens/*": ["src/screens/*"] 
    }
  }
}

but in my code on VS Code, it shows an errors saying cannot find module when I try to do import like so:

import {componentA} from '@screens`;
const bgimage = require('assets/someImage.jpg')

Both screens and assets are not being recognized as modules.

How can I setup my react native project using the Metro transpiler to have alias importing?