Demystifying React Native Mobile Apps for Marketers and Product Managers

What is React Native?

As technology advances, the way we create websites, mobile apps and new user experiences also evolves. One of the biggest advances in mobile app development has been an open source project directed by Facebook called React Native. Simply put, it allows you to create native mobile apps for multiple platforms using Javascript, backed by the power of React. This means that if you are building an app for Android and iOS, then you don’t need to write the code twice. Just create the app once using the React Native framework, which will then port the code to native script for both the platforms.

But that is all technical talk.

The important part is that creating mobile apps with React Native opens up a world of possibilities for product managers and marketers in terms of shipping features faster, creating good UX and testing several marketing strategies by iterating user flows, faster than before.

Exciting isn’t it?

But do you know what’s more exciting? Having a full stack marketing automation suite which supports multi-channel engagement for your React Native app. Yes, we’re talking about WebEngage 🙂

The team at WebEngage is excited to announce the launch of our React Native SDK which allows full integration with our multi-platform marketing automation and user engagement suite. Knowing how much more alive and personable an application feels with a rich WebEngage integration, we hope that having our solution available on React Native means that you have one less hurdle in your way to making it big!

But there are more reasons for our excitement, than simply expanding our business opportunities. Here’s why the team at WebEngage strongly believes that React Native is the next big thing in mobile app development and mobile marketing:

1. React Native is a Multi-Platform Framework Which Enables Rapid Product Development

One of the biggest advantages offered by React Native for product managers (and marketers to some extent) is its versatility. Here’s an in-depth explanation of all the app development scenarios made possible by its versatile framework:

1.1. Lower development time through code sharing across platforms

One of the major reasons why React Native has caught up so quickly across the world with product managers looking to build consumer facing apps, is its ability to allow code sharing (upto 99% in some cases) across the Android and iOS versions.

React Native calls itself a ‘Learn Once, Run Everywhere’ platform. This roughly translates into – a developer can share a great deal of logic between the applications across several platform, while still being able to build platform specific implementations. For example, the team at Bloomberg reveals that owing to this function of React Native, they were able to build their consumer facing news app within 5 months, taking half the time compared to building the app separately for Android and iOS.

1.2. Bridging React Native code and Native code for adding platform specific components

React Native is highly compatible with native app components. So anything that can’t be done through Javascript/ React can be achieved by bridging the React Native code with the Native script. In simple words, bridging allows developers to drop down into the native code whenever necessary. So one can simply combine the React Native code with app code components created in Objective C/Swift for iOS and in Java for Android by building a central logic and delegate native tasks. Here’s how you can go about it:

[pullquote align=”full” cite=”” link=”” color=”” class=”” size=””]import React, { Component } from ‘react’;
import { Text, View } from ‘react-native’;
import { TheGreatestComponentInTheWorld } from ‘./your-native-code’;
class SomethingFast extends Component {
 render() {
   return (
     <View>
       <TheGreatestComponentInTheWorld />
       <Text>
         TheGreatestComponentInTheWorld could use native Objective-C,
         Java, or Swift – the product development process is the same.
       </Text>
     </View>
   );
 }
}[/pullquote]

For example, a China based e-commerce company called Huiseoul, used React Native to build a fully functional, conversational mobile app in just 6 weeks with just 3 developers (with no prior experience of building native mobile apps) and a product manager! Sounds unbelievable, right? You can read all about their journey right here.

Further, there is a flourishing ecosystem of React Native components and plugins which can simply be integrated by developers into the app, instead of manipulating the entire code. This saves a considerable amount of time in building features from scratch and pushing them to the live environment.

1.3. Adding components built in React Native to existing Native apps

Another interesting thing made possible by this framework is that developers can now build new product features for native apps using React Native and add them to the existing code. This means half the development time, since you will need to write code only once.

For example, Instagram started exploring React Native in early 2016 as a means to ship product features faster through code sharing. The development team started using React Native tools like Live Reload and Hot Reloading to eliminate compile-install cycles for their Android and iOS app completely. The higher iteration speed of React Native allowed the product team to launch-test-iterate product features at a much faster pace, compared to developing the features natively. A few features of Instagram which have been developed using React Native include; Push Notification Settings, Edit Profile View, Save Photos, Post Promote, Photos Of view and many more!

Here’s a comparison of what the Push Notification Settings and Photos Of view looked like before being ported to React Native from WebViews Vs. after:

UI and UX of Push Notification Settings of Instagram’s iOS app – A comparison before and after shifting to React Native | Photo credits: Instagram

UI and UX of viewing photos on Instagram’s iOS app – A comparison before and after shifting to React Native | Photo credits: Instagram

1.4. React Native Enables dynamic app updates outside the app store

Simply put, React Native allows you to generate native code to push updates outside of the app store – and here is why this is a dream come true in the mobile development space:

The Apple app store is infamous for its long review process. Any product manager who has gone through the process of pushing updates to their iOS apps can relate to the pain and the stink eye your developers give you when you want to push individual updates. But React Native has a solution for this. Since the framework primarily uses JavaScript, it allows you to push app updates directly to the Android and iOS versions without having to go through the app store.

This means that once you have the right structure in place, the process of updating your application, fixing bugs on the go, conducting A/B tests and creating new landing pages becomes much more agile.

For example, Facebook mentions that the feature, Ads Manager, shares around 85% of the code between their iOS and Android versions. This cuts down the process of adding new features to Ads Manager on both platforms by 80 – 90 percent! While there are a number of other tools which allow you to push app updates outside the app store, none surpass the ease and almost bug free updates React Native makes possible. Here’s what Ads Manager looks like on Facebook’s Android app:

2. The React Native Framework Enables Marketers to Take More Control

One of the most important aspects the team at WebEngage is excited about is the freedom React Native apps give to marketers to experiment with user engagement strategies. The dynamic app updates and common tech stack make it possible for marketers to harness their existing resources to quickly test-modify user experiences, user flows and landing pages – with reduced dependency on developers. In this sense, React Native has the makings of a great marketing tool too.

For example, the team at Bloomberg used React Native to create their new consumer facing app for Android and iOS. The app is content heavy and requires constant in-app updates along with regular refreshing of the homepage with latest content. React Native enables them to ensure continual updation of the app with breaking news and data, which can be accessed via personalised widgets, without affecting its performance.

They also found React Native to be the best framework for adding interactive animations to the app’s UI such as, parallax of images in the news feed and swiping a headline to share or bookmark.

[pullquote align=”full” cite=”” link=”” color=”” class=”” size=””]“Once users open the app, they get the latest update and will always have the best experience…,” says Gabriel Lew, a senior software engineer at Bloomberg who led the development team’s effort.[/pullquote]

3. React Native Provides a Better UX Compared to Apps Built Using WebViews

While both React Native and WebViews offer code sharing across Android and iOS for mobile apps and a faster iteration speed, there are a few problems which creep up while building features using WebViews:

1. The UX of the features doesn’t feel native
2. High startup time of features

As is evident, both issues lead to a poor user experience which could contribute to a high churn rate. However, React Native takes care of these issues with its slick ability to port code natively, offering a great user experience, with lower startup time.

For example, the developers at Instagram initially built the feature, Post Promote using WebViews as it allowed them to iterate faster than the native code. But the feature was plagued with a slow startup time and a UX that didn’t feel native. Hence, they decided to port the lightweight feature to React Native. This led to the creation of the fantastic Post Promote feature you use today! The best part – 99% of the code for Post Promote is shared across the Android and iOS versions of the app. This is what the UI and UX of Post Promote looks like on Instagram’s iOS app:

Another feature which the developers at Instagram ported to React Native was Comment Moderation. This feature allows users to moderate the nature of the comments received on their content. Initially built in WebViews, they faced similar UX and startup time problems with the feature. Here’s a screenshot comparing the view of the feature on Instagram’s iOS app, as seen on WebViews and React Native:

A comparison of the UI and UX of the Comments Moderation feature of Instagram – before and after being ported from WebViews to React Native | Photo credits – Instagram

What can WebEngage do for your React Native Mobile App (and business)?

WebEngage is a powerful marketing automation suite which makes it possible for businesses to improve their user engagement rates. You can think of the WebEngage dashboard as a full stack, on-stop-solution for all your customer retention and analytical needs. We make all this possible for marketers by enabling cross-channel user engagement via Web Message (notification, survey, feedback), In-App Message, Push Notifications, Emails, SMS and Web Push, backed by in-depth performance analysis.

Thus, by integrating your React Native mobile app with WebEngage you make it possible to automate user flows, marketing campaigns, and targeted user engagement through push and in-app notifications. But this is just the tip of the iceberg. If your business has a website and a mobile app, WebEngage makes it possible for you to achieve the following on a centralised platform;

1. Manage all your user segments and user profiles
2. Create multi-channel marketing campaigns for users who interact with your product through desktop and mobile
3. Automate user journeys across multiple platforms and channels through the WebEngage Journey Designer
4. Analyse real time data across user events, campaigns and channels

So if you’re on the lookout for a kickass multi-channel marketing automation suite which supports your React Native app and website, look no further – Request a free personalised demo with WebEngage right away!