Time and money-saving are at the top of the reasons for deciding on cross-platform mobile app development. Although the vision of building separate native apps for iOS and Android is enticing and has its advantages, to deliver an application faster, you will be facing the alternative – creating both at the same time in React Native. However, this technology doesn’t come in line with some of the features. And that’s where bridge builders come to the rescue!
In a perfect world, you would have all the time and resources to create a mobile application in two versions – one for iOS and the other for Android. But building technology products don’t happen in a vacuum space. On the contrary, it takes place in a dynamic market reality, where business shot callers require results fast.
That’s why taking leverage of React Native framework is the right business answer. Instead of writing two codes, you will be focusing on one, building an app for two platforms.
React Native is not ideal, though. In this article, we will take a closer look at this development solution and how bridges will help you to overcome possible obstacles you might find down the road.
Are you ready?
Is React Native a good idea for mobile app development?
When it comes to definition, React Native is not only an open-source framework created (and still being developed) by Facebook. It’s a cross-platform technology that uses JavaScript to bring writing for two alternative operating systems under one roof.
Thanks to built-in access to native views, components, and APIs, React Native leaves the hybrid (Cordova, Ionic) solutions behind, as it doesn’t have to rely on WebViews.
But that’s not the end of good news. Apps written in React Native have a significant advantage over the native ones – the development process is faster. And that’s not only implied by the nature of JavaScript itself as the language that doesn’t have a long compilation cycle time.
The feature that saves your precious minutes is called Hot Reloading. When you develop your app and have it up and running, you will be facing updates sooner or later. While in native languages adding new stuff in the code will require minutes to notice the changes in your app, in React Native, will only take seconds because you don’t lose the state of your app every time you have to reload it.
Moreover, as we highlighted a couple of paragraphs up, business decision-makers love React Native as a money-saver. This framework allows you to share 70% of code between platforms, and that takes a tremendous amount of work off your shoulders.
Despite the above benefits, however, React Native isn’t a magic wand that makes all the problems go away.
Why are some people disappointed by React Native?
While React Native framework moves the needle for simple apps, especially those written for single events or marketing purposes, it’s not designed for dealing with complex mobile app development.
Using this technology for covering features like geolocation or online payments is also not the best of ideas.
The sceptics also express their disbelief at the performance of react native apps. Plus – smartphone processors and memory were arranged to marry native components rather than to suit Facebook’s framework.
Is the fact that React Native itself fails to deliver more complicated applications means that you should leave it behind? Hell no!
There’s a way to bypass it, and we’re going to spotlight the crucial missing element:
The art of React Native Bridges
When you think about it, React Native itself is a bridge connecting two islands. To be more specific, this technology relies on the communication between JavaScript and a native app language.
Quoting after Marvin Frachet:
“The bridge is the concept that provides a way for bidirectional and asynchronous communications between these two universes. What’s important here is that they are completely written in different technologies, but they are able to communicate.”
Let’s see how our Mobile Developer, Przemysław Jaskot, regards the idea of the bridge:
“React Native uses native elements and methods of a certain platform, but to make things work, you need to write a bridge for each element of your app. Although React Native is already a selection of methods and elements, like buttons, text fields, calendars which both iOS and Android have published, the framework doesn’t have ALL OF THEM. And this is where you to help yourself with a bridge.”
A bridge serves as a tool to export a native element from a specific platform to JavaScript.
Coming back to Przemysław Jaskot:
„For instance, if your goal is to build a payment gateway for an e-commerce application, and React Native doesn’t have an element like this, then you need to write this method and manage it from the JavaScript level.”
How to write a React Native bridge?
How to write a code for a bridge? Let’s dive into the details. Here’s an example of a simple bridge written for iOS:
The first two files implement a module with one bridge method on the native side. It’s about activating a simple alert with the use of two buttons: “Success” and “Failure.” After tapping on a particular button, the bridge will turn on the corresponding callback function with the answer for JavaScript code.
The third file is a JS code, which launches the bridge method inside the React Native project and manages the answers received from the native code.
SomeBridgeModule.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface SomeBridgeModule : NSObject
@end
SomeBridgeModule.m
#import "SomeBridgeModule.h"
#import "AppDelegate.h"
@implementation SomeBridgeModule
RCT_EXPORT_MODULE(SomeBridgeModule);
RCT_EXPORT_METHOD(exampleMethod:(NSString *)title
successCallback:(RCTResponseSenderBlock)successCallback
failureCallback:(RCTResponseSenderBlock)failureCallback
)
{
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:title message:nil preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *successAction = [UIAlertAction actionWithTitle:@"Success" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
// check https://facebook.github.io/react-native/docs/native-modules-ios#argument-types for types allowed to pass with callback function
successCallback(@[@"success value"]);
}];
UIAlertAction *failureAction = [UIAlertAction actionWithTitle:@"Failure" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
failureCallback(@[@"failure value"]);
}];
[alert addAction:successAction];
[alert addAction:failureAction];
AppDelegate *delegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
[delegate.window.rootViewController presentViewController:alert animated:YES completion:nil];
});
}
@end
SomeReactNativeFile.js
import React, { Component } from 'react'
import { NativeModules } from 'react-native'
const SomeBridgeModule = NativeModules.SomeBridgeModule
class SomeComponent extends Component {
executeBridgeFunction = () => {
SomeBridgeModule.exampleMethod(
"This text will be displayed as an alert message",
(success) => {
console.log(success) // logs "success value"
},
(failure) => {
console.log(failure) // logs "failure value"
}
)
}
}
Busting myths about React Native
It’s time for some demythologization. We’ve already mentioned the reasons why some technology specialists discourage using React Native for mobile app development. Now, let’s check out how much this scepticism is justified.
The performance
First off, the performance of a react native app is supposed to be worse because of using bridges instead of native APIs.
Here’s what Desmart’s Frontend Developer, Rafał Wyszomirski thinks about this matter:
“I would rather say that it may have a negative impact on performance, but it certainly doesn’t have to. It depends on how complicated operation your react native app needs to perform. Those differences between native and react native apps’ performance can be tough to notice.”
The application’s scalability
Another aspect that React Native critics point out is that this framework isn’t the best choice for developing big software. Especially an extensive application that has future tweaking in perspective. Rafał Wyszomirski comments:
“It doesn’t have to be a rule of thumb. You can build an application that is large when it comes to content, but its logic and mechanics won’t necessarily have to be complicated. Take an IKEA product catalog as an example – there are hundreds of categories, subcategories, and products, but in reality, it’s just a product listing and search filters.”
Bug fixing
Although React Native’s longer debugging process developers can complain about may cause project delays and costs to increase, you can subdue this beast as well. There are excellent alternatives for normal debugging in React Native, like Reactotron or Flipper. Having one of these on your desktop will help you inspect the React Native code along the way.
Asynchrony
Even the Facebook experts admit there are some aspects of React Native that could be working better.
Quoting after Sophie Alpert, Engineering Manager on React at Facebook:
“An asynchronous bridge means you can’t integrate JavaScript logic directly with many native APIs expecting synchronous answers. A batched bridge that queues native calls means it’s harder to have React Native apps call into functions that are implemented natively. And a serializable bridge means unnecessary copying instead of directly sharing memory between the two worlds.”
However, from our experience in projects for Desmart clients, the above problems are either bearable or even marginal.
Moreover, looking at the bold promises included in the same post from Sophie Alpert, we can expect React Native to be redesigned to boost its performance and to fit the architecture of native apps even more. The fact that the framework is no longer only Facebook’s child but an open-source technology looked after by the international society of developers; you can count on further enhancements of this framework.
Why should you go for React Native
Summing up, although developing in native languages will empower you with all the weapons iOS or Android can offer, bringing React Native technology with faster development to the table will save your software project time and money.
Some developers are not hyper-enthusiastic about this framework, highlighting the fact that you can share only 70% of code between platforms. But even so, that’s still an impressive result having in mind that you are covering development for two different environments at the same time.
And what about the rest of the elements that React Native doesn’t serve on a table? Well, this is where you can discover the power of building bridges and extend the features of this framework.
Rafał Wyszomirski wraps it up:
„We have a talented JavaScript team at Desmart, and for us React Native is a brilliant way to shape universal developers.”
