How to configure Expo to allow global module imports? - react-native

Question

I am looking for a way to get rid of these
import { get_records } from ../../../../store/actions/async';
To be honest I tried a lot of tricks:
Using a package.json in the src/ with {"name": "#app"} and trying to use:
import { get_records } from '#app/store/actions/async';
Using the React Native AppRegistry name:
import { get_records } from 'main/src/store/actions/async';
The same questions goes for assets.
I've seen solution with Webpack and Babel but I don't use them with React Native.
How do you manage to do that?

Answer 1

If you are using Expo, you must be using babel because only ES6 version of the libraries are shipped. Even projects created with react-native init come with babel by default. Check your project folder, it should have a .babelrc file.
You can then use babel-plugin-root-import:
import { get_records } from '~/store/actions/async';
.babelrc:
{
"presets": ["babel-preset-expo"],
"plugins": [
[
"babel-plugin-root-import",
{
"rootPathSuffix": "src"
}
]
]
}

Answer 2

Actually I was using Babel without noticing.
npm install --save-dev babel-plugin-module-resolver
npm install --save-dev eslint-import-resolver-babel-module
.babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"alias": {
"~mobile": "./src",
"~assets": "./assets"
}
}]
]
}
.eslintrc
{
"settings": {
"import/resolver": {
"babel-module": {
"alias": {
"~mobile": "./src",
"~assets": "./assets"
}
}
}
}
}
Then I use it like that:
import { addToFavorite, removeFromFavorite } from '~mobile/store/actions';
await Font.loadAsync({
'cabin-reg': require('~assets/fonts/Cabin/Cabin-Regular.ttf'),
'league-spartan': require('~assets/fonts/LeagueSpartan/leaguespartan-bold.ttf')
})