Belitsoft > React Native Development Services > React Native Advantages and Disadvantages

React Native Advantages and Disadvantages

By using React Native framework's native-like UI components, developers build IOS and Android mobile apps that look and feel like apps created using native Android UI components and native iOS UI components. If you need your application be available both on iOS and Android, using React Native means lower costs for building and maintenance (you don't need Kotlin and Swift developers). If you already have React-based web app and need mobile apps for both IOS and Android devices, React Native is the ideal choice.

Contents

What is React Native? What is the difference between React Native and React?

React.js, or simply React, is a JavaScript library for building web user interfaces. But as a part of React Native framework, React.js is used to create mobile user interfaces.

In other words, while React is basically a library for the web apps' front-ends, React Native is an additional extension of React, aimed at producing front-ends for iOS and Android mobile apps.

‘React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform while retaining the speed, fidelity, and feel of native applications.’
Philipp von Weitershausen, Ex-Software Engineer at Facebook

If you want to build an app that doesn’t use a lot of mobile-specific or complex functionality, React Native and its community libraries should cover most if not all of your requirements. However, if the desired features are not yet supported, developers end up writing native modules. You can also rely on open-source projects to provide native bridges for you if you are able to find a viable solution.

It's possible to use React Native alongside an existing app written in Java/Kotlin for Android and Objective-C/Swift for iOS?

Suppose you have an Android app built on Java/Kotlin. You want to create a version that works for iOS too, but you are low on funds and/or time. React Native will be the best choice for code sharing. Thus, you can write one version for both iOS and Android apps which saves your development team more time and resources.

The very first challenge is almost a complete project rewrite to JavaScript. The solution suits you best when you plan to work with React Native to create the app for a different mobile platform in the future. When you are lacking native developers, you can choose React Native and spend fewer resources than on separate iOS and Android apps.

Native modules are a way of bridging native programming and React Native code. These modules need to be written in Java/Kotlin or Swift/Objective-C depending on the mobile platform. They can’t be reused across two platforms but they aim at improving performance in computationally heavy operations like image editing or video playback. Perhaps React Native will not work for the next mobile Photoshop but it is enough if you aren’t aiming at brute-force demanding tasks.

react native bridge

Advantages of React Native

React Native saves time on developing the apps and makes maintenance leaner because your developers don’t have to do the same job twice.

native vs react native

‘Native implementation is great in theory, but practically, we need to think about productivity/code sharing/time-to-market, which is where a cross-platform framework like React Native comes in.’
Keertimaan Tenneti, Senior Engineering Manager at Walmart Global eCommerce

For companies that build and maintain their own apps, this approach effectively cuts the development cost.

From our experience with React Native development, we can conclude that it can save at least 30% of costs compared to native technologies. The exact savings would depend on the number and complexity of platform-specific features.

Since all the versions of your software are written in mostly the same code, updating and adding features becomes a lot quicker.

Further speeding up development is the existence of an open-source library of pre-built components. Thus, you don’t have to spend time writing code to add extra features to your app. There’s probably someone who has already shared that functionality with the community. As a result, experienced developers can get a basic React Native app up and running in just a matter of hours using pre-built components.

If you need a React Native development team, let us know.  

#1 The largest companies are using React Native

React Native was developed by Facebook itself back in 2015. Three years later, the tool has already gained recognition from some of the world’s leading companies like Instagram, Tesla, Skype, Pinterest, and many more.

Facebook shows a great commitment to the project and invests considerable time and resources in enhancing the framework and releasing updates on a regular basis. Facebook’s support makes React Native a stable and future-proof choice.

#2 React Native feels like native and is as fast as native

React Native performs as well as native apps do.

John Calderaio, a software developer,  carried out research to compare the performance of the same app built in Swift and React Native. He was interested in how the basic functionalities are applied in both apps and how such indicators as CPU, GPU, and memory usage differ.

React Native: CPU Usage

React Native: GPU Usage

React Native: memory usage

The result?

The mobile apps in Swift and React Native were almost identical in their physical appearance and speed. React Native app showed poorer results in terms of CPU usage ( by over 10%). However, it had the edge over Swift in GPU usage and in memory consumption.

Thus, React native outshined a Swift application in two out of three categories.

In fact, your user will not able to see the difference between a React Native app and a Swift/Objective-C or Java/Kotlin app. React Native delivers a platform-specific UI that looks and feels native because of JavaScript interactions with the native environment.

#3 Javascript is the most popular programming language in the world

React Native is written in JavaScript. For the fifth year in a row, JavaScript is the most commonly used programming language in the world, according to the Stack Overflow Developer Survey 2017 (36,625 responses primarily from the USA).

Javascript is the #1 programming language in the world

The developer experience is awesome. React developers get significantly faster feedback during development than compared to traditional approaches because they don't need to restart their packager to see every little change. With React Native a mobile app can be developed simultaneously for Android and iOS.

Five Reasons Why Developers Love React Native Source: blog.behrends.io/wege-mit-react-native-zu-arbeiten-5c9f5bbcd85f

React is used much more than similar technologies like Cordova, Ionic and Xamarin, according to the Stack Overflow Developer Survey 2017 (36,625 responses primarily from the USA).

React is among the most commonly used technologies

The immense popularity of React and React Native means that there are great communities behind them and a number of sources to get support and accelerate development.

Disadvantages of React Native

Just like any other technology, React Native is not without its limitations. 

1. The developers still need to know native languages. React Native can use platform-specific features, but it needs the so-called "native bridges" to access them. These bridges are written in - you guessed it - native languages. Yang Mou, a software developer at Oscar Health mentions this issue in this presentation

2. Open-source libraries for RN aren't always well-tested. Having a great number of solutions to typical problems is definitely an advantage. Some of these solutions, though, can present unpleasant surprises of their own. Mou speaks about them in his speech.

Top eLearning Apps Built with React Native

The times when React Native was considered risky to use are long past. Look how EdTech mobile startups built their apps reducing costs and time.

Canvas teacher

CANVAS TEACHER

Canvas LMS by Instructure edtech company provides infrastructure and resources for institutions of K-12 and higher learning. The Network offers 300+ courses from 150 institutional partners including USC, UNLV, Berkeley, etc.

The company guarantees automatic updates of security patches and stores info in Amazon Web Services (AWS) data centers. They ensure material privacy and security by using HTTPS for all communications and encrypting traffic with 128-bit TLS/SSL.

‘Canvas is a trusted name in learning management because, among other reasons, we take privacy seriously as a technical, ethical and practical requirement of educational data.’
Mitch Benson, senior vice president of product at Instructure

The Teacher app allows educators to promote their courses on the fly, both inside and outside the classroom. Currently, it is compatible with iOS and Android devices, but the React Native version of the app is only available on iOS. Canvas Teacher is free to download and provides the following feature set:

  • Update course content and publish an assignment.
  • Communicate with students sending announcements and messages, participating in course discussions.
  • Browse submissions and grade student assignments.

The team, headed by Layne Moseley, Lead iOS Engineer at Instructure, refused Apple tools and decided to use React Native because of its faster development cycle.

‘I will note Artsy moving to RN was one of the main reasons I considered it. I’d followed them for years. Just in general because they were such a big name in the community, and had some heavy hitters. So yeah, naturally I followed them because they document what they are doing so well. [...] When they made the switch to RN I was like “Oh, now I can take this seriously.’
Layne Moseley

Instructure started a new project and developed an iOS app from scratch with React Native. They hired two React developers to help build the basic architecture of the new program. Since then they have used some of their React components in other apps.

‘The transition was great for most of us. There was a feeling though that things are so loose in the JavaScript world. With Apple, you do it their way. With RN, you have the entire JavaScript community and ecosystem at your disposal. And that can be a little overwhelming for some people; developer experience in general is better for us.’
Layne Moseley

Before choosing React Native, the Instructure engineering tried PhoneGap. However, the performance showed insufficient results because of the HTML rendering, unlike React Native that offers native experience.

The team used the RN documentation to learn React Native and consulted with dedicated React devs. The framework allowed developers to boost their productivity by applying features like Hot Reloading. During the development process, they also used VSCode as an editor, Redux as the main library, Flow ESLint, and Danger npm module.

The only disadvantage of working with React Native is that navigation has to be improved. The Instructure team had to use their own-built navigation framework because nothing else worked for them.

‘I think all native devs, regardless of experience, should at least give it a try. I believe that the React paradigm for building UIs is vastly superior to anything else out there. It’s simple to understand and it's powerful.’
Layne Moseley

Learn how we created an e-learning app for a Boston educational startup. Want a better solution? Get a free quote!

Math warriors

MATH WARRIORS

Math Warriors app is a multiplayer real-time 1vs1 game designed to support all ages and all levels. The software allows answering math question of different difficulty and enhances mental and cognitive skills. The math game is made with React Native and available on Android only.

Before working with React Native, Math Warriors team developed numerous hybrid web apps with Cordova and AngularJS. When looking for a proper solution for the math app, they were choosing between web and React Native solutions. Finally, the developers created an initial prototype in React Native and were impressed with the performance and the small efforts needed.

‘The experience revealed that React Native is a game changer and we decided to go with it. It was a decision that our team is still very happy with!’
Tasos Maroudas, creator of Math Warriors

Maroudas mentioned they encountered some performance issues when developing but usually they could find a way to solve the problem. Compared to what they tried before, productivity has increased. React Native allowed writing less code in comparison to AngularJS and provided direct access to native behavior.

‘As soon as you start getting involved in a real project, you will unavoidably find yourself in some problematic situations while coding. For me, it started while trying to convert visual designs to application views.’
Maroudas

math warriors twitter

Initially, Maroudas had an introductory session with a friend specialized in React development. Then he explored RN official documentation that turned out to be “pretty decent” and was constantly improved. The community was impressed by its support and availability of packages developed and contributed by other programmers.

ZeeMee

ZEEMEE

ZeeMee is a  social media platform enabling students to create personal multimedia profiles to be viewed by college admissions. Users on ZeeMee can record short videos to fully express themselves in their apps. They can connect with each other through ZeeMee’s college communities and get acquainted before arriving on campus.  

ZeeMee provides a professional social media experience, where applicants can connect with colleges via software used in over 150 countries. The platform is completely free for students. However, colleges pay ZeeMee for creating specific communities and communication tools that help share unique stories via video.

The company used React Native for creating an iOS app from scratch. The engineering team has tested the framework in production for a couple of months by using it for adding some features to the app. The developers said it was tough, but they got a great experience. They were able to see changes by simply refreshing the app without having to recompile and return.

ZeeMee was impressed with the results, so they integrated React Native to the existing  Android app.

‘Facebook claims that React Native is “learn once, write anywhere” instead of “write once, run anywhere”. But, in practice, our iOS React Native code mostly “just worked” on Android.’
Pete Huitsing, the former Vice President of Engineering at ZeeMee

Thus, ZeeMee engineering had to find and fix the components and styles that were inconsistent between iOS and Android.

‘Using React Native to create a great, consistent UX across Android and iOS might feel painful initially, but at the end of the day its still drastically less work and more maintainable than having two separate apps in Objective C/Swift/Java. As time goes on, you’ll start getting the feel for how to do things in React Native, which will in turn allow your app work consistently on the first try for both Android and iOS’
Alek Hurst, Ex Full Stack Engineer at ZeeMee

Socky

SOCKY

Socky is a virtual intelligent helper that accompanies the child with Autism/ASD and stimulates social communication. The app has different interfaces for the kids and adults, allows sending one-tap messages in vocal and visual multiple-choice manner.

‘Our story started when Ofir Harel (one of my best friends today) got the A verdict — his son Adam was diagnosed with Autism when he was only 2 years old. For the first time in my life, I felt that ‘making the world a better place’ is not a cliché [...] We decided that, from now on, our mission would be to — Help children with Autism to create meaningful conversations, become independent and take an active part in the society.’
Alex Pavtoulov, CEO of Socky

Autism is characterized by widespread deviations of social interactions and communications. For a kid that doesn’t speak, read or write the only way to communicate is to draw on objects or pictures. Taking it into account, the team decided to develop an autism communication app using the most advanced technologies, UX practices, and latest researches.

The Socky team picked React Native because the framework allows for reusing most of the code both for Android and iOS. However, this was one of the toughest decisions: they had an enormous number of graphics, animations, and text-to-speech to implement. Equally important, an app had to be highly productive to avoid possible glitches. Otherwise, kids with Autism would lose their attention in a blink of an eye.

‘One of the events that strongly tilted us towards using RN was the growing amount of developers that were actually onboard with RN and advocate for it.’

One of the companies, which facilitated to choose React Native was Wix.com. Inspired by their example, Socky engineering decided to build their app with RN from scratch. They experimented with the built-in animation libraries, including Airbnb’s react-native-lottie. The toolkit allowed developers to achieve better performance, lower asset weight, and scalable UI. Moreover, they were able to save 25% of the R&D costs.

‘Bottom line — React Native rocks. As surprising as it may sound, we didn’t write any native custom views for it. Socky is purely JavaScript and we’re proud of it! We managed to pull it off with 2 developers (Michael Harari as mobile ninja and David Borohov the backend dragon) without any previous background in JS or Ruby. For us, React Native is an enabler and we love it.’

Learnium

LEARNIUM

Learnium is a social educating platform for universities, colleges and secondary schools. The platform started as a web product enabling students and teachers to communicate with each other. About a year after launching, Learnium user base had comprised over 2 billion mobile web users worldwide.

‘Picture this. Your small development team has built a great web app. Traction is good and your users are now asking for mobile apps. The big question is, “How do you deliver a great user experience on the web, iOS and Android with a small dev team?”. This was our dilemma at Learnium [...]’
Dale Bradley, former CTO at Learnium, said

The engineering team found that native mobile apps offer the best user experience possible and decided to give it a try. They also relied on data that smartphone users spend over 85 percent of their time running native apps. Moreover, 25 percent of mobile web users located in the USA are mobile-only.

The development process had several phases. First of all, they decided to outsource the project, since the company has had a small engineering team inexperienced in mobile development. Thus, Learnium saves time and money that could otherwise be spent on hiring and learning in-house staff. This approach enabled them to keep their mind off creating a mobile app from scratch and focus on improving the web solution.

Looking for reliable offshore team to hire? Contact us!

Secondly, the team wanted to make Learnium responsive to different screen sizes and devices. They reached the decision to use cross-platform development tools, however, didn’t know what framework to choose. Bradley considered PhoneGap/Cordova to build a web app with the native user experience. Even though this solution can speed up software release, it does not provide relevant capacity.

Another option was to use a cross-platform framework that builds native apps. Learnium engineering considered Xamarin, Titanium, and FireMonkey but they do not provide essential access to the native API’s.

‘Finally, we looked at React Native. A young technology from Facebook that enables developers to build world-class mobile applications.’
Dale Bradley

Learnium decided to use React Native in 2015. The choice was based on previous experience coding on JavaScript and rapid app development of both iOS and Android versions. Since then, they have built two pieces of software that contain core functionality of the Learnium web app. Thus, mobile users are able to:

  • Start discussions and communicate with like-minded users.
  • Store information in personal Boards, share material with specific communities and get feedback.
  • Collaborate in teams within Course communities starting real-time chats and sharing resources.

‘We believe that choosing React Native was the right choice when taking into account our resources. The developer experience has been generally issue-free and has given us the opportunity to work with an exciting new technology,” Bradley said. “If you find yourself in similar circumstances to Learnium, we recommend React Native.’

Look through our blog if you need more information about eLearning software:

Top Healthcare Mobile Apps using React Native

React Native continues to rise triumphantly through the ranks of mobile development technologies. Take a look at some examples of successful healthcare companies utilizing its benefits.

Healthcare industry might be a little slow to take advantage of the new technologies. But some entrepreneurs see the opportunities that the innovations have to offer and embrace them.

React Native is currently the most popular framework for cross-platform mobile app development. And it is no wonder that the aspiring healthcare powerhouses use it for their products. 

ALAN

Alan is a French startup, aiming to disrupt the health insurance business. The market they wanted to work on was pretty packed - they were the first new French insurer in over 20 years. But, the founders were able to persuade the investors and have received about $13m in funding.

Alan React Native App

They wanted to dramatically speed up the insurance claims process. It would allow them to stand out and attract more customers. And according to Alan website, they usually reply within a minute from the moment they’ve got the request. 

They were able to achieve this thanks in part to their React Native mobile app. It allows their customers to communicate with the insurance agents, send the photos of the documents and track their claims.

According to developer Robert Zyskowski, they’ve chosen React Native because it helped them release the app faster. It also allowed easy addition of new features and was simple to learn. Alan developers compared it to the native mobile development and other cross-platform technologies, but RN won in the end.

‘While investing in building classic native apps has proven to be highly flexible and scalable, they are costly to develop and have a steep learning curve for engineers who don’t have mobile experience.’
Robert Zyskowski

Moreover, React Native had turned out to have some additional benefits. Code sharing was one of the key advantages, allowing development team to reuse same snippets in both Android and iOS mobile apps, as well as their web application.

Within a month or so, we had two beautiful apps available in the App Store and on Google play.’
Robert Zyskowski

At the moment Alan team continues to develop their mobile application and is eager about contributing to the community.

IODINE

Iodine have made a name for themselves as a provider of plentiful and relevant information about various medicines. They help people make informed decisions about whether a certain drug will work for them by getting information from FDA (Food and Drug Administration), as well as aggregating user reviews. It also provides information about side effects, including potential weight gain and alcohol interaction.

They’ve received $2.5M as their seed funding and have been developing their initial offering ever since.

In 2015 Iodine has released Start – a mobile app for people taking antidepressants. It helps users track their condition and effectiveness of medicines. That’s when Iodine development team has first tried React Native.

Iodine Start React Native App

‘In retrospect, choosing to use React Native back in the spring of 2015 was risky. It had only been available for about a month at the time. We were placing a bet on a nascent, unproven, and frankly, ambitious technology.’
Iodine stated in the dedicated blog post

However, it was a calculated gamble. React Native has Facebook behind it, which gave Iodine team reason to believe that this technology is going to be improved further. Moreover, the team was already familiar with React.js, having developed their website frontend with it.

The gamble has paid off. Firstly, React Native turned out to produce high levels of quality and performance. It allows using the native functions of each device – hence the “native” in the name.

‘And when the framework doesn’t provide a component you need, it bends to your will, allowing you to build native components at just the right level of granularity.’

In the end, the team was able to build the app without sacrificing their design quality, which is an important part of building trust with the user.

Secondly, the developers cited the speed of React Native, meaning both app performance and time it takes to deliver a complete project. The framework allows seeing the results of your code changes in seconds. So making minute adjustments and tweaking important logic becomes much faster.

‘Feedback that a native developer might get in minutes, a React Native developer realizes in seconds.’

Besides, testing the RN code on the actual phone or tablet is also quick thanks to sending JavaScript bundles to the device from local server.

This has another unexpected benefit for iOS devices. Changes in native code have to be approved by AppStore, but if your logic is written in JavaScript. So you can release and send out updates whenever you need to, without having to spend days waiting. Iodine developers mentioned that this feature allows them to respond to user feedback in record time, which is especially important for a startup.

Another advantage of React Native, which Iodine made use of, is its vibrant community.

‘If you encounter a bug in the framework, more likely than not somebody has already opened an issue in the repo or posed a question on Stack Overflow. If you can’t find built-in support for a certain native functionality like push notifications or a tab view, somebody has probably already built it.’

Also, if there are no existing modules for your problem, you can write one yourself and contribute to the open source community.

React Native is not perfect, and Iodine mentioned several pitfalls to watch out for. Developers need to take special precautions to avoid runtime errors and the documentation for this framework is not comprehensive. It could make programmers spend extra time researching the inner workings of RN.

In the end, the development team was able to release Start for iOS in three months. And later (in about a year’s time) they've made an Android version in another three months.

GYROSCOPE

Gyroscope specializes in health analytics. Their online personal dashboard helps users learn more about their daily activities and achieve their health-related goals – be they 6-pack abs, weight loss or peace of mind. Gyroscope can integrate with popular fitness trackers like FitBit. It also utilizes AI to assist in teaching people healthier behavior.

Gyroscope React Native App

The company has received $1.3M in investment and their iPhone and Android apps rank 4,5 and 3,5 stars on their respective marketplaces.

The apps were built using React Native. It was no surprise – Eric Florenzano, one of the original co-founders, was a big fan of React.js. So he decided to try RN for their mobile app.

Anand Sharma, the other co-founder, was also impressed with its ease of use.

‘Within a few hours, I was able to edit elements on the page and style them with a Flexbox/CSS-like syntax. It was magical.’
Anand Sharma

Apparently, the experience was successful, as in April 2017 Gyroscope has hired a custom software development company to create an Android version of their app also using React Native. And now it has over 100.000 downloads on Play Market.

Send us a message to get your own dedicated team!

OSCAR

Oscar is a New York-based health insurance startup. It leverages modern technologies to improve customer experience. Their mobile app offers easy communication with concierge team and doctors available 24/7. There is even a motivation to stay fit – step tracker which rewards achieving goals with Amazon gift cards.

Since their founding three years ago they’ve received a hefty $727.5M investment and are expected to generate $1B in revenue in 2018.

Oscar React Native App Oscar mobile app

According to Yang Mou, one of the Oscar programmers, their engineering team currently has about 80 people, which is not that big taking the company size into account.

But thanks to their streamlined approach to the development process it is easy for them to be full-stack developers. One team can make same features both on mobile and on web app, saving money for the company.

Oscar technology stack revolves around React and React Native for frontend and Python (Flask framework) for the backend. It means the developers only need to learn these few technologies to stay effective.

According to Mou, React Native allows for over 80% code reuse, especially in typical tasks like pulling information from API. Not having to do the same job twice speeds up the development.

When they've announced React Native, Facebook representatives stated the framework’s principle of “Learn once – write anywhere”. Oscar developers have already known React, which they used for their web app frontend. Although they couldn’t always just copy and paste their code, learning React Native was quick and easy for them. It was another major benefit to Oscar team.

‘In our experience, it takes more time for native engineer to learn React Native, than it is for web engineer.’
Yang Mou

Like their Iodine counterparts, Oscar devs have made full use of the active community that has grown around React Native and improved their speed.

‘They [the community – A.K.] are very good at opensourcing. Anything you want to do, someone tried to opensource that already.’
Yang Mou

Another benefit of React Native, which provides “an unbelievable developer experience”, was the fast feedback that the programmers were able to receive. Thanks to the Hot Reloading feature Oscar team was able to see the results of their code changes in seconds rather than in minutes it usually takes for native developers.

Finally, Mou said that React Native and the libraries around it make testing the software much easier than on native technologies.

Oscar React Native App

Despite the positive impression that this framework has made on them, Oscar developers mention some of the drawbacks of React Native. The other teams should consider them when choosing the right technology stack.

The framework develops rapidly, which means the applications built with it will always be behind the latest version and accumulate technical debt. The APIs used in the app are always under threat of breaking. And every once in a while the project would need extra work to make sure everything stays operational despite the updates.

‘And if you fall behind, someone’s got to take a week to just get you caught up,.’
Yang Mou

A vibrant and productive community has its drawbacks as well. There are many libraries teams can use, but those libraries aren’t that well-tested, potentially giving the developers unpleasant surprises.

As much as it allows to decrease the need for native code, React Native doesn’t eliminate it completely. Some knowledge of the native Android development is still required for the app to function properly.

‘‘You cannot do it with just JavaScript engineers and then spend a lot of time figuring out why your activity disappeared.’
Yang Mou

The performance of React Native applications is also falling behind when compared to native technologies. It was acceptable for the Oscar team, but developers working on more resource-intensive applications might see it differently.

Finally, this framework still “feels like an iOS-first project”, because Android side of it is lagging in terms of getting updates and bugfixes. Although, according to Mou, the situation has been improving lately.

Conclusion

With each passing day, more healthcare companies are turning towards promising modern technologies like React Native. Although it is not a one size fits all solution, it could be very beneficial when used properly.

Looking for React Native developers? Send us a message and get a free quote on your project!

Migrating To React Native: Top Case Studies From Well-Known Companies

There are many examples of how world-known companies migrated to React Native. Artsy engineering, for example, chose the approach to update their 3 years old iOS app that was created in Objective-C / Swift. The framework was useful for the company intending to support other platforms in the future without creating more teams.

Bloomberg, for its part, rebuilt the company’s consumer app for iOS and Android with React Native. The framework was considered as a first-rate tool to build native apps simultaneously for both iOS and Android platforms in comparison with other free software projects available in the modern market. By using React Native, developers modified the interactive animation by adding a parallax of images in the news feed, introduced a feature to swipe a headline to share or bookmark an article as well as allowed access to live TV or event feeds for on-demand viewing.

‘React Native is the best out there. Expect it to appear in other Bloomberg mobile apps in the future.’
Gabriel Lew, Senior Software Engineer at Bloomberg

Airbnb engineering introduced React Native into an iOS and Android code base in 2016. They developed, for example, Lottie - an open-source library that facilitates adding animation to native apps. The tool allows engineers to build richer animation without rewriting the code.

airbnb-react native-lottie

Delivery.com used React Native when integrating into the existing iOS app and built new views using JavaScript. The management was so satisfied with React Native outputs that they approved the development of a full-on Android version with the framework.

Case studies are a great way to know the experience of how other successful companies implemented React Native in their software development processes. Do you need React Native developers? We are here to help you. Get a Free Quote.

Migrating Cross-platform apps to React Native at Walmart

Walmart is made of many different brands, such as Walmart Grocery, Sam’s Club, ASDA, Walmart.com, etc. — each with its own IT needs, requirements, and dev teams. Things get even more complex on the mobile side. Each brand has two teams of mobile developers, building apps for each OS, that are similar in functionality, but different in execution. This was not by choice, but rather necessity as it is very difficult to find highly-skilled developers who are adept at writing native apps in both iOS/Android.

For associate tools, they mostly wrap web apps using ionic or similar solutions.

They felt that React Native could really change the paradigm. 

‘Solutions in the open source world similar to what we accomplished are ‘PhoneGap’ or ‘Cordova.’ Going down this route led to a noticeable difference in performance compared to other parts of our native app. This was validated when we re-wrote those parts in React Native or mobile app technologies and saw metrics which showcased more engagement from our customers.’
Alexander Grigoryan, the senior director for software engineering, application platform and online grocery for Walmart Global eCommerce

The team also looked at Microsoft’s Xamarin tools, but decided that it wouldn’t give it benefits like reusable UI components , shared JavaScript modules and over-the-air updates as React Native.

‘Our front-end for web is also React, so it all just made sense for us to invest in React Native as the solution.’
Alexander Grigoryan, the senior director for software engineering, application platform and online grocery for Walmart Global eCommerce

So, they already have mobile apps in production that have lots of features powered by tons of code.

Typically, developers who want to move their apps to React Native would have to either rewrite their app from the ground, build a quick and dirty integration that’ll cost them later, or build a new platform and tooling for integrating React Native into their apps. Rewriting everything would be a massive investment of time, hiring, and training (translation: money). And a complete rewrite is prone to failure compared to an incremental migration approach. 

Walmart went with the last option. They created the Electrode Native Platform. The basics idea here is that Electrode Native allows large companies like Walmart to take their existing apps and slowly migrate parts of their code to React Native.

Alex Grigoryan, Sr Director of Software Engineering at WalmartLabs, says, "Electrode Native offers a streamlined integration of React Native into existing mobile applications. With Electrode Native, there will no longer be a need for an engineer who specializes in both mobile and React Native technology in order to put the two technologies together. For your existing mobile application, there is no heavy infrastructure, code, or development lifecycle changes.

When considering their approach to using React Native, WalmartLabs developers decided that building features into production applications incrementally would be the solution with the highest chances of success.

As of February 2017, they migrated one of the webviews to RN. As of August 2017, they were migrating few more webviews and building new features in RN. Walmart developers reported no scaling issues.

Native iOS and Native Android to React Native at Bloomberg

Bloomberg is a financial software, data, and media company headquartered in New York City with 9.4 billion USD revenue (2014). Bloomberg’s mobile app for iOS and Android, launched on January 2016, offers users personalized content, videos and live feeds. To develop the app, an engineering team at Bloomberg’s New York City headquarters developed the app using React Native.

  • With React, Bloomberg engineers were able “to more easily and quickly rebuild the company’s consumer app for both mobile platforms”.

‘While other free software projects like Titanium and PhoneGap promise to offer developers a native look and feel, Bloomberg found that React Native was the best tool available in the market today to create native apps simultaneously for both iOS and Android platforms.’

  • Before React Native, Bloomberg teams would have developed the iOS and Android versions in parallel without being able to share most of the code they wrote, leading to delays and repetition. By comparison, the React Native platform’s unified development capabilities and made for a seamless process that allowed each developer to focus on one feature at a time.

‘That helped speed things along. It took the team of developers in New York just five months to develop the app—roughly half the time it would have taken had they not used React Native.’

  • Another benefit of React Native is that it automates code refreshes, accelerating the release of new product features. Instead of recompiling, your app reloads instantly. Once users open the app, they get the latest update.
  • That same feature lets coders experiment, iterate and quickly push out upgrades with A/B testing. For example, before the app’s launch, the team tested user preferences by placing images on the left and right sides within the app, collecting data and metrics to identify what internal beta users favored. This was just one of the many experiments the team conducted to validate this tech and workflow.
Native iOS and Native Android to React Native Source: itunes.apple.com/us/app/bloomberg/id281941097
  • React Native made it easy for Bloomberg engineers to “sprinkle in interactive animation,” such as a parallax of images in the news feed or the ability to swipe a headline to share or bookmark an article. It also enabled the team to ensure the continual updating of the app with market-moving news, data, and analysis, all of which is accessible via personalized widgets. There is no performance impact on media features like animation because the JavaScript is running on a separate thread.

‘React Native is the best out there. Expect it to appear in other Bloomberg mobile apps in the future.’
Gabriel Lew, a senior software engineer at Bloomberg

Native iOS (Swift) to React Native at Artsy

Artsy is a New-York based startup with total funding amount $100.9M. It is a marketplace for buying and selling visual art online. Artsy’s database contains over 270,000 pieces for sale from the top galleries and auction houses. Artsy’s iOS app was first developed in Swift but soon “a small team of iOS developers with decades of native experience switched to React Native”. In the series of blogposts Artsy Engineering team covers the reasons why they made that choice, including “support other future platforms such as Android without creating more teams”, enabling “different business teams to work on the app without disrupting each other”, evolving “our architecture in order to increase programmer efficiency”. As they concluded, “new apps going forward we will default to React Native apps”.

Swift to React Native Source: github.com/artsy/eigen

Other Case Studies

  • Wix.com is a cloud-based web development platform enabling users to create HTML5 web and mobile sites through the use of online drag and drop tools. The video-study “Building a React Native App for 80 Million Users” explains why the team chose React Native for their official app, what challenges they resolved, what practiced methodologies they applied and what gaps they still trying to solve. Presented by Tal Kol (Head of Mobile Engineering at Wix.com). Popularity: 49,330 views; 547 likes. Date: October 1, 2016.
  • Instagram is a social networking app developed for sharing media content (photos and videos). The study “React Native at Instagram describes how React Native was integrated into an existing Instagram native app: the main challenges and results. React Native allowed product teams to ship features faster to both their iOS and Android apps. Written by Martin Bigio, Don Yu, Brian Rosenfeld and Grace Ku (Software Engineers on the Core Client team at Instagram New York). Popularity: 3.9 K likes. Date: February 6, 2016.
  • UberEATS is an online platform for ordering food from restaurants. The study “Powering UberEATS with React Native and Uber Engineering” describes how Uber’s engineering team rebuilt their app’s Restaurant Dashboard with React Native. Written by Christopher Lewis (SR Software Engineer at Uber). Popularity: 855 shares. Date: March 28, 2017.
  • SoundCloud is an online music and podcast streaming platform that enables its customers upload, record, promote, and share their originally-created sounds. The study “React Native at SoundCloud” describes how SoundCloud engineering team built SoundCloud Pulse (an app for creators) with React Native: how they started working, what things they learned along the way, what features they preferred and what further steps towards React Native implementation were planned. Written by Jan Monschke (Frontend Engineer at SoundCloud) and Peter Minarik (Engineer at SoundCloud). Date: August 3, 2016.
  • Skype is a telecommunication app software product that focuses on providing video chat, voice calls and instant message communication between computers and mobile devices via the Internet. The study “Introducing the next generation of Skype” informes how the programming team rebuilt Skype app and what new features were introduced. Popularity: 2K shares. Date: June 1, 2017.
  • Facebook Ads was created to let users who advertise on Facebook manage their accounts and create new ads on the go. The study “React Native for Android: How we built the first cross-platform React Native app” describes the way Facebook software engineers developed the Ads Manager app. The team shares how they built this Facebook’s first fully React Native app and the lessons they learned. Written by Daniel Witte (?) and Philipp von Weitershausen (Ex-Software Engineer at Facebook and Firefox, Software Engineer at Silk Labs). Popularity: 1,3 K likes. Date: September 14, 2015.
  • Mapbox is a location data platform for mobile and web apps. The company provides building blocks to add location features like maps, search, and navigation into any experience its customers create. The study “Our React Native GL library is in alpha” describes the way Mapbox mobile team rewrited their current experimental React Native library and released an alpha. Written by Nicholas Italiano (Software Engineer at Mapbox). Popularity: 352 likes. Date: September 28, 2017.
  • Airbnb company hosts an online marketplace and hospitality service allowing its customers to rent short-term lodging including vacation and apartment rentals, homestays, hotel rooms, and hostel beds. In the talk “Hybrid React Native Apps” the speaker focuses on how the engineering team introduced React Native into an iOS and Android code base and what main challenges they faced. Presented by Leland Richardson (Software Engineer at Airbnb). Popularity: 396 likes, 71,812 views. Date: September 13, 2016.
  • Glitch app allows users to buy Adidas Glitch customizable boots that can be combined with differently colored uppers and inner-shoes for more personal football cleat experience. The study “How we have been breaking patterns with the adidas GLITCH” describes how POSSIBLE development team created the app from scratch by using React Native framework. Written by Istvan Makary (UI Developer at POSSIBLE). Popularity: 301 likes. Date: December 12, 2017.
  • Clubhouse is a software development company aimed at building intuitive project management tools. The study “Going Mobile with React Native” describes what best practices the company’s development team used when building and alpha testing the Clubhouse iOS app. Written by Camille Emefa Acey (VP at Clubhouse Software). Popularity: 67 likes OR 195 shares. Date: July 6, 2017.
  • Made by Many is a digital product design company specialized in product innovation and digital transformation. The study “A Year of React Native: Styling Part 2” describes how React styling concepts provided flexible ways of creating apps for iOS and Android. The developers team explained why they had chosen React Native and what best practices they had learned along the way of using the technology. Written by Sam Murray (Developer at Made by Many). Popularity: 11 shares. Date: September 21, 2017.
  • Yeti Smart Home was developed to control all the home’s devices from a single app. The study “Developing beyond the screen” describes the methods how React Native and Firebase helped the team to release Yeti. Written by Jesús Darío (CTO and Co-Founder of Netbeast, today’s Yeti) . Popularity: 32 likes. Date: January 13, 2017.
  • Delivery.com makes possible to order products and services online from the local restaurants, wine and spirits shops, grocery stores, laundry and dry cleaning providers. The study “React Native in an Existing iOS App: Getting Started” brings up to speed on why the programming team decided to use React Native for developing new iOS app and how they built new views using JavaScript. Written by Jesse Sessler (Front End and Mobile Developer at Delivery.com). Popularity: 118 likes. Date: January 8, 2016.
  • Discord is a freeware VoIP app designed for gaming communities. The study “Using React Native: One Year Later” is centered around the React Native features the developer preferred when building an iOS app from scratch. He shares his doubts about React Native usage and explains why he revised his opinion. Written by Fanghao Chen (iOS Developer at Discord). Popularity: 1,4 K likes. Date: June 7, 2016.
  • Gyroscope was created for the purpose of checking constantly and showing an overview of how users do across various health aspects: mental health, weight, physical activity, heart rate, etc. The study “Building the Gyroscope App with React Native” describes how the team developed and released their new iOS app on React Native and how it should be used to deliver the best results. Written by Anand Sharma (Founder and CEO at Gyroscope). Popularity: 1 K likes. Date: June 16, 2016.
  • Huiseoul is an e-commerce company that provides personalized skincare counselling and Korean skincare products exclusively to China. In the study “Building a conversational E-commerce app in 6 weeks with React Native” are listed the tools that helped the developers build a mobile app for a conversational e-commerce service. Written by Johnwook Choi (Software Engineer at Huiseoul). Popularity: 50 likes. Date: September 8, 2016.
  • The li.st app is a way to create lists where users can share their personal experiences, opinions and discover lists from the leading voices in TV & film, music, food, sports, news, fashion and more. The video-study “Building li.st for Android with Exponent and React Native” develops the topic about what knowledges developers should have when building large apps on React Native. Presented by Brent Vatne (Software Developer at Expo). Popularity: 18,743 views; 116 likes. Date: June 7, 2016.
  • Townske is a travel publishing platform focused on sharing and discovering visual city guides to help people easily explore any city in the world. The study “Townske app in react native” is based on the experience of a web developer who built a Townske iOS app on React Native: why he chose React Native, what challenges he faced, and what benefits he discovered. Written by Dean McPherson (Co-Founder of Paperform). Popularity: 100 likes. Date: December 15, 2015.
Never miss a post! Share it!

Written by
CTO / Department Head / Partner
I've been leading a department specializing in custom eLearning software development and Business Intelligence software development for 17 years.
4.2
6 reviews

Rate this article

Recommended posts

Our Clients' Feedback

technicolor
crismon
berkeley
hathway
howcast
fraunhofer
apollomatrix
key2know
regenmed
moblers
showcast
ticken
elerningforce
Let's Talk Business
Do you have a software development project to implement? We have people to work on it. We will be glad to answer all your questions as well as estimate any project of yours. Use the form below to describe the project and we will get in touch with you within 1 business day.
Contact form
* I give my consent for Belitsoft to process my personal data pursuant to Belitsoft Privacy Policy in order to handle my request and respond to it. I am aware that I have the right to withdraw my consent at any time.
Call us

USA +1 (917) 410-57-57

UK +44 (20) 3318-18-53

Israel +972 53-337-9957

Email us

[email protected]

to top