Overview

I was looking for a tutorial on how to make my own React Native (RN) templates that I could init with new RN projects using the flag --template after the init

npx react-native init someproject --template mytemplate

because I would always see on the internet are premade templates that I didn't really want to use initially because I wanted something more simple and specific that I could easily work my way around without much trouble.

I happened to find this helpful Medium Article by Chris Geirman of the Daily JS back in 2017 titled "The 1-2-3's of React Native Templates".

I didn't get to finish it because I encountered some problems when trying to do it most likely because it was already outdated. One of the errors shown by React Native led me to making this article.

I made this as simple as possible so that anyone could follow along and it get it done immediately.

Main Steps Involved

1. Creating the template's repository
2. Creating the app template (make the React Native project you want to use as your template)
3. Creating the actual template structure (the app template + other config files)
4. Testing it!

If you ever get lost or stuck refer to this or the Youtube Video if you want a video based guide/walkthrough here on Youtube.

Background

A React Native template is simply like the app that you first see when you run the command

npx react-native init someproject

Then run with either npx react-native run-android or
npx react-native run-ios such as the Android App shown below

The difference with custom React Native templates is that we get to put what is in the app by default such as Navigation, A State Management Library, UI libraries, AsyncStorage, and more. We'll keep things simple for now.

Demo

I am currently making my own preferred custom React Native template but you can try a demo app by running the command in your terminal below which will create the app test

npx react-native init test --template https://github.com/roycechua23/react-native-template-simpleredux-boilerplate1.git

Then run with either cd someproject && npx react-native run-android or
cd test && npx react-native run-ios such as the Android App shown below.

The result should be

Minimal effort and I now have a UI Framework with React Navigation as well Redux (behind the scenes) already setup.

Let's Start

First, it's convenient to tell you that this custom template can either be on your computer as a repository or on remote repositories on Github, Gitlab, Bitbucket so on..

As mentioned by Chris Geirman on his Medium Article

Your template can be called from npm, file://, http://, https://, or git://.

Initial Repo Setup

1.) I'm going to setup a sample repository on Github called testRNTemplate (you can name yours whatever you want). This will contain the sample template for this article.

Create Initial Template App

2.) On your local machine, open the terminal and create an initial React Native App using

npx react-native init ProjectName

This command should install the latest stable React Native version.

Note: It's absolutely important to follow the capitalizations in exact name ProjectName because the flag --template will convert ProjectName into the name of your app.

3.) Run the App using

cd ProjectName

then

yarn run android

If you are on Mac

yarn run ios

Important Note: For React Native projects running on the latest version 0.63 or 0.64. Please make sure that your Cocoapods version is on version 1.10.1 to avoid any errors in running the iOS app. You can update using this command:

sudo gem install cocoapods

Configuring the Template App

4.) When you finally get your App try to run it first and make sure that it installed successfully by displaying the default React Native Welcome Screen.

Installing Project Dependencies and Setup

Picture of iOS and Android App

4.1) In my case, I wanted React Navigation library and a UI framework like React Native Paper with React Native Vector Icons pre-installed so I install them using yarn

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/stack

yarn add react-native-paper
yarn add react-native-vector-icons

Please take note of react-native-vector-icons setup instructions on Github https://github.com/oblador/react-native-vector-icons. It will have many instructions but follow the part that you see in the image below.

I added this library in because out of all the starting libraries this is where I struggled with when I was beginning to learn the react-native-cli.

Then finalize the installation on ios by using the command

npx pod-install ios

Testing new libraries on App.js (as a demo)

4.2) We should check if the installation of the packages was successful by changing the code in our app.js with the following code below (you can copy paste it directly)

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';
import { Button, Title } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const ProfileScreen = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Title>Welcome to the Profile Screen!</Title>
      <Button mode="contained" icon="home" color="blue" 
        onPress={()=>navigation.navigate("Home")}>
          Go to Home Screen
      </Button>
    </View>
  )
}

const HomeScreen = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Title>Welcome to React Native Home Screen!</Title>
      <Button mode="contained" icon="account" color="blue" 
        onPress={()=>navigation.navigate("Profile")}>
          Go to Profile Screen
      </Button>
    </View>
  )
}

const Stack = createStackNavigator();

const App = () => {
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} 
            options={{headerShown:false}} 
          />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center'
  }
});

export default App;

We crammed a lot of code into the app.js just to see if everything works (navigation, paper UI, and the icons).

4.3) Then run yarn run android and yarn run ios (if you are on mac). The result should be

From here, You can customize it based on your needs or just simply what you want your RN Template to look like. After that we can finally start making the template structure.

Creating the actual template structure

If you've encountered problems, you can refer to the completed project here https://github.com/roycechua23/testRNTemplateProject

To make our custom React Native we need to follow this structure Esemesek on Github https://github.com/Esemesek/react-native-new-template

Breaktime

Fun story, I was following the earlier blog when I encountered an error saying something's wrong with my template and I the error messages pointed me to esemek's github repository (above) which should mean that this is the official.

I did end up finding the official React Native Guide that points to esemek's repo but it wasn't easy to find because it's in the init.md of the react-native-community/cli repository here https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template

It was a real adventure (trust me, you don't want to repeat it) trying to find this but anyway let's move on.

Continuation

5.) Download or clone the repository on https://github.com/Esemesek/react-native-new-template

6.) On your file explorer, create a new folder and for convenience name it after your template repository in my case testRNTemplate then rename your ProjectName folder to template then copy it or move it (like I did) over to the newly created folder

7.) Copy over package.json, script.js, and template.config.js from the react-native-new-template folder over to your newly created testRNTemplate folder.

8.) In the testRNTemplate folder modify the contents of package.json with your details like this

{
  "name": "testrntemplate",
  "version": "0.0.1",
  "description": "React Native Template",
  "repository": "https://github.com/roycechua23/testRNTemplate.git",
  "author": "Royce Chua",
  "license": "MIT"
}

Note: Please remember to change your repository based on your specific repository because that repository is specific to the repository I made in Step 1.

9.) At the testRNTemplate folder, open a terminal and you can now push all of the code to the repository we created in 1.) using git. You can refer to these commands

git init 
git add . 
git commit -m "first commit"
git remote add origin https://github.com/roycechua23/testRNTemplate.git
git branch -M main
git push -u origin main

10.) Give it a try by opening a terminal and running

npx react-native init SomeApp --template https://github.com/roycechua23/testRNTemplate.git

Installation complete:

You should see the same screens we made a while ago on Android and iOS. This template can be reused over and over again saving you time and trouble.

If this article/blog/tutorial helped you and you would like to keep supporting my work, I would appreciate it if you would buy me a coffee here: https://www.buymeacoffee.com/royce.chua