DEV Community

Juan Esteban Perdomo
Juan Esteban Perdomo

Posted on

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
Enter fullscreen mode Exit fullscreen mode
  • with yarn
yarn create expo-app -t expo-template-blank-typescript my-app
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • With yarn
yarn add -D module-resolver
Enter fullscreen mode Exit fullscreen mode

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"]
}

Enter fullscreen mode Exit fullscreen mode

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"],
        },
      ],
    ],
  };
};
Enter fullscreen mode Exit fullscreen mode

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,
}
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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',
  },
})
Enter fullscreen mode Exit fullscreen mode

then just we need run the next script:

  • with npm
npm run start
Enter fullscreen mode Exit fullscreen mode
  • with yarn
yarn start
Enter fullscreen mode Exit fullscreen mode

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

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)