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/*", } } ] ], };};