cfatrane/react-native-boilerplate

WIP: Expo & React Native Boilerplate, Eslint, Prettier, Expo Router

React Native Boilerplate + Expo + Typescript

Features 🛠️

• Husky 🐶 : Automatically lint your commit messages, code, and run tests upon committing or pushing.
• Jest : For unit and integration testing
• ESlint : Statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.
• Prettier : An opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
• VSCode : Configuration file and recommended extensions

Soon ⏱️

• Authentication
• Others

Getting Started 🤔

First, run the development server:

npm run start
# or
yarn start
# or
pnpm start
# or
bun start

Open the Expo App on your phone and scan the QR Code.

Scripts

start: "expo start",
android: "expo start --android", # Start with an Android emulator
ios: "expo start --ios", # Start with an iOS emulator
web: "expo start --web",
lint: "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
lint:debug: "eslint --debug",
lint:fix: "eslint --fix .",
ts:check: "tsc",
prepare: "husky install"

Project Structure 📁

├── .eslintcache
├── .eslintrc.js
├── .expo
├── .gitignore
├── .husky
├── .prettierrc
├── .vscode
├── app
│   ├── (tabs)
│   └── _layout.tsx
├── app.json
├── assets
│   ├── adaptive-icon.png
│   ├── favicon.png
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── components
│   └── Button
├── expo-env.d.ts
├── package.json
└── tsconfig.json

VSCode Extensions 💻

Better Comments

The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into:

• Alerts
• Queries
• TODOs
• Highlights
• Commented out code can also be styled to make it clear the code shouldn't be there
• Any other comment styles you'd like can be specified in the settings

ESLint

Integrates ESLint into VS Code. If you are new to ESLint check the documentation.

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

On new folders you might also need to create an .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal with npx eslint --init.

SonarLint

SonarLint by Sonar is a free IDE extension that empowers you to fix coding issues before they exist. More than a linter, SonarLint detects and highlights issues that can lead to bugs, vulnerabilities, and code smells as you create your code. It offers clear remediation guidance and educational help, so you can fix issues before the code is committed. SonarLint in VS Code supports analysis of JS/TS, Python, PHP, Java, C, C++, C#, Go, and IaC code locally in your IDE.

Error Lens

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Learn More 🧠

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Suggestions ☝️

Components

• UI Kitten
• TAMAGUI
• React Native Paper

State Management

• Recoil
• Zustand

Validation

• Joi
• Yup