DEV Community: Vladlen

Creating Custom React Native Templates: A Step-by-Step Guide

Vladlen — Tue, 10 Oct 2023 09:17:31 +0000

React Native has gained immense popularity for building cross-platform mobile applications. While React Native offers a fantastic starting point with its default template, sometimes you may want to create a custom template to streamline your development process or enforce coding standards across multiple projects. In this article, we'll walk you through the steps to create your own React Native template.

Why Create Custom Templates?

There are several reasons to create custom templates for your React Native projects:

Code Reusability : You can include reusable components, libraries, and styles in your templates. This promotes code reuse across different projects, saving development effort and reducing the chance of bugs.
Best Practices : You can enforce best practices and architectural patterns by including them in your custom template.
Faster Development : With a template, you don't have to start from scratch. You can leverage the boilerplate code, configurations, and UI components to accelerate development.
Onboarding : Templates simplify the onboarding process for new team members. They can quickly understand the project structure and development practices, leading to faster productivity.
Reduced Errors : By using templates with predefined configurations and dependencies, you reduce the likelihood of configuration errors and compatibility issues.

Prerequisites

Before creating a custom React Native template, make sure you have the following prerequisites in place:

Node.js : Ensure you have Node.js installed on your machine. You can download it from nodejs.org.
React Native CLI : Install the React Native CLI globally using the following command:

npm install -g react-native-cli

Steps to Create a Custom Template

Step 1: Initialize a New Template Project

First, create a new directory for your custom template project:

mkdir custom-rn-template
cd custom-rn-template
npm init

Your package.json file should looks like this:

{
  "name": "MyCustomTemplate",
  "version": "1.0.0",
  "description": "React Native Custom Template",
  "files": [
    "template",
    "template.config.js"
  ]
  ...
}

Create template.config.js file:

module.exports = {
  placeholderName: 'MyCustomTemplate',
  templateDir: './template',
}

Next, use the React Native CLI to initialize a new project:

npx react-native init MyCustomTemplate

After that rename “MyCustomTemplate” folder to “template”.

Step 2: Customize Your Template

Now that you have a base project, you can customize it to fit your needs. You can make various modifications, including:

Project Structure : Organize your project structure the way you prefer.
Dependencies : Add or remove dependencies by modifying the package.json file.
Boilerplate Code : Include common components, utilities, or screens that you frequently use in your projects.
Configuration : Set up linting, testing, and other configurations that align with your development practices.

Step 3: Document Your Template

To make your custom template user-friendly, create documentation that explains how to use it. You can include:

Installation : Explain how to create a new React Native project using your template.
Customization : Provide guidance on how to customize the template further.
Usage : Describe any additional steps or configurations required for specific features or libraries included in the template.

Step 4: Publish Your Template

Once you’ve customized and documented your template, it’s time to publish it. You can publish your template as an npm package, making it accessible to your team and the community.

Create an account on npmjs.com if you don’t have one already.
Navigate to your template project directory and log in to npm:

npm login

Publish your template to npm:

npm publish --access public

Step 5: Use Your Custom Template

To create a new React Native project using your custom template, run the following command:

npx react-native init MyCustomApp --template MyCustomTemplate

Replace “MyCustomApp” with the name of your new project. React Native will generate a new project based on your custom template.

Conclusion

Creating custom React Native templates can significantly improve your development workflow by enforcing best practices, maintaining consistency, and saving time on project setup. Also check my own react-native-modular-template, which includes what I use when creating new projects.

Optimizing React Native Project Structure: The Modular Architecture Approach

Vladlen — Fri, 06 Oct 2023 10:48:45 +0000

In this article, I will share my experience of structuring projects, which I have been successfully using for three years in my React Native projects. I think that structuring a project by file types is not the best approach, although it works well in some situations. My team and I use something similar to modular architecture for our projects, and we want to share it with you!

🚩 Problem

There are several approaches to creating the structure of client applications. The most common, but not the most convenient one, is splitting the project by file type. The main problem is that the logic of one module is “smeared” over the whole project. In this approach, the structure usually looks like this:

api
components
containers
- HomeContainer.tsx
- ProfileContainer.tsx
- SettingsContainer.tsx
store
App.jsx

🙌🏻 Solution

More convenient and scalable is the approach of dividing the project by functionality. We call such top-level units, into which the project is divided, modules.

src
- modules
- - auth
- - core
- - users
- - navigation
- - ud-ui

When divided into modules, all components and logic are next to each other. It is easier to work with such a project: it is easier to navigate the structure, delete and refactor modules, it is easier to see the overall picture of functionality, and there is less chance of interfering with each other during development. Functionality does not always mean business logic. There are functional modules, such as core, ud-ui, which are not tied to business logic.

Module Structure:

Domain ( An instrument in the hands of a conductor — Business logic of the module)

Store ( Conductor — Module control logic)

UI ( Presentation )

🪄 Domain lvl

Typically, this layer contains interfaces, model descriptions, services to query the API, or business logic that is not related to a specific view (UI)

Structure of the Domain layer

enums
- UserRoleEnum.ts
interfaces
- User.ts
repositories
- UserRepository.ts
resources
- UserResource.ts

What can be stored at the Domain level?

Enums
Interfaces
Services
Helpers
Resources and Repositories (API)

💾 Store lvl

This layer is where the application is managed and interacts with the Domain layer for API calls and changes to the Store. Example of Store-level structure using Redux-Toolkit:

entities
- index.ts
- selectors.ts
- actions.ts
edit
- ...
other-stores
- ...
reducer.ts
selectors.ts

Entities Store

Usually, a separate store called “entities” is used to store data. This is a kind of database for the client application to store entities of the same type. The other stores use identifiers if you need an entity that has already been loaded. So, if an entity is changed, it is changed in one place — entities store, and the rest of the program picks up the changes because it actually uses a reference to one common object.

Other stores

Usually refers to individual pages or time-consuming actions, for example:

edit — user edit page
index — user list page
new — user creation page

🖼️ UI lvl

The UI layer contains elements related to data presentation, such as components, screens and hooks. Usually, the layer is divided as follows:

screens
- profile
- - index.tsx
- - style.ts
- ...
components
- users-list
- - index.tsx
- - style.ts
- ...
hooks
- useUserForm.ts
- ...

Screens

This folder contains components that are directly assigned in routing, i.e., they are screens or pages in the navigation structure of the application.

Components

Components that relate to the module’s business logic. Can be used outside the module but are necessarily inside its structure