Skip to content

Instantly share code, notes, and snippets.

@LeslieOA
Created August 20, 2020 13:33
Show Gist options
  • Save LeslieOA/46445c6311c27497b412400d905f1653 to your computer and use it in GitHub Desktop.
Save LeslieOA/46445c6311c27497b412400d905f1653 to your computer and use it in GitHub Desktop.
Expo TypeScript Absolute Path's
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.js',
'.android.js',
'.js',
'.ts',
'.tsx',
'.json'
],
alias: {
'tests': ['./tests/'],
'@components': './src/components',
'@views': './src/views',
'@assets': './src/assets',
}
}
]
]
};
};
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true,
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"tests": ["tests/*"],
"@components/*": ["src/components/*"],
"@views/*": ["src/views/*"],
"@assets/*": ["src/assets/*"],
}
}
}
@LeslieOA
Copy link
Author

LeslieOA commented Aug 20, 2020

Replace both the babel.config.js and tsconfig.json in a new Expo TypeScript project with the above.

The above assumes a src folder with the children assets, components and views.
Import's are now:

import { Fancy } from '@components/FancyComponent', etc.

For more options, see Using Custom Path Aliases with TypeScript

@LeslieOA
Copy link
Author

Also note: it's worth installing Expo globally for further development: npm install -g expo-cli.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment