Skip to content

A simple React Native template with ESlint, Enzyme, Flow, Prettier and custom scripts

License

Notifications You must be signed in to change notification settings

lucianomlima/react-native-template-basic

Repository files navigation

React Native Basic App Template

A simple basic template to start a new React Native app with ESLint and custom scripts.

Requirements

  • node
  • react-native-cli
  • yarn

Usage

Create a new project passing a template:

react-native init [ProjectName] --template basic-app

Wait for download dependencies.

Install Husky git hooks

Git hooks is not installed by default, because when start a new React Native app, you don't have a git repository started. To fix this, first init git repo with git init . inside you [ProjectName] dir and after this run on terminal:

node node_modules/husky/lib/installer/bin install

Finish installation

Run node setup.js to inject custom scripts and remove unnecessary files.

For VSCode users

If you use Path Intellisense extension add the following to settings.json:

  "path-intellisense.mappings": {
    "~": "${workspaceRoot}/src"
  }

Flow configuration

Open .flowconfig file. Go to the [options] section and find the line where is module.name_mapper. Add this to the next line:

module.name_mapper='^~\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'

It should look like the following:

module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
module.name_mapper='^~\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'

Includes

  • ESlint (extends Airbnb)
  • Husky
  • Lint Staged
  • Prettier
  • Flow
  • Enzyme

Custom Scripts

  • android:install - Run in Release mode
  • ios:install - Run in Release mode
  • project:clean - Clean project
  • prettier:check - Check for unformatted files
  • prettier:all - Format files
  • flow - Run Flow
  • lint - Run lint
  • start - Start Metro Bundler
  • start:clean - Start Metro Bundler without cache
  • test - Run jest
  • test:watch - Run jest in watch mode

Contributing

Clone this repo with git clone https://github.com/lucianomlima/react-native-template-basic react-native-template-basic-app cause npm needs project dir name to be equal to project name in package.json.

To execute the project with your changes, you can use the absolute path of cloned repo with react-native-cli:

react-native init [PROJECT_NAME] --template file:///path/to/repo

License

MIT