React Native tsconfig Base URL is not working - reactjs

Question

Why base url and paths work on normal React but not on React Native??
This is my tsconfig file:
{
"compilerOptions": {
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"components/*": ["./components/*"],
"assets/*": ["./assets/*"],
"screens/*": ["./screens/*"],
"navigation/*": ["./navigation/*"],
"api/*": ["./api/*"],
"utils/*": ["./utils/*"],
"#shared/*": [
"../shared/*"
]
}
},
"include": [
"./*"
],
"extends": "expo/tsconfig.base"
}
From App.tsx I tried to import AppNav component from "navigation/AppNav" but it gives error that "Unable to resolve module navigation/AppNav"
I even tried to install modeule-resolver plugin for babel but it didnt work:
module.exports = function(api) {
api.cache(false);
return {
presets: ['babel-preset-expo'],
plugins: [
"nativewind/babel",
[
"module-resolver",
{
"root": ["./"],
"alias": {
"components/*": "components/*",
"assets/*": "assets/*",
"screens/*": "screens/*",
"navigation/*": "navigation/*",
"api/*": "api/*",
"utils/*": "utils/*",
}
}
]
],
};
};
I tried with regex expression but still didnt work
module.exports = function(api) {
api.cache(false);
return {
presets: ['babel-preset-expo', "module:metro-react-native-babel-preset"],
plugins: [
"nativewind/babel",
[
"module-resolver",
{
"root": ["."],
"alias": {
"components/(.+)": "./components/\\1",
"assets/(.+)": "./assets/*",
"screens/(.+)": "./screens/*",
"navigation/(.+)": "./navigation/\\1",
"api/(.+)": "./api/*",
"utils/(.+)": "./utils/*",
}
}
]
],
};
};