So, I have been working with React Native for a long time, and every time I start a new project, I find myself repeating the same steps when configuring the libraries. So, I thought of creating a boilerplate for myself with commonly used libraries that I use in almost all of my projects.

This is a guide on how to create yours using react-native-cli

Using react-native-cli

Step 1 :

Create a new folder

mkdir rn-boilerplate
cd rn-boilerplate

You can name your project anything you like; here, we've used rn-starter

Now run npm init command

npm init

This will open a prompt where you can enter the necessary details:

{
  "name": "rn-starter",
  "version": "1.0.0",
  "description": "A boilerplate for you next react-native app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Hritik Singh",
  "license": "ISC"
}

Step 2 :

Now, create two files, template.config.js and script.js You can do this in the terminal or using a GUI:

touch template.config.js script.js

The template.config.js file contains details about the template name, placeholders, etc., while script.js will execute after the successful template initialization.

Add following in the template.config.js

module.exports = {
  // Placeholder name that will be replaced in package.json, index.json, android/, ios/ for a project name.
  placeholderName: 'ProjectName',
 
  // Placeholder title that will be replaced in values.xml and Info.plist with title provided by the user.
  // We default this value to 'Hello App Display Name', which is default placeholder in react-native template.
  titlePlaceholder: 'Hello App Display Name',
 
  // Directory with the template which will be copied and processed by React Native CLI. Template directory should have package.json with all dependencies specified, including `react-native`.
  templateDir: './template',
 
  // Path to script, which will be executed after initialization process, but before installing all the dependencies specified in the template. This script runs as a shell script but you can change that (e.g. to Node) by using a shebang (see example custom template).
  postInitScript: './script.js',
};

The postInitScript is optional. If you don't want to execute anything after initialization, you can simply comment out the 3rd line.

Inside script.js add this

#!/usr/bin/env node
 
console.log('This is post init script');

Step 3 :

Generate a new project with a Placeholder name in the template directory. You can do this by running the following command:

npx react-native init ProjectName --directory template

Step 3 :

• Go to template
• Run the application in android and ios
• Make changes and configure your app according to your need

Step 4 :

To generate a new project using your template, you have to host it on GitHub in a public repository.

Step 5 :

Create a new project using your boilerplate by using URL

npx react-native init YourAppName --template https://github.com/hrithik73/rn-starter

Replace the YourAppName to whatever the application name you want and the github url will be your boilerplate's github url

Step 6:

You can generate project with github url alone but if you whish to make make a library or publish on npm , you can simply publish using npm cli and give a unique name for the project after that you can generate using the npm package name

npx react-native init YourAppName --template @hrithik73/rn-starter

You can checkout the the finished version of our boilerplate here

https://github.com/hrithik73/rn-starter https://www.npmjs.com/package/@hrithik73/rn-starter