When initiating a new mobile application project, we usually face tasks similar to the previous one. Whether it would be a social networking application or event booking service, we need to redo the same work, like building a user profile, implementing sign-up registration and authentication via social media profiles.
We searched through various solutions that could help us reuse our code in simultaneous projects. Our target was towards the following sides:
- Building the screens for the user profile;
- Creating the sign-in and sign-up features;
- Implementing the user authentication via socials.
In a while, we found the React Native boilerplate and considered it to be the best fit for our current needs. The boilerplate is a custom collection of assets and tools needed for an efficient product build. It assembles the code patterns from various parts and supports the development process with automated features.
Regarding our team, the boilerplate is used by the back-end and front-end developers. Its current release is focused on integration with our NestJS boilerplate but could be adjusted to any other back-end framework.
Developing mobile UI with the React Native boilerplate
React native boilerplate includes the necessary assets required from the start:
- Form controls (inputs, buttons);
- Typography elements;
- User avatars.
These components are the basic elements and could be customized later. With their help, a front-end engineer can build a prototype and simulate the feature on the screen view.
The boilerplate involves the avatar pictures that our developers are using for the profile design. If the web link to the user picture has been broken, our module fixes the issue. Instead of leaving the image area empty, it populates this space with the initial letters taken from the user name.
Dark theme
Besides mentioned, we implemented the dark theme for the user interface. Previously it was required at our taxi driver application. As far as the dark mode becomes trendy now, we expect to apply it in our new projects again.
Text component
For the text design, we utilize the React Native Text component. Based on that, we have implemented our custom Typography library, which helps us prevent style repeats in the text markup.
User feature implementation
Sign-in / sign-up process
In general, the user registration takes one week to complete. It spans various tasks like a user sign-up and log-in via email or social media (Google, Facebook, Apple), password recovery, and its change. To shorten the time for development, we arranged the code library. With its help, delivery of user sign-in and sign-up features requires two times less time.
Vladyslav Schepotin
Usage of React Native boilerplate at Brocoders team makes product build efficient. It cuts essentially our efforts at the beginning, allowing us to concentrate on clients' business goals.
Technical support of the build process
Mobile UI testing
We utilize Detox, one of the most popular frameworks in React Native projects. It helps us deliver end-to-end mobile UI tests during the build process.
Regular checks on updates
Since we utilize various React Native libraries, it becomes actual to check on their new version updates. To keep up with the latest version releases, we use the Dependabot utility.
The Dependabot is tracking the dependencies through the library code on Github. If any changes appear, the bot is making new pull requests to our GitHub repository. Before merging the code, the bot runs automated user tests over CI. It checks whether the application normally works with the new library version. If so, the Dependabot notifies us over email about the tests that have been performed successfully and we complete the merging.
Performance support
Since we use the various form libraries in our projects, we need to make sure they are working correctly on the user side. To validate their performance, we utilize the React-hook-forms utility. Thanks to that, we are implementing the quality proven forms in our mobile application projects.
Multi-language localization
Usually, our clients prefer using multiple languages for their applications. To make it faster, a developer creates a document with the language translations and uploads it to the project over boilerplate.
TypeScript integration
Since most of our projects are large-sized, we need our code to be valid and plain. To ensure its quality, we implemented TypeScript, which maintains our programming language standard.
Usage of the React Native boilerplate is saving our time by taking off the routine work. This approach has proven its value, and we are going to extend our boilerplate with more features.