Skip to content

Custom React Native Template

Published: at 23:37 UTC+08:00Suggest Changes

When I use the official template which recommend in the React Native doc, I have some trouble with it. Such as the version of ruby is different with recommended version and I have to config prettier, eslint, etc every time.

Ideal React or React Native project template need to contain basic configuration as below:

  1. Format and linter configuration
  2. Basic dependencies
  3. Gemfile is only apply to iOS project, so this file need to move into the iOS folder

Thanks for devaslife’s video, this video is incredible and help me a lot.

The template I made include the following configurations:

  1. Add prettier and eslint configuration
  2. Add husky and lint-staged which I used every day
  3. Add wonderful open source dependencies, such as
    • @react-navigation/native and @react-navigation/native-stack for navigating between screens.
    • react-native-safe-area-context
    • react-native-gesture-handler is used to handle user gesture
    • react-native-reanimated, this is an elegant animation library in React Native
  4. Move Gemfile into iOS folder
  5. Update ruby version to 2.7.6, Official Ruby version

Full template source code is here

How to use

npx react-native init YourProjectName --template @swizm/react-native-template

Previous Post
Typescript decorators 装饰器
Next Post
Swift Extensions