How To Quickly Create A Custom Template In React Native | Hacker Noon

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 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 tons 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-configured 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

, 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:

  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


). 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:

└── 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, 


will become



will become


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


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

Convert this newly created project into a template

  • Rename the

    folder to


    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


touch template.config.js

Upto this point, your folder structure should look like:

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

Now add the following inside the



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


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 here. I have created a starter template for the demonstration which you can find here and I have published it into the npm as well(you can publish it to the npm just like a normal npm package as described here). Let us see how to use the template directly from GitHub:

Using local path: For the template to be on the


(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

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 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 to Martin Konicek for introducing this awesome feature into the React-Native CLI.

Previously published at


Join Hacker Noon

Create your free account to unlock your custom reading experience.

read original article here