DEV Community

loading...
Cover image for How To Make Your Own Custom React Native Templates (2021)

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

roycechua profile image Royce Updated on ・7 min read

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 this my work, I would appreciate it if you would buy me a coffee here: https://www.buymeacoffee.com/royce.chua

Discussion (3)

pic
Editor guide
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 Author

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.