Reduce initial app setup time by 80% In React Native

React-Native has become one of the most emerging frameworks nowadays. It has got so many powerful features like, cross-platform native apps using javascript, fast refresh, huge community, etc., which makes it different from its competition. Code reusability using the concept of the component is one of them. Today we are going to discuss one of the powerful features of the which allows us to reuse our code, configurations, set of rules, etc., into our newly created project and save tons of time and effort. react-native-cli Some theory While working in an organisation or team, most probably you will be following some common coding practices, rules, folder structure, set of tools and configurations, etc. When initialising a new project, sometimes it becomes a pain and time-wasting to do all of the things from the scratch for every new project like adding a folder structure, installing the commonly used dependencies, the configuration of the tools like redux, mobex, eslint rules, CI/CD configurations, staging, and production app setup, setting up the splash screen, etc. Today we are going to talk about this common pain point and try to find a solution to the problem, automate the process, and save at-least 80% of time and resources. In the , did an awesome job and gave us a gift in the form of the Project Template. I have not found much of the resources talking about this cool feature and seems like it is one of the uncovered features of the . The react-native docs talk about this feature a bit, but only for initialising the project with the typescript template. In reality, it can dramatically change your development experience especially when you are about to create a new project and thinking about initialising your project, and hoping for any solution to pre-configure commonly used libraries, components, logic, etc. 0.42.0 Martin Konicek react-native-cli While searching on the internet for the solution, I found medium article. But unfortunately, it is outdated and does not work anymore. this What is a project template? As the name suggests, a project template is a template(starter) for your new project which can include any of your custom reusable configuration, components, folder structure, etc. It allows us to initialise our new project with our own starter instead of the default “Welcome to React Native” project. The command to initialise our new project with a custom template looks like this: npx react-native init --template Note : The steps shown in this article apply only to the projects initialised using the react-native init , not with the expo init . To create a template Let’s get started and see how to make our own custom template. The basic steps of creating the template include: Initialise a new project for template Convert this newly created project into a template Use the template Initialise a new project for template Please make sure that you have gone through and implemented all of the steps described in the for React-Native Environment Setup. Then create a new folder with any name you like(for example ). Now, initialise a new project inside this folder as you usually do for a new React-Native project. You can name it with any name you want but keep in mind that we will be using this project name, later on, to define in our template configuration to replace all of the occurrences of this name. Initial Getting Started Guide react-native-template npx react-native init ProjectName After the initialisation process, the folder structure will be like this: react-native-template └── ProjectName ├── android ├── ios ├── index.js ├── App.js ├── package.json └── ...other files Now, replace dot(.) with underscore(_) for all of the hidden files in the newly created project. For example, will become , will become , etc. .gitignore _gitignore .eslintrc.js _eslintrc.js This project will act as a starting point for our template. After initialising this project, add your desired custom configurations like: Basic folder structure and common components like buttons, headers, etc Basic NavigationState management tools like redux, mobx, etc Splash screen setup Linting rules CI/CD setup Staging and production environment setup and so on We need to do these things only once and then it will make our life much easier for the next time as we will automate this process to be completed with only a single command. In this example, is a special word(as I mentioned earlier) that will be replaced with your new app. ProjectName Convert this newly created project into a template Rename the folder to to make it more clear that it is a template. ProjectName template Create a new file at the root level, adjacent to the template folder with the name . template.config.js touch template.config.js Upto this point, your folder structure should look like: react-native-template └── template | ├── android | ├── ios | ├── index.js | ├── App.js | ├── package.json | └── ...other files └── template.config.js Now add the following inside the file: template.config.js .exports = { : , : , } module placeholderName 'ProjectName' templateDir './template' More options can be found . But adding these 2 should do our job and are required. That’s it. here Use the template Now let’s see how we can use our template to create our next cool project. As mentioned earlier, you can initialise the new project by using the flag to the command and passing the path to the template. Here comes another cool part of the story. The template path can be any one of the npm package, GitHub repo, or even the local directory file as mentioned . I have created a starter template for the demonstration which you can find and I have published it into the as well(you can publish it to the npm just like a normal npm package as described ). --template react-native init here here npm here For the template to be on the (in case of Mac), the project can be initialised as: Using local path: Desktop npx react-native init MyApp --template /Users/ /Desktop/react-native-template : For the GitHub repo link , the project can be initialised as: Using Github https://github.com/ajaykumar97/react-native-template npx react-native init MyApp --template https://github.com/ajaykumar97/react-native-template : For the npm package , the project can be initialised as: Using npm @ajaysidhu/react-native-template npx react-native init MyApp --template @ajaysidhu/react-native-template After the successful initialisation, all of the dependencies will be automatically installed, just like as the traditional but with our custom template. npx react-native Final thoughts I found it to be super helpful while initialising any new project with preloaded stuff. It can save the day’s of work for us. My template can be found . Feel free to use it in your next React-Native project and do let me know in the section of the repo for any improvement in the setup. here issues Thanks Thanks to for introducing this awesome feature into the . Martin Konicek react-native-cli Previously published at https://ajay-kumar.dev/writing/create-react-native-template