How to reduce 90% of the work in the initial setup of your React Native project.

Photo by Ferenc Almasi on Unsplash

Hi, if you are like me and constantly create new projects to test libraries, concepts or just want to implement an idea that popped up in your head, you may have faced the pain of setting up libraries like react-navigation or redux or even tests. It is the kind of repetitive work that doesn't change often, so, we can, and should optimize it.

In order to optimize the initial setup or your react-native project, just use my latest template and you should be fine:

npx react-native init MyApp --template react-native-template-ts-redux-navigation

The End

Jokes a part, templates are one of the best approaches for this, and probably you already have one ready with a few or just some changes to go.

What is a Template?

Templates in React or React Native is a pre shaped app that already have implemented the subject of that template, today the more common is the typescript template, which will change soon as react-native is moving to a typescript first approach.

With a template you can have all the dependencies and folder/files structure you want to start a new project, in my case I wanted react-native-vector-icons, redux and react-navigation (with routes and tabs configured) all of that shipped with typescript out of the box, without forgetting the tests (using testing library).

Create your own template

The easiest way to create your own template is to create the model app you want, with a generic implementation of some libraries and the project structure you most use as default. After creating this project and testing it, I recommend to save a copy of it on its own repo, like I did here. With a current default project for your template, it is easier to implement and test things.

After finishing it, I would recommend clone that project in a new folder and do not install or build anything, to avoid sending unnecessary folder/files as accident.

After cloning your repo just change the name of the folder to template:

We need now at least two files (template.config.js and package.json), and the structure of your project will look like this:

YourTemplate
 | template
   | ... cloned repo content
 | template.config.js
 | package.json

template.config.js will have the following content:

module.exports = {
  // Placeholder used to rename and replace in files
  // package.json, index.json, android/, ios/
  placeholderName: "ProjectName",

  // Directory with template
  templateDir: "./template",

  // Path to script, which will be executed after init, in case you have a script
  // to execute
  // postInitScript: "./script.js"
};

In order to get a good package.json file, I would recommend to create it from scratch running npm init on terminal:

{
  "name": "react-native-template-ts-redux-navigation",
  "version": "0.0.1",
  "description": "React Native Template with Typescript, Redux and React Navigation setup",
  "repository": "git@github.com:BenHurMartins/react-native-template-ts-redux-navigation.git",
  "author": "Ben Hur Martins <benhur.martins@hotmail.com>",
  "license": "MIT"
}

With all that ready you can create your template repo and send it to Github, and now, before publishing anything, we should test the template, you can use the following command

npx react-native init MyApp --template https://github.com/BenHurMartins/react-native-template-ts-redux-navigation

Publishing your template

Your template is up and running? Do you want to share it with the dev community? Just publish it on NPM with a few steps:

• create your account on npm if you don't have it yet — https://www.npmjs.com
• Check if there is not another template with the same name as yours.
• Templates by convention should start with react-native-template-…
• Login on your terminal:

npm login

• Publish your package:

npm publish

Hope this tutorial can help you, and if you already have a favorite template, share it with us commenting it here, thanks.