React Native absolute paths don't seem to work

Question

I try to configure React Native to use absolute paths to ease the imports pain. I tried various methods and nothing seem to work for me. There's my tsconfig.json:

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "jsx": "react",
        "lib": ["es6"],
        "moduleResolution": "node",
        "noEmit": true,
        "strict": true,
        "target": "esnext",
        "baseUrl": "src"
    },
    "include": ["src"],
    "exclude": [ "node_modules", "babel.config.js", "metro.config.js"]
}

And babel.config.js:

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [['module-resolver', { root: ['./src'] }]],
}

I tried with, or without babel plugin. Tried different configurations I found googling. I tried adding "baseUrl": "src" without paths option, or "baseUrl": "./src" . I tried different variations of "paths": {"*": ["./src/*"]} , "paths": {"*": ["src/*"]} and so on. I tried adding "include": ["src"] or removing it. VS Code understands imports very well, but when I run the app, it will crash on absolute paths. Is there anything obvious I'm missing?

Answer 1

Try adding a jsconfig.json in your root folder like:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

If you are using TS you can configure the baseUrl setting inside the compilerOptions of your project's tsconfig.json file.

So now, if your src folder contains a components one, you can do:

import MyComponent from 'components/MyComponent';