DEV Community

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

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

Royce Chua on February 16, 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...
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
 
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

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
 
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
 
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
 
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
 
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
 
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
 
smkhpro profile image
KASHAN HAIDER

How to add dev dependencies?

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