26
loading...
Starting React Native Project in 2022
There are many ways to start new React Native project. Here we will be using Expo CLI because it's easier and it has nice defaults out of the box. Also, we will add TypeScript, ESLint, Prettier, and some custom configurations that will make our development process better.
TLDR You can use one command expo init --template @vladimir-vovk/expo-bare-typescript to create new React Native project with all tools already setup for you (see README for details) or follow instructions below. 🤓
Please refer to official React Native and Expo documentation for more details. 🤩
We will need several tools before we start.
Then install Expo CLI with
npm install --global expo-cli or yarn global add expo-cli.Awesome! 👍🏻 Now we have two options to start new React Native project with
Expo CLI: "managed workflow" and "bare workflow". Let's briefly look into each variant further. For more in depth comparison please read the official Expo doc.Managed workflow is the easiest way. Use it if you are new to mobile development and want to start developing your project right away without spending much time on setup and learning how to build native binaries for iOS and Android.
expo init command.blank (TypeScript) template.cd <your-project-name>.yarn start to start Metro Bundler.i to start the iOS simulator or a to run the Android emulator.Use bare workflow if you are already familiar with mobile development or want to use some libraries (native code) that is not supported by Expo.
expo init command.minimal template.cd <your-project-name>.yarn start.Check React Native Setup Guide to ensure that everything that needed to build binaries is installed on your machine.
Use
yarn ios or yarn android commands to build and run the app on the iOS simulator or Android emulator.📱Let's add TypeScript support.
tsconfig.json file in your project root: touch tsconfig.json.App.js to App.tsx: mv App.js App.tsx.yarn start. It will prompt you to install the required dependencies (typescript, @types/react, @types/react-native), and automatically configure your tsconfig.json.To use absolute path imports, e.g.
import { ComponentA } from 'src/components/A' (notice path starts with src), we need to add baseUrl and paths parameters to tsconfig.json.{
...
"baseUrl": "./",
"paths": {
"src/*": ["src/*"]
}
...
}Also we need to create
src/package.json file.{
"name": "src"
}It's good to have all source files in one folder. So let's move
App.tsx to src with mv App.tsx src command.Next we need to fix import inside
index.js....
import App from 'src/App'
...module.exports = {
semi: false,
trailingComma: 'none',
singleQuote: true,
printWidth: 100,
tabWidth: 2,
useTabs: false,
}Starting from React 17 it's now not necessary to import React to use JSX. To be able to use this new feature we need to update
babel.config.js (line 4).module.exports = function(api) {
api.cache(true);
return {
presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]]
};
};And restart Metro Bundler. Press
Ctrl-C to stop it and run yarn start to start Metro Bundler again.We can use TypeScript compiler and ESLint for this.
Let's add new
check-typescript script to our package.json....
"scripts": {
...
"check-typescript": "tsc --noEmit"
},
...Now we can run
yarn check-typescript command to check our code for errors with TypeScript compiler.ESLint has a lot configuration options and rules. Let's start with Expo eslint-config-universe package.
yarn add --dev eslint-config-universe
yarn add --dev eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add --dev eslint-plugin-react-hooks
yarn add --dev eslint-import-resolver-typescriptAdd
.eslintrc.js config file to the project root.module.exports = {
extends: ['universe', 'universe/shared/typescript-analysis', 'plugin:react-hooks/recommended'],
overrides: [
{
files: ['*.ts', '*.tsx', '*.d.ts'],
parserOptions: {
project: './tsconfig.json'
}
}
],
settings: {
'import/resolver': {
typescript: {} // this loads <rootdir>/tsconfig.json to eslint
}
}
}Add new
check-eslint script to our package.json....
"scripts": {
...
"check-eslint": "eslint './src/**/*{js,ts,jsx,tsx}'"
},
...Now we can run
yarn check-eslint command to check our code for errors with ESLint. And yarn check-eslint --fix to fix errors automatically.Let's combine TypeScript and ESLint checks together so we can run both at once.
Add new
lint script to our package.json....
"scripts": {
...
"lint": "yarn check-typescript && yarn check-eslint"
},
...Post your favourite tools in comments, press 💖 button and happy hacking! 🙌🏻
26