1,948 reads

Reduce initial app setup time by 80% In React Native

by Ajay KumarMay 28th, 2021

Too Long; Didn't Read

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 a powerful feature of the React-Native CLI which allows us to reuse our code, configurations, set of rules etc into our newly created project and save our tons of time and efforts.

Company Mentioned

featured image - 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 , 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 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

, not with the

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:

Initialise a new project for template
Convert this newly created project into a template
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 for React-Native Environment Setup. Then create a new folder with any name you like(for example

react-native-template

). Now, initialise a new project inside this folder as you usually do for a new React-Native project. You can name it with any name you want but keep in mind that we will be using this project name, later on, to define in our template configuration to replace all of the occurrences of this name.

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

will become

_gitignore

.eslintrc.js

will become

_eslintrc.js

, etc.

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

is a special word(as I mentioned earlier) that will be replaced with your new app.

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

file:

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

More options can be found . 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

flag to the

react-native init

command and passing the path to the template. Here comes another cool part of the story. The template path can be any one of the npm package, GitHub repo, or even the local directory file as mentioned . I have created a starter template for the demonstration which you can find and I have published it into the as well(you can publish it to the npm just like a normal npm package as described ).

Using local path: For the template to be on the

Desktop

(in case of Mac), the project can be initialised as:

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

Using Github: For the GitHub repo link , the project can be initialised as:

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

Using npm: For the npm package , 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

but with our custom template.

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 . Feel free to use it in your next React-Native project and do let me know in the section of the repo for any improvement in the setup.