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
- Creating the template's repository
- Creating the app template (make the React Native project you want to use as your template)
- Creating the actual template structure (the app template + other config files)
- 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
Top comments (20)
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.
Thank you, glad you liked it
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!
I was able to fix this error by making the
script.jsexecutable with:Thanks, it working fine with that
This worked perfectly. Thanks Royce for sharing these detailed instructions on how to create a custom React Native template. Greetings & blessings from Davao!
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
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.
Hi Royce
Can you please share your node and npm version ?
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
Thanks a lot, I made two templates with my structure and settings like husky for my new projects
Thanks, glad you appreciated it.
For me not work. This is the repository, so can you check it if is right?
github.com/paolosantarsiero/templa...
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.
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).
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.
How to add dev dependencies?
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 ?
Loved it!
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?