DEV Community

Cover image for How To Make Your Own Custom React Native Templates (2021)
Royce Chua
Royce Chua

Posted on • Updated on

How To Make Your Own Custom React Native Templates (2021)

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
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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

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.

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

then

yarn run android
Enter fullscreen mode Exit fullscreen mode

If you are on Mac

yarn run ios
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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

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

Alt Text

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

Alt Text

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

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

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

Alt Text

Installation complete:
Alt Text

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

Oldest comments (20)

Collapse
 
paolosantarsiero profile image
paolosantarsiero

For me not work. This is the repository, so can you check it if is right?
github.com/paolosantarsiero/templa...

Collapse
 
paolosantarsiero profile image
paolosantarsiero • Edited

The erros seems:
1). (node:26953) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency.
2) Removing module templateWebView...
error This module isn't specified in a package.json file.
info Visit yarnpkg.com/en/docs/cli/remove for documentation about this command.
warn Failed to clean up template temp files in node_modules/templateWebView. This is not a critical error, you can work on your app.

Collapse
 
roycechua profile image
Royce Chua

Hi paolosantarsiero, may I know what node version you are using? this might be related to the warning in 1. For 2. I suspect this is a problem with your package.lock.json and yarn.lock. Normally, you should only stick to one package manager to avoid this so please delete either package.lock.json or yarn.lock then try again.

Collapse
 
criszz77 profile image
criszz77

This template only works with the new CLI. Make sure you have uninstalled the legacy react-native-cli first (npm uninstall -g react-native-cli) for the below command to work. If you wish to not use npx, you can also install the new CLI globally (npm i -g @react-native-community/cli or yarn global add @react-native-community/cli).

Collapse
 
chriswayg profile image
chriswayg

This worked perfectly. Thanks Royce for sharing these detailed instructions on how to create a custom React Native template. Greetings & blessings from Davao!

Collapse
 
bbernag profile image
Berna

Thanks a lot, I made two templates with my structure and settings like husky for my new projects

Collapse
 
roycechua profile image
Royce Chua

Thanks, glad you appreciated it.

Collapse
 
haiderabbasriz2 profile image
Haider Abbas • Edited

Hi
I am not getting exact RN version that is mentioned in the template.
It is automatically installing the latest version of RN after running last command

Collapse
 
roycechua profile image
Royce Chua

Hello Haider, you might want to check the React Native version on the template you made. If you want it to be exact kindly remove the ^ in the dependency. You might have accidentally had "react-native": "^0.63.4". You should instead have it like this "react-native": "0.63.4".

Check this sample package.json github.com/roycechua23/react-nativ... in one of my examples.

Collapse
 
haiderabbasriz2 profile image
Haider Abbas

Hi Royce
Can you please share your node and npm version ?

Thread Thread
 
roycechua profile image
Royce Chua

This machine that I used recently to make my test and reply to you has the following dependency versions:
Node: 12.18.3
Npm: 6.14.6

Collapse
 
hafdiahmed profile image
AHMED HAFDI

great work Man , i was looking for this guide for a long time i have an questions does the template ( any template ) work as the ignite react native ?

Collapse
 
smkhpro profile image
KASHAN HAIDER

How to add dev dependencies?

Collapse
 
adrienbaston profile image
Adrien Baston • Edited

This is a great tutorial, thanks a lot for sharing it! I'll definitely follow it as I was going to work on some app templates myself.

Collapse
 
roycechua profile image
Royce Chua

Thank you, glad you liked it

Collapse
 
criszz77 profile image
criszz77

Loved it!

Collapse
 
matosclaudio profile image
matos-claudio

Congratulations for the tutorial. I was able to build my template. Now I need to build a library template with the create-react-native-library command. Any idea how to do it?

Collapse
 
grantges profile image
Bert Grantges

Great tutorial, however when I was going through it, i noticed that the post install script is causing an EACCESS error. Removing the script, seems to work fine, but curious if you ran into this issue and addressed it.

The init of the project is trying to write the script.js to a folder in /tmp which is causing the issue.

I was able to work around this simply by removing the script.js from my template as it wasn't needed - but if in the future I wanted to use it, would be good to better understand why this is failing if you know. Multiple google searches ended in a bit of a dead end for me.

Thanks again!

Collapse
 
zubko profile image
Alexander Zubko

I was able to fix this error by making the script.js executable with:

chmod +x script.js
Enter fullscreen mode Exit fullscreen mode
Collapse
 
gaetanfauconnier85 profile image
GaetanFauconnier85

Thanks, it working fine with that