Reduce initial app setup time by 80% In React Native

React-Native has become one of the most emerging frameworks nowadays. It has got so many powerful features like, cross-platform native apps using javascript, fast refresh, huge community, etc., which makes it different from its competition. Code reusability using the concept of the component is one of them. Today we are going to discuss one of the powerful features of the react-native-cli which allows us to reuse our code, configurations, set of rules, etc., into our newly created project and save tons of time and effort.

Some theory

While working in an organisation or team, most probably you will be following some common coding practices, rules, folder structure, set of tools and configurations, etc. When initialising a new project, sometimes it becomes a pain and time-wasting to do all of the things from the scratch for every new project like adding a folder structure, installing the commonly used dependencies, the configuration of the tools like redux, mobex, eslint rules, CI/CD configurations, staging, and production app setup, setting up the splash screen, etc.

Today we are going to talk about this common pain point and try to find a solution to the problem, automate the process, and save at-least 80% of time and resources. In the 0.42.0, Martin Konicek did an awesome job and gave us a gift in the form of the Project Template. I have not found much of the resources talking about this cool feature and seems like it is one of the uncovered features of the react-native-cli. The react-native docs talk about this feature a bit, but only for initialising the project with the typescript template. In reality, it can dramatically change your development experience especially when you are about to create a new project and thinking about initialising your project, and hoping for any solution to pre-configure commonly used libraries, components, logic, etc.

While searching on the internet for the solution, I found this medium article. But unfortunately, it is outdated and does not work anymore.

What is a project template?

As the name suggests, a project template is a template(starter) for your new project which can include any of your custom reusable configuration, components, folder structure, etc. It allows us to initialise our new project with our own starter instead of the default “Welcome to React Native” project. The command to initialise our new project with a custom template looks like this:

npx react-native init <project-name> --template <path-to-template>

Note: The steps shown in this article apply only to the projects initialised using the

react-native init

expo init

To create a template

Let’s get started and see how to make our own custom template. The basic steps of creating the template include:

1. Initialise a new project for template
2. Convert this newly created project into a template
3. Use the template

Initialise a new project for template

Please make sure that you have gone through and implemented all of the steps described in the Initial Getting Started Guide for React-Native Environment Setup. Then create a new folder with any name you like(for example

react-native-template

npx react-native init ProjectName

After the initialisation process, the folder structure will be like this:

react-native-template
└── ProjectName
    ├── android
    ├── ios
    ├── index.js
    ├── App.js
    ├── package.json
    └── ...other files

Now, replace dot(.) with underscore(_) for all of the hidden files in the newly created project. For example, 

.gitignore

_gitignore

.eslintrc.js

_eslintrc.js

This project will act as a starting point for our template. After initialising this project, add your desired custom configurations like:

• Basic folder structure and common components like buttons, headers, etc
• Basic NavigationState management tools like redux, mobx, etc
• Splash screen setup
• Linting rules
• CI/CD setup
• Staging and production environment setup and so on

We need to do these things only once and then it will make our life much easier for the next time as we will automate this process to be completed with only a single command. In this example,

ProjectName

Convert this newly created project into a template

• Rename the

  ProjectName

  folder to

  template

  to make it more clear that it is a template.
• Create a new file at the root level, adjacent to the template folder with the name

  template.config.js

  .

touch template.config.js

Upto this point, your folder structure should look like:

react-native-template
└── template
|   ├── android
|   ├── ios
|   ├── index.js
|   ├── App.js
|   ├── package.json
|   └── ...other files
└── template.config.js

Now add the following inside the

template.config.js

module.exports = {
  placeholderName: 'ProjectName',
  templateDir: './template',
}

More options can be found here. But adding these 2 should do our job and are required. That’s it.

Use the template

Now let’s see how we can use our template to create our next cool project. As mentioned earlier, you can initialise the new project by using the

--template

react-native init

Using local path: For the template to be on the

Desktop

npx react-native init MyApp --template /Users/<username>/Desktop/react-native-template

Using Github: For the GitHub repo link https://github.com/ajaykumar97/react-native-template, the project can be initialised as:

npx react-native init MyApp --template https://github.com/ajaykumar97/react-native-template

Using npm: For the npm package @ajaysidhu/react-native-template, the project can be initialised as:

npx react-native init MyApp --template @ajaysidhu/react-native-template

After the successful initialisation, all of the dependencies will be automatically installed, just like as the traditional

npx react-native

Final thoughts

I found it to be super helpful while initialising any new project with preloaded stuff. It can save the day’s of work for us. My template can be found here. Feel free to use it in your next React-Native project and do let me know in the issues section of the repo for any improvement in the setup.

Thanks

Thanks to Martin Konicek for introducing this awesome feature into the react-native-cli.

Previously published at https://ajay-kumar.dev/writing/create-react-native-template