The Practical Guide to React Native Dev

If you are planning to experiment with mobile app development or you have a ready-made business idea, using React Native development is a good option in 2022, especially if you already have experience with such a framework before. In this article, we share a few critical moments that will help you understand the basic concepts of React Native from our point of view.

What is React Native

React Native (abbreviated RN) is a famous JavaScript-based mobile app framework that allows the creation of mobile apps with animation for iOS and Android. The framework lets build an application for different platforms, utilizing the same codebase. In 2015 Facebook first launched React Native as an open-source project. It has grown into one of the most common mobile development solutions in just a few years.

React Native dev is successfully used by some of the world’s leading mobile applications, such as Instagram, Facebook, Skype, etc.

There are several reasons for the global popularity of the framework:

Companies can create code only once and use it to realize applications on Android and iOS platforms; it saves time and money.
React Native relies on React – a JavaScript library that was in demand even before the advent of the framework.
React Native developer, who previously could only work with web technologies, may create reliable, production-ready applications for mobile platforms thanks to such a platform.

Developers have created several strategies that will help you make the most of all the features of React Native. Let’s talk about the most popular ones.

We are confident that we have what it takes to help you get your platform from the idea throughout design and development phases, all the way to successful deployment in a production environment!

Feature folder

It’s important to know that React doesn’t define a correct way to organize files and leaves it to the developer’s discretion. However, there are a couple of examples of popularly used structures:

PBL- Package by Layer,
PBF- Package by Feature.

The high-level packages represent the different application «layers» in PBL, including components, actions, reducers, etc.; they are grouped into categories.

There is no modularity in PBL, and the separation-by-concerns are vague. Every package contains elements that are usually not closely related to each other. Such a structural approach is one of the main reasons causing tight coupling. It’s not only a deal for large-scale projects with high performance. It isn’t easy to make feature toggle with PBL, because we often have to interact with features and close coupling in the codebase.

The Practical Guide to React Native Dev

A more rational solution is to organize files by features (PBF). Features-related files should be kept together; it improves readability within a module and reduces dependency between packages.

PBF help to solve some PBL problems:

Easy addition and removal of features.
Understandability – anyone can learn about the features of an application by looking at the folder structure.
Code navigation and modularity. Everyone can easily navigate the code. It also enhances the modularity of the project because the program’s functionality is divided into independent interchangeable modules.
Reusability – every project has some standard code that will be reused across the features.

PBF is more accessible to scale than PBL so that each team may work on its features without code conflicts.

Keep the logic outside of the component

Sometimes React Native dev writes long components with a bunch of logic, and when another programmer wants to make changes to the code, it can take many hours or even days.

It is essential that React should be only responsible for rendering the UI, while redux or exported utils functions/classes provide logic control. Logic outside of the component can be specified in a particular file to ensure:

comprehensible and clean with a feature name that explains the goal of logic,
reusing logic in other elements,
simple code verification with a unit test when it is an independent feature.

Ideal data flow provides redux middleware.

Support accessibility with big or small font

On both Android and iOS, users can choose a big/small font. If the developers don’t consider such a possibility, it can lead to letters being cut off and words disappearing. Instead of assuming people won’t enlarge their text, we recommend designing for the largest. It allows finding a solution for all mobile intermediate sizes.

Strategy 1: Design with vertically stacked layouts. The readability of words deteriorates when they are split over multiple lines. It is better to create a single-column form to reduce such risk.
Strategy 2: Turn font scaling off when necessary. The mobile text size setting is best used sparingly for UI elements with limited space.
Strategy 3: Scale SVG icons. Icons are part of the app’s lexicon and should also be legible in different text sizes.
Strategy 4: Turn on or off other content. If we deal with country cards, we can hide the image when the country name reaches a specific size. If the device font size is 1.2 times smaller than the application text size, display the image. Otherwise, hide the picture and let the country name take more space.

Don’t also forget most of the text should contrast with the background.

Animations

Animations are critical to creating a great user experience. Stationary objects must overcome inertia as they start moving on our mobile screens. Animations let convey physically believable motion in your interface. React Native provides two complementary animation systems: Animated API to concisely express a wide variety of engaging animation and interaction patterns, and Layout Animation to deal with global layout transactions.

However, built-in registrations have some drawbacks. To eliminate them, we recommend using additional software:

React-Native-Reanimated has full native support and runs the animation directly on its thread rather than on the JavaScript thread, it makes the animation smoother.
Lottie – it’s a mobile library for Android and iOS. It parses Adobe After Effects animation, exports it as JSON, and displays it on mobile devices. Such a solution allows designers to create and export beautiful animations without the services of engineers. You need to install thelottie-react-native wrapper — a simple wrapper element to use Lottie in React Native.

React Native is a great solution to build mobile apps with animation that will run smoothly regardless of the platform or system they’re running on. It is a framework loved by companies and developers alike.