React Native 18.2 Boiler Plate Project

Every time we start a new project from scratch, we often find ourselves adding essential components like a login page, a registration page, a password recovery page, and a home page right off the bat. Additionally, we typically install packages for toast messages, masked input, Axios for HTTP requests, i18n for localization, and navigation. But is that all? Certainly not! We also usually incorporate packages for visualizing themes.

With this public repository, you can kickstart your project with all these options already in place. Here’s how to get started:

project repository: https://github.com/egemenhalici1/ReactNativeBoilerPlate

First, clone the project:

git clone git@github.com:egemenhalici1/ReactNativeBoilerPlate.git

At this point, you can change the project name to whatever you prefer.

Let’s take a closer look at the project infrastructure:

Screens

Login Screen

Register Screen

Forget password Screen

Toast Message

Toast messages are commonly used to display brief messages to users for a short duration. Most mobile applications make use of toast messages. In this project, I’ve utilized the react-native-toast-message library, which you can find here: https://github.com/calintamas/react-native-toast-message. You can customize these messages to your liking.

Masked Input

Masked input fields are useful for handling sensitive values such as passwords and keys. I’ve employed the @react-native-community/masked-view library for this purpose. You can find more information here: https://github.com/react-native-masked-view/masked-view

Axios

Axios is an HTTP client for making API requests. In this project, there’s an axios.js file where you should set the base URL. The base URL should point to your server.

Localization

If your app needs to support multiple languages, you should install and implement i18n packages. I’ve used the i18n-js package for this purpose. You can learn more here: https://github.com/fnando/i18n#readme. This package uses the language setting of mobile devices as the default. Therefore, you'll need to implement language files in different languages. Additionally, languages can be changed within the app if implemented.

For example,

I18n.t(‘common.success’)

This function returns a string according to the selected language.

Navigation

When your app consists of more than one screen, a navigation package becomes essential for transitioning between them. I’ve used the react-native-screens package for navigation. You can find detailed information here: https://github.com/software-mansion/react-native-screens.

Theme

You can define color codes for various components. Typically, application owners or managers want to customize the theme of their mobile applications, including primary colors, secondary colors, success indicators in green, warning indicators in orange, and so on. Sometimes, there’s a need for dynamic color changes, so a generic approach is necessary. For this purpose, I’ve utilized the react-native-paper library. You can explore it further here: https://reactnativepaper.com.

Icon Library

I’ve incorporated the react-native-vector-icons library for a comprehensive list of icons. You can view all the available icons here: https://oblador.github.io/react-native-vector-icons/.

These are all the dependencies for this React Native project. If you require these packages, feel free to fork this project and make modifications. You won’t need to implement them separately if you use this boilerplate, saving your team some valuable time.