Configuring Absolute Imports in React and React Native with Typescript

There are two great reasons to move to absolute imports. One is to avoid long relative paths, and the other is to make sure imports don’t break when moving stuff around. Read more about it here.

As before, we will explore the simplest ways to configure this for our apps.

React Native

We will do this in two stages.

STEP 1

First, let's tackle this for the packager. We do this by using a babel plugin called babel-plugin-module-resolver.

yarn add -D babel-plugin-module-resolver

And we configure this in our babel.config.js by adding a new plugins key and specifying our alias there

module.exports = {
presets: ['module:metro-react-native-babel-preset'], // existing
// add the following
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'@src': './src',
},
},
],
],
};

Here we have configured only one universal alias, but this can theoretically have custom root directories and multiple aliases. See example here

STEP 2

Now we have to make sure that the typescript engine built into VSCode also recognizes this, and does not show red squigglies!

For this, we will configure the same alias in our tsconfig.json. There are two properties of interest to us there, both of which are commented out in the default file. These are baseUrl and paths. This is what we want them to look like (similar to the babel config):

"baseUrl": ".",                                      
"paths": {
"@src/*": ["src/*"],
},

And that’s it. Now you can use absolute import WITH aliases in React Native. For example,

// this
import { PermissionsPage } from './views/PermissionsPage';
// now becomes
import { PermissionsPage } from '@src/views/PermissionsPage';

React

React does not allow us to use aliases (unless we really customize the packager config). But we can still use absolute imports (which is 90% of what we want, anyway)

The configuration is very easy. We just have to add ONE little bit to our tsconfig.json

In the compilerOptions, we add one line

{
"compilerOptions": {
// existing stuff
"baseUrl": "./" // add this line
},
"include": ["src"] // existing
}

And now we can start referencing everything as absolute paths. For example,

// this
import { PermissionsPage } from './views/PermissionsPage';
// now becomes
import { PermissionsPage } from 'src/views/PermissionsPage';

The only difference is that there is no aliasing.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Splash Screen in React Native Android | IOS | (2020)

Splash Screen | How to implement Splash Screen In IOS | Android | Free Tutorials India

Beep beep boop I’m a bot

Redux withTypeScript — the proper way to strong typing consistent with Redux Toolkit

Saturn 0.2.0 — the international update.

A screenshot of Saturn’s korean translations file.

RxJS: How to Use Lettable Operators and Promises

Behind the scenes eEat token is building a #token that will revolutionize the hospitality industry.

React-Native Login Screen

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Manu Rana

Manu Rana

More from Medium

E2E Tests in React Native w/ Detox

Typescript in React-Native

Implementing redux-toolkit to React Native

Integrating Giphy API in React Native