So… Let’s go to start a new Project using React Native with expo and typescript!

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

And the result Will be this:

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