How To Make Your Own Custom React Native Templates (2021)
Tags: reactnative, boilerplate, template, custom
Published: 2021-02-16 14:11:18

# 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](https://medium.com/dailyjs/the-1-2-3s-of-react-native-templates-1f5dda037e11)". 

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](https://youtu.be/Jhg88_ohyM0).

# 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

![Demo App of npx init](https://dev-to-uploads.s3.amazonaws.com/i/fc4yk70jcyqoh6ekrqbq.png)

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 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqv17t075fnr4bcp71xo.gif)

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](https://medium.com/dailyjs/the-1-2-3s-of-react-native-templates-1f5dda037e11)
> 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m8it5jup5erhb9b4a6bm.png)

## 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](https://github.com/oblador/react-native-vector-icons). It will have many instructions but follow the part that you see in the image below. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wdzsur8vjjsfhs0eeanl.png)

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)

``` javascript
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 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7sr7do2o3yu6mu2t2l9z.png)

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](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](https://github.com/Esemesek/react-native-new-template)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1v845d7dn17j99c77rxu.png)

## 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](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](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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f9mti6wpybgi3mwpxsqf.gif)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0mk0iaox02ua1ax66jeh.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpxqlddb6r4wyhoate5t.gif)

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jmdeed2j0o4zthl3zefc.gif)


Installation complete:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5d6nbnkg6sturpvz5exq.png)

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](https://www.buymeacoffee.com/royce.chua)