In this post and other next post I’ll be create a some app using this technologies (React Native with expo) so… with this idea I wan’t to do the all config for have a linter in this Project, the commitlint for have a estándar each commit that we want.
Like always before to start any Project we need start using a commands, the first step is create a Project with expo and using typescript like this:
- with npm
npx create-expo-app -t expo-template-blank-typescript my-app
- with yarn
yarn create expo-app -t expo-template-blank-typescript my-app
This command Will create a folder called my-app where Will be our Project, after that we’ll need make some configuration for can run the Project in our device android and can have absolute imports
This in the tree that we have of this Project
.
├── App.tsx
├── README.md
├── app.json
├── assets
│ ├── adaptive-icon.png
│ ├── favicon.png
│ ├── icon.png
│ └── splash.png
├── babel.config.js
├── package.json
├── tsconfig.json
└── yarn.lock
Depending if you used npm or yarn you’ll have a file lock called like yarn-lock or package-lock.json
So... after that I want have import absolute using in this Project, but before can import something I need do some config, follow me ;3
First we need install module-resolver like dev dependency
- With npm
npm install -D module-resolver
- With yarn
yarn add -D module-resolver
After this, we can change the next file adding to file config of typescript this rute absolute, for last we need change file config babel adding the package downloaded beforely
tsconfig.json
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"module": "commonjs",
"noEmit": true,
"target": "es6",
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true,
"baseUrl": ".",
"paths": {
"@Musicmate/*": ["src/*"]
}
},
"exclude": ["node_modules"]
}
Is very important that you use the same name and use the first Word like capitalizer because if you only have this rute absolute in lower case the Project React native expo Will have error to build the app on your device
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
alias: {
"@Musicmate": ["./src"],
},
extensions: [".js", ".jsx", ".ts", ".tsx"],
},
],
],
};
};
If all be working correctly, we Will can imports like absolute paths, but before to start for first time this Project, we’ll need to do the last config for can Access to same network ip without any error
For some routers to have another config, if you use the command for start the Project somes people will not have the response satisfactory (error for not connect your devices using the app expo go installed from Google play)
Change the package.json in section scripts, in specific the command start
{
"name": "my-app",
"version": "0.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start --tunnel",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
},
"private": true,
}
Using the flag –tunnel we’ll can run correctly the project and connect using the app expo go (if we are using the same network that we have running our Project)
After that you can create a some component in the folder components and import on the file Main.tsx for test if the absolute import has working
src/components/TestComponent.tsx
import { Text } from 'react-native';
export const TestComponent = () => (
<Text>TEXT FULL UPPERCASE FOR TEST THE ABSOLUTE IMPORTS!! ♥</Text>
)
App.tsx
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { TestComponent } from '@MyApp/components/TestComponent';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<TestComponent />
<StatusBar style="auto" />
</View>
);
}
const style = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
})
then just we need run the next script:
- with npm
npm run start
- with yarn
yarn start
open the app expo-go from your mobile installed previously and use the code qr that will return the same terminal
For the next I’ll be using the packages eslint, prettier, husky and lint-staged for make ever commits with pre-commits and lint all code that want to do a commit
thanks for arrive until here, ;3 I'm still training my english, and if you want give me some of feedback, I'll be thanksful
Top comments (0)