So… Let’s go to start a new Project using React Native with expo and typescript!
Tags: programming, reactnative, typescript, tutorial
Published: 2023-03-08 02:18:44

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
```bash
npx create-expo-app -t expo-template-blank-typescript my-app
```

- with yarn
```bash
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
```bash
npm install -D module-resolver
```

- With yarn
```bash
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`
```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`
```javascript
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

```json
{
  "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`

```tsx
import { Text } from 'react-native';

export const TestComponent = () => (
  <Text>TEXT FULL UPPERCASE FOR TEST THE ABSOLUTE IMPORTS!! ♥</Text>
)
```

`App.tsx`
```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
```bash
npm run start
```

- with yarn
```bash
yarn start
```

open the app expo-go from your mobile installed previously and use the code qr that will return the same terminal

And the result Will be this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fo2uckpkb4o6xnpbs13i.jpg)

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