320 Views

Whats and Hows of React Native Template

In this article we will be exploring, What react native template is and how can we make our own react native template.

What is react native template?

React native template is a project template creation and scaffolding process introduced from React native version 0.42.0. From this version, this newly added feature allows us to create custom, reusable, sharable react native scaffolds.
Once this template is created we can init new react native projects using the scaffold as the base template instead of the default “Welcome to React Native!” template that ships with react native.
The command to init new project using the template looks something like

react-native init myapp --template myFancyTemplate

How to create our own project template

The basic steps involved in creating our own templates are

  1. Init and modify the project as required
  2. Templetifying
  3. Using the template
    Looks simple, and it is simple.

Init and modify the project as required

For this, we are assuming that you are setup for react native development. If you have not yet setup your system for react native development, we suggest you go through the official getting started guide here
Lets us begin by creating a new project

react-native init navdrawer

Now is the time to tweak the template however we like to make a base for all our projects. We add basic stuffs like navigation, state management libraries like redux, setup files and folders as we like. Make a basic template, that is suitable for all kinds of our projects. We do not want to get too specific as it is a base project from which all of our future projects will be derived.
For our template, we are going to add react-navigation library

yarn add react-navigation

Let us also update the render method of App.js, remove everything just put HelloWorld in the text. so that we will later know that template is working as expected when we use it to init our new project.
Here we can do all sorts of things like adding state management library, creating basic themes and styles, organizing folder structure. It depends on the needs of our future projects.

Templetifying

Now the actual process of changing it into template begins. First let us start by adding a new file to our project root called dependencies.json. In this file we add all non core dependencies of our project template. We will create an object that defines the dependencies required by our project.

{
    "react-navigation": "^1.0.0-beta.19"
}

Next we just need to clean up our package.json. Remove everything except the name and the version number. Mine looks like,

{    
    "name": "react-native-template-navdrawer", 
    "version": "0.0.1"
}

Finally, let us remove native ios and android directories. We do not require them in our template.

Using the template
This is simple, to use the template, we simply pass the –template flag to our react-native init command along with the location of our project template.
The location the template can be called from are npm, file://, http://, https:// or git://.

  • npm – To use template from npm, we must name our template with react-native-template- prefix as react-native-template-{template-name}. This is probably the easiest and best way to do.
    Publishing in NPM is super easy. Create account in npmjs.com and in terminal from our template project, enter npm publish and provide your login credentials and you are done. After the template is published to npm, we’d use our template easily to as follows to initiate new project react-native init test --template navdrawer
  • file:// — To use our locally saved template, we’ll need to pass a fully qualified file://path to our init command as `react-native init test –template file:///home/lohanidamodar/projects/templates/react-native-template-navdrawer
  • http:// — And to use our template from http://, https://, or git:// we’d pass the url (any supported by npm) as react-native init test --template https://github.com/lohanidamodar/react-native-template-navdrawer

When using by file://, http://, https://, or git:/ we can name our template however we like. It’s only when installed by npm that it matters to name with react-native-template- prefix.
All the required dependencies in our template’s dependencies.json will be installed, native dependencies will be automaticllay linked.
After initiating a new project using the template, we can directly test it by running react-native run-ios or react-native run-android.

Find the code to this tutorial at GitHub. You can also use this template to create your new react-native project by using following command.

react-native init --template navdrawer

Enjoy developing react-native mobile apps using your own template to scaffold your new project.

Related Posts

This post is trending.

Setting up Ionic View for Testing Ionic App

Introduction Ionic View is by far the best thing Ionic framework provides. The problem with hybrid apps is that we need to […]

Advancde Ionic Components

If you are a Ionic developer, beginner or expert, you will love this project. Publicly being developed in github, ionic3-components repository hosts […]

%d bloggers like this: