Blog

Elena Kvitkovska

Getting started with QuickBlox React Native SDK

Posted by Elena Kvitkovska on November 1, 2019

One of the most appealing sides of React Native framework is that you only have to build your app at once using JavaScript. React Native means two times lower costs for building and maintenance. It has a large community and a variety of libraries in native languages. It is similar in structure to React.js, so it is easy for web developers to work with it.

React Native makes use of native Objective-C/Swift and Java/Kotlin ingredients. They help native-like UI and boost performance in intensive operations. Yet, you can’t reuse native modules across different platforms.

We have recently announced the release of the Quickblox React Native SDK. Today we have prepared a step-by-step guide on building a messenger app with it. You are welcome to download Quickblox React Native SDK. It is in beta now, and we are ready to hear the feedback and improve our SDK according to your proposals.

Why do you need QuickBlox React Native SDK?

QuickBlox React Native SDK offers you all you need to build a chat messaging app. Our toolkit contains helpful methods for implementing the following functionality:

  • Authentication. Upon the user logins to the application, the application starts a secure session. The token is valid for 2 hours after the last API request and is automatically renewed.
  • Users. SDK has all the necessary toolset for secure storing, managing and updating the user information.
  • Chat. For our messaging API, we use the XMPP protocol. Using the toolkit, you can manage the connection to chat server and managing 1-1 and group dialogs.
  • Content. This module allows to store attachments and manage the content.
  • Push Notifications. Push messages help you to keep in touch with the users who are not currently online. Using QuickBlox React Native SDK you can integrate push messaging into your Android or iOS app.
  • Custom Objects. The Custom Objects module provides all you need to manage and update your records.

How to create a React Native app using QuickBlox SDK?

Getting started

To create a new React Native chat messaging app with QuickBlox SDK from scratch follow these steps:

  1. Install Node.js
  2. Install React Native
  3. If you’re on MacOS – install CocoaPods
  4. Run react-native init AwesomeChatApp to create a new project
  5. Navigate to created project and install JS dependencies with npm install
  6. Add QuickBlox SDK to dependencies with npm install quickblox-react-native-sdk --save
  7. If you’re on MacOS – install Pods: enter ios folder and run pod install

You’re done with dependencies!

Launching the app

Now you can start the app with react-native run-android or react-native run-ios

But the application created is not really a chat messenger yet, right? So now you should create some UI for messages and then use our SDK to make it alive!

To make SDK work you should use your QuickBlox application account. To create a QuickBlox application, follow the steps below:

  1. Register a new account at https://admin.quickblox.com/signup. Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
  2. Create the application clicking New app button.
  3. Configure the application. Type in the information about your organization into corresponding fields and click the Add button.
  4. Go to the screen with credentials. Locate Credentials groupbox and copy your Application ID, Authorization Key, Authorization Secret and Account Key. These data needed to run your application on QuickBlox server.

Now, it’s time to turn on QuickBlox SDK


import QB from "quickblox-react-native-sdk"

const appSettings = {
  appId: xxxxx,
  authKey: xxxxxxxxxx,
  authSecret: xxxxxxxxxx,
  accountKey: xxxxxxxxxx,
  apiEndpoint: '', // optional
  chatEndpoint: '' // optional
};

QB.settings
  .init(appSettings)
  .then(function () {
    // SDK initialized successfully
  })
  .catch(function (e) {
    // Some error occured
    // look at the exception message for more details
  });

Now you should sign in and connect to chat:

QB.auth
  .login({
    login: 'yourlogin',
    password: 'yourpassword'
  })
  .then(function (info) {
    // signed in successfully, handle info as necessary
    // info.user - user information
    // info.session - current session
  })
  .catch(function (e) {
    // handle error
  });

Once you signed in you can connect:

QB.chat
  .connect({ userId: 12345, password: 'passw0rd!' })
  .then(function () { /* connected successfully */ })
  .catch(function (e) { /* some error occurred */ });

Great! Now since you’re connected to chat – it’s time to send a message to someone. Let’s create a new dialog:

QB.chat
  .createDialog({
    type: QB.chat.DIALOG_TYPE.CHAT,
    occupantsIds: [12345]
  })
  .then(function (dialog) {
    // handle as necessary, i.e.
    // subscribe to chat events, typing events, etc.
  })
  .catch(function (e) { /* handle error */ });

In order to receive new messages we should tell SDK to send us events when there are new messages in chat:

QB.chat
  .subscribeMessageEvents({
    dialogId: dialog.id // something like 'dsfsd934329hjhkda98793j2'
  })
 .then(function () { /* subscribed successfully */ })
 .catch(function (e) { /* handle error */ });

But how will we handle new messages? We should probably assign an event handler:


import { NativeEventEmitter } from "react-native"

const emitter = new NativeEventEmitter(QB.chat)

function newMessageHandler (event) {
  const {
    type, // name of the event (the one we've subscribed on)
    payload // event data (new message in this case)
  } = event
}

emitter.addListener(
  QB.chat.EVENT_TYPE.RECEIVED_NEW_MESSAGE,
  newMessageHandler
)

So, now we have a dialog, we subscribed for new messages and created function to handle incoming messages. Let’s send our first message:

const message = {
  dialogId: 'dsfsd934329hjhkda98793j2',
  body: 'Hey there!', // message text
  saveToHistory: true // keep this message in chat history
};

QB.chat
  .sendMessage(message)
  .then(function () { /* send successfully */ })
  .catch(function (e) { /* handle error */ })

That’s it!

Conclusion

QuickBlox React Native SDK is here to speed up the process of messaging app development – from designing the prototype to final testing. Using our toolkit, you can integrate the messenger, voice and video calling to your app, manage the files and objects. If you have any questions or suggestions, please submit a ticket to our support team.

Elena Kvitkovska

What are Push Notifications?

Posted by Elena Kvitkovska on October 31, 2019

Push notification is a friendly reminder to your customers about your brand. It is a great marketing tool that helps you keep in touch with the users and return them to your website. Notifications will reach the user anyway, even if they are not online or use a different mobile or desktop device. Push mailing allows you to develop a more efficient and responsive marketing strategy. It is easy to adjust it to user behavior, so it is more efficient than PPC advertising and bulk mailing.

To send the push messages, it is enough to get the permission of the user. They don’t even need to provide personal information, like a phone number or email address. This is the first step to creating the experience of positive interaction with the user.

What is a push notification and how is it different from a text message?

Today, push notifications increasingly replace SMS messages. You can plan mailings and segment the recipients, customize the notifications, create interfaces. You can analyze the effectiveness of the distribution, as well as user interaction with notifications. Push alerts provide more segmentation capabilities and are much cheaper than SMS.

push notifications

Why should you use push notifications?

First of all, push messaging is a great way of communication with the customers, engaging and reactivating them. It allows you to encourage users for performing the necessary actions, and track their behavior. You can analyze their interests, preferences, customize the content and choose the right time to send it.

While the emails are often left unread, push notifications always reach the customers. They are also less annoying then bulk mailing. You send push reminders to the loyal audience since the recipients have agreed to get them. The information in the push messages is brief, so the users don’t have to spend a lot of time understanding it.

Push notifications exist as a marketing channel for reaching customers, but they are also convenient for the users.

It is a good way to follow the updates of their favorite resources: Hot Sale alerts, new publications, tips, promotions, price updates. They remind to complete some actions: continue the game, finish the purchase, do the exercise, take medicine, etc.

You can use push notifications as targeted advertising. They do not broadcast bulk messages yet communicate with each separate user. Let’s consider the main push notifications advertising campaigns.

Types of push notification campaigns

You can use push notifications as targeted advertising. They do not broadcast bulk messages yet communicate with each separate user. Let’s consider the main push notifications advertising campaigns.

Geo-targeting

Geo-targeting is also known as local PPC. It refers to communicating with the customers located near the advertised company. To send the most relevant push notifications, customize the campaign according to the time zone and location of users.

Promotional and discount messages

This is the simplest and most common type of push campaigns. Its main rule is to make an adequate frequency of notifications. If the promotion is available for a limited time, make sure that the client has enough time to use the offer.

Reminder notifications

Based on user activity and the data from external sources, an app sends reminders. It helps them not to miss the opportunity and not forget to do something. If the user left the application with an unplaced order, the company sends a push notification with an offer to complete it.

Surveys

Personal user interaction improves campaign performance and increases loyalty. You may create personalized survey interfaces asking for feedback. The replies will go to the servers which process them.

How do push notifications work with business apps?

Push notifications are good for applications of different business areas: Synoptics, Cooking, Banking, Travel, E-commerce. In specialized business applications, push notifications can perform official, informative functions, for example:

  • a notice of money transactions (from financial apps)
  • notification of a received letter or personal message
  • information about updates or program crashes, etc.

How to add push notifications to an application?

Each mobile application platform has its own OSPNS (Operating System Push Notification Service). To add push notifications to an application, you need to register it with the OSPNS. The OS service provides an application programming interface (API) to the app publisher. The app publisher then adds the SDK to the app, then uploads the app to the appropriate app store.

Despite this, the correct tuning of notifications is a time-consuming process. It requires extra research – reading documentation, case studies, and implementation guides.

QuickBlox notification toolkit

QuickBlox provides the opportunity to install push notifications without spending lots of effort. We also provide clear and extensive documentation and flexible processing tools.

Using our tools, you can send cross-platform notifications from the Android app to an iOS device. This ensures the synchronization of actions across many mobile devices.

Wrap-up

Push messaging is communication with the users already interested in your business. Sending well-considered, relevant, and timely messages is a great marketing strategy. By focusing on your business goals, you will develop and maintain your customer base.

QuickBlox can help you organize notifications across platforms, devices, and users for better engagement and delight of your customers. Contact our team to learn more about QuickBlox push notifications solutions.

Julia Poltavets

Why QuickBlox choose XMPP protocol

Posted by Julia Poltavets on October 11, 2019

Any communication solution provider needs a communication protocol. There is a bunch of them at the market and one needs to give a good thought before they understand the way they work and opt for the one most relevant in their particular case. We at QuickBlox chose XMPP protocol once and the time has come to spread a word about it.

What is XMPP (jabber)?

XMPP is quite an old technology. Launched under the name Jabber, it was an open-source project for developing a protocol capable of supporting instant messaging solutions. Jabber also became the name of an instant messaging service based on XMPP.

What is the XMPP protocol? If we decipher the abbreviation, we will get extensible messaging and presence protocol, and this is exactly what XMPP is. It is a protocol for a messaging service based on extensible data exchange that can show the user’s “presence” – their ability to send and receive messages.

During two decades of its existence, it has got a reputation of a reliable solution and even earned the trust of such industry leaders like Google and Facebook that used XMPP in their messaging services – Google Talk and Facebook Messenger.

At QuickBlox, we opted for XMPP as it has always been chat-oriented, and chats and instant messaging are the primary focus of our service. XMPP is perfectly suited for real-time messaging including all types of instant communication – private, public or group messaging, video and audio communication, data exchange. Let’s look at XMPP strong suits to see why it became our protocol of choice and you may consider it your choice in 2019.

Why use XMPP in 2019?

Open Standard

XMPP uses an open standard published by IETF. Any provider that complies with this standard can implement an instant messaging solution using XMPP. Therefore, XMPP supports a free choice of the IM vendor.

Decentralized architecture

There is no central server that supports communication via XMPP. All communication is processed via servers with no direct connections between clients, but anyone can launch and maintain their own XMPP server. This ensures server independence, increases security, and provides additional customization opportunities.

Operating system and device independency

XMPP is not limiting you in the choice of operating systems or devices on which you run your IM solutions.

Great support

Compared to other communication protocols, XMPP wins points in the support category. As one of the oldest protocols, it has one of the most effective support services that, thanks to the contributions by Google and other companies, has evolved into an efficient and reliable function.

Disadvantages of XMPP

As everything, XMPP has its weaknesses of which we are aware of. For the time being, however, we believe that its advantages outweigh its drawbacks, and XMPP remains a working component of our communication solutions.

High overhead

XMPP transmits lots of redundant data. Sometimes, as much as 60% of data is repeated creating huge amounts of unnecessary traffic.

Mandatory XML format for IM

In XMPP, messaging is done in an XML document with no option to send unmodified binary data. This restriction makes it impossible to send files without using additional communication protocols.

What XMPP features does QuickBlox implement?

Add communication through XMPP

In our communication solutions, we implement a set of the most important features that are necessary for a chat application:

RFC-6120

This document defines the basic specifications and standards describing, among others, the security and encryption mechanisms used in XMPP-based instant messaging applications. Particularly, RFC-6120 refers to the TLS 1.2 security protocol that QuickBlox uses in its solutions.

RFC-6121

RFC-6121 is another standard that governs the management of rosters (contact lists of the user) and presence information (the user’s status in the context of their ability to participate in the conversation).

XEP-0045

XEP-0045 is an XMPP extension for a highly customizable multi-user chat. With XEP-0045, you can enable conversations in chat rooms as well as exercise user management functions. However, XEP-0045 does not support establishing a system of user roles and privileges or changing a role or privilege for a particular user.

XEP-0280

XEP-0280 is used to send carbon copies of instant messages to different resources to maintain the uninterrupted conversation flow. This extension allows users to continue conversations from different devices with no messages lost.

XEP-0016

The XEP-0016 extension provides the ability to block communication with a particular user based on personal preferences. With XEP-0016, you can block users both in private chats and in group conversations.

XEP-0198

XEP-0198 is an XMPP extension that supports the management of data streams. The functionality of XEP-0198 allows resuming the stream after an interruption.

XEP-0333

With XEP-0333, you get the ability to set chat message markers, such as “delivered”, “received” or “acknowledged”. This way, users get visual confirmation that their messages have reached their recipients.

XEP-0012

XEP-0012 allows providing information about the user’s last activity or presence in the chat. In QuickBlox solutions, the presence data is shown in seconds.

XEP-0352

This extension enables displaying the user’s status. With XEP-0352 implemented, the chat shows whether the particular user is online or not.

What XMPP features can be implemented upon request?

XEP-0060

The XEP-0060 extension allows implementing the publish-subscribe service. In our case, we may develop the service with Telegram channels.

XEP-0191

XEP-0191 is a blocking command extension. It is used to block communications and can be implemented faster and easier than XEP-0016.

Within the functionality of XEP-0191, the following features are also available:

  • Edit message
  • Delete message
  • Self-destructing messages

XEP-0033

XEP-0033 enables sending messages to multiple recipients simultaneously. On the other hand, it allows sending user presence information to multiple servers at the same time.

Gateways

We can build integrations with the gateways between the XMPP network and legacy messaging services. Particularly, we can create integrations with proxy gateways that act as an XMPP client on a non-XMPP instant messaging service.

Integration with email and message queue

QuickBlox could provide you an option to integrate your email with the XMPP network. This will allow you to receive the messages that were left unread for a while. The messages will be sent to the chat through the Simple Mail Transfer Protocol that is SMTP.

QuickBlox can also ensure you with the message queue integration. A message queue is an integration pattern for the information exchange while being connectionless. The messages you receive will be redirected to your MQ service for further analysis. You’ll also have a dynamic configuration for several message queues.

Conclusion

XMPP is a reliable communication protocol used by numerous companies including Google and Facebook. It’s specifically made for instant messaging and, thus, eventually became our choice.

QuickBlox is ready to provide you with the standard chat features but can also add customizable ones upon request.
If you are interested in setting up a multi-functional chat application or need more details about the available QuickBlox SDKs, contact us, and we will be glad to help.

Julia Poltavets

Flutter vs React Native: What to choose?

Posted by Julia Poltavets on October 7, 2019

Cross-platform development has been a trend in mobile development in recent years. The desire to reduce the time and money spent on developing mobile applications on two platforms at once has provoked the active development of technology to achieve this goal. Some tools, though, are so similar to each other that it might sometimes be very difficult to make a choice. The difference, as always, lies in details.

Today we’re looking at Flutter and React Native, what their purposes are, why using them for this or that project so that you’d be able to choose the best app development solution.

As we’ve already covered in one of our articles, Flutter is a cross-platform open-source mobile application development framework. The idea is simple: take something new with a development perspective and resolve issues in cross-platform app development. Flutter is based on Dart – a fast, object-oriented programming language.

Flutter offers a widget approach. It provides a modern, reactive framework, and an extensive set of platform, layout and foundation widgets. Widgets allow developing user interfaces of any complexity that are no different from native UIs.

What’s Flutter for?

The key benefit of using Flutter as a cross-platform mobile app development solution is the ability to use a single programming language to develop apps for both iOS and Android. Indeed, Flutter includes everything required to develop cross-platform applications, such as ready-made widgets, testing and integration APIs, rendering engine, and command-line tools. It supports cross-platform application development using a single codebase. That’s why it allows developers to significantly save time and resources on the development of both platforms.

Who created Flutter?

Flutter is started by Google and has been heavily promoted since I/O 2017. The first version of Flutter was known as “Sky” and ran on the Android operating system. It was presented at the Dart Developer Summit in 2015. A stable launch of Flutter, however, took place on 4th December 2018. At Google I/O 2019, Google assured that Flutter is expected to be used both for web and desktop app development.

How mature is Flutter?

Like all new tools, it may experience issues of relatively fresh technology. And though it has a significant Google support and offers great functionalities ready to be implemented, it’s still new, and its libraries are limited. Some developers claim that it could not be used for building a complex commercial app yet and it’s better suited for simpler apps and prototyping.

But Google keeps making Flutter stronger and more resilient, giving priority to enhanced stability, performance, and quality. Thus, we can expect it to strengthen its positions eventually.

What popular apps are made with Flutter

Among Flutter acolytes, there is a legendary London-based Abbey Road Studios with Topline for recording songwriters as well as two Chinese giants: Alibaba with their Xian Yu app, and Tencent with the NOW Live app for video streaming. There are also many other Flutter apps that can attract our attention including Reflectly, Hamilton Musical, Cryptograph, Birch Finance, Toughest, InKino and the like.

What is React Native?

React Native is a mobile infrastructure that compiles with native application components, allowing you to create your own mobile applications for various platforms. There is also an option to target web and windows platforms but it requires additional configuration and setup. The applications developed in React Native are somewhere in the middle between native and hybrid. More information on React Native you can find in our article What is React Native and How it works.

What is React Native for?

React Native is ideal for building natively rendering mobile applications for iOS and Android. As we’ve already mentioned, the development process will not take much time and effort. Whatever you need, an application for doctor-patient communication, banks or other financial institutions, marketplaces or anything else – React Natives turns out to be a great development tool for these purposes.

Who created React Native?

Created by a Facebook software engineer Jordan Walky, React Native appeared as a parallel project of work on React.js. In 2015, React Native became an open-source project. Initially, only iOS support was provided, Android support was added in September 2015. Currently, it uses JavaScript and React.js and allows you to create applications for both Android and iOS.

How mature is React Native?

React Native has been around for 4 years and has already gathered a big community. It’s still comparatively young if you take other mobile development platforms. Nevertheless, with what we have now, the chances to get the answer in case you’re stuck somewhere increases. Besides, having a community means that you’re always surrounded by like-minded pros. And it allows you to share your experience and get feedback whenever you need it.

What popular apps are made with React Native

Bearing in mind all the advantages and disadvantages, not surprising that many companies give preference to React Native for their mobile app development. Thus, React Native was used in the development of Facebook Ads, Instagram, Pinterest, Skype, Airbnb, Yeti Smart Home, Uber Eats, and many more. The projects speak for themselves.

Installation

The installation process has to be simple without too many complicated stages. Thus, even beginners can easily master it. Still, React Native is a little easier to set up if you already have Node.js and NPM installed, while Flutter installation seems to require extra steps.

React Native — NPM

React Native can be installed using the Node Package Manager (NPM) with a simple command. Of course, this requires a Node.js and NMP to be installed. In addition to the framework, you will need such tools as the Android SDK and JDK.

Flutter — Binary Download from Source

To install Flutter, you need to download it from the source code to the desired directory and unzip it. Then you need to manually add the binary to the PATH variable, which is already more time consuming than a single-line command. Just as with React Native, additional components are required. If you have been developing Android mobile applications before then Android Studio has a module that easily installs everything you need to start creating with Flutter.

UI Component and Development API

Your app’s user interface is everything that the user can see and interact with. It is very important to have a variety of pre-built UI components such as structured layout objects and UI controls that allow you to build the graphical user interface for your app. So we need the support for the native component to ensure the app feels like “native”. It is essential that the framework has an API to easily access the native modules.

React Native — Less Components

React Native has a more extensive UI library than Flutter. It is based on native components. Still, React Native relies on many third-party libraries, which in some cases can be a problem as they may contain bugs or incompatibilities of the UI with a specific platform. Nevertheless, UI components can be linked to the project quickly enough.

Flutter — Rich in Components

Flutter runs perfectly with the proprietary widget sets. They are the best option to get a customized UI design that ensures engagement and native support. The number and variety of widgets are increased due to the lightweight and simplicity of the widgets.

Flutter uses only the canvas of the native platform and draws the UI and all the components from scratch. All the UI elements look the same as native ones. As a result, the UI performance is remarkably high.

Developer Productivity

There are not so many tests to check the developer productivity of applications created on both frameworks, but theoretically, Flutter could outperform React Native in it.

React Native

React Native uses the Javascript bridge to interpret the UI components for rendering and then calls Objective-C or Java API to display the corresponding iOS or Android component. This bridge is an extra layer of abstraction that may cause a more extended and laborious development process.

Flutter

Flutter takes a completely different approach to rendering. Let’s start with the fact that Flutter does not use native components of other platforms. Instead, Flutter works directly with canvas and events, it creates its widgets and uses the GPU to render them on the screen. Flutter compiles all Dart code into native ARM code which is processed directly by the processor. This allows the applications to run faster. Both Flutter and Dart adopt regulated documentation that allows improving the productivity of developers.

Flutter vs. React Native: Conclusion

Choosing between React Native and Flutter for building cross-platform native mobile apps may depend on many aspects. If we look from a UI perspective, the difference is not visible for common app users.

For developers or companies, the choice of the platform depends on various factors from the previous tool stack to budget questions. In general, if a company already has a team of developers, it won’t be difficult to transfer people to React Native. Especially taking into account that React Native has a strong and mature community along with native app performance and use of popular JavaScript in developing cross-platform apps.

At the same time, Flutter has strong support from Google and the number of developers interested in the framework is only growing. Thus, in the near future, you can expect Flutter to flourish.

From our side, QuickBlox is getting ready with React Native SDK which is now in beta testing. But React Native SDK will be available really soon! Thus, stay tuned, otherwise, you can miss our great release!

Julia Poltavets

What is React Native and how does it work?

Posted by Julia Poltavets on September 20, 2019

If you are building an app, you are definitely building a mobile version. Whether you choose the mobile-first approach or decide to build for all possible platforms, you will return to a mobile version sooner or later. With 2.7 billion smartphone users worldwide, you cannot ignore such an important chunk of your customer audience.

Building a mobile app, in fact, means building two apps – one for Android and one for iOS. Of course, there are other platforms, too – Blackberry, Windows Phone – but you need to build at least for the two top ones. In its turn, it means two toolsets, two programming languages – Java and Kotlin for Android and Swift or Objective-C for iOS, two developer teams… extra costs, more time, you get it.

That was before React Native. When Facebook released this platform in 2015, mobile development has changed significantly.

Why is React Native so popular?

React Native joins the benefits of React and the advantages of native development. Simply put, it allows building apps running on iOS, Android, and Web. Moreover, it is a JavaScript framework, and with JavaScript quickly becoming one of the most popular languages in the developer community, the learning curve for React Native is not too steep.

React Native has its roots in React using one of its main concepts – reusable components. This feature makes the development much faster than with native technologies. This may be especially valuable when you are building something time-critical, such as an MVP.

As we mentioned already, React Native uses a lot of generic code that is similar for both iOS and Android. This makes updating the app much easier and quicker, as instead of updating two apps you only need to update one code with changes applying to both apps.

Another thing that developers love about React Native is the so-called “hot reload”. Hot reload means that you do not need to recompile your app every time you want to see the changes you have made. Applying the change takes approximately as long as refreshing a browser page. However, if you are using a native language to write your code, you will still need to recompile the app to see the changes you made.

How does React Native work?

Let’s briefly look at the basic concepts of React Native to see how it works.

Components

React Native components are basic building blocks that you can use in almost any app. There are common components, such as Text, View, or Image; UI components, such as Button Switch, or Slider. Besides, among the built-in React Native components, you can find iOS-specific and Android-specific ones that you can use to build native apps for a particular platform.

In addition to the components that are included in the React Native package, you can find dozens of libraries created by the developer community and containing other useful things that you can also add to your app.

React Native Bridge

The React Native Bridge helps to pass data between JavaScript and the native language. This way, developers can reuse the libraries that have been built specifically for iOS and Android and implement their functions in a cross-platform app.

The bridge allows calling native functions from the app by reaching out to the corresponding native libraries.

React Native Threads

React Native supports four types of threads each performing a specific function:

  • Main thread, or UI thread, used for native iOS and Android UI rendering.
  • JavaScript thread over which the JS code is executed and API calls are made. The JS thread passes all the logic of the app updating the native views.
  • Native modules thread used to reach platform-specific APIs when necessary.
  • Render thread generating OpenGL commands that are used to draw the UI.

What to consider when you are going to create a React Native app

Nothing is perfect, and with all the benefits of React Native, there are still certain drawbacks that you need to take into account.

Available libraries are often suboptimal or hard to find

As with many open-source projects, the libraries are often offered as alpha or beta versions. As a result, their performance is not always reliable. Many libraries are focused on one platform only and are not suitable for the other one.

Besides, though the number of available React Native libraries is rather large, the native libraries are still more numerous and diverse, not to mention their performance quality.

Building large React Native apps is difficult

React Native works great for small apps, but when you are planning a large project, be prepared for lots of issues and problems. A large app often requires bridges (aka Native Modules) to be written in React Native which makes the development extremely complicated.

With many bridges, you are getting too many asynchronous processes that need to be validated both on JavaScript and native language sides. This brings certain limitations in the app functionality.

Large React Native projects are more time-consuming

When a project reaches a certain size, it becomes increasingly harder to build and test. You may notice that while React Native can bring considerable time and resource savings in small projects, large applications may become too heavy to build and test quickly.

All these considerations lead to an obvious conclusion – React Native is great for small apps such as MVPs, startups, or non-sophisticated products. At the current stage, we recommend choosing native development if you are planning an extensive and complex application.

React Native use cases

Many popular brands integrate products built with React Native into their apps. If you search for React Native use cases, you are going to come across such names as Facebook (of course!), Bloomberg, or Instagram. However, these brands use React Native not as the primary framework for their apps but only for some of the functions.

For example, Facebook uses React Native for Facebook Ads, and it seems to be suitable for rather complex tasks that the product contains. Before React Native, a large part of the Facebook Ads code was already written in JavaScript, so the migration was not too difficult.

Instagram chose React Native to build the Push Notifications view. In push notifications, the UI is rather simple and using React Native allowed rolling out the new view very quickly. Instagram relies heavily on its mobile apps, thus, being able to share the code between the two platforms was a true advantage for it.

Bloomberg switched to React Native in its mobile app which is a personalized news feed. The company opted for React Native for its speed of development and easy updates.

Why use React Native?

We definitely recommend trying React Native as a framework to create simple apps that can run on both major mobile platforms – iOS and Android. React Native can save you both time and costs which may be especially appreciated by startups. With React Native, you can reach the widest mobile user audience within the shortest time possible.

Great news from our side!

QuickBlox is going to release a React Native SDK to complement its existing Android and iOS SDKs. This way, we are creating a complete mobile development offer giving you the freedom to choose either the fully native development or the cross-platform approach.

If you have any questions about React Native or QuickBlox’s implementation of this advanced concept, or if you need advice about setting up a React Native chat app, contact us for a detailed consultation.