Stack Overflow released their annual developer survey not so long ago and as one could expect, JavaScript dominated the most popular technologies list once again, sitting on the very top as the most commonly used language with 69.7%.
What is also great to see is that React Native remained at its position, gaining 1% in comparison to the last year, reaching 11.8%. Speaking of React Native…
Table of Contents
What is React Native?
React Native is an open-source JavaScript-based mobile app framework, developed by Facebook and is used to power applications for various platforms, most commonly used for Android and iOS cross-platform development, by enabling developers to use React along with native platform capabilities.
It started as any other framework for cross-platform development and was frowned upon, considered inferior to native development. Thankfully, as the time went by, and it gained popularity, the technology itself evolved and the community that gathered around it has built lots of useful libraries. To the point that more and more big players started experimenting with it. And that’s where today’s piece comes from.
I’ve compiled a long list of well-known companies that decided to use React Native and decided to stick to it. Feel free to read along and if any examples will make you curious to find out more, I’ve linked relevant articles that go even more in-depth into the matter. Hope you find this material useful.
Bloomberg and React Native
Bloomberg is a privately held financial, software, data, and media company from New York.
At the end of 2016, the company released their new consumer mobile app for both iOS and Android. To develop the apps, Bloomberg’s Engineering Team decided to use, then fresh, technology developed by Facebook — React Native. As you already know, it allows simultaneous cross-platform mobile development. Considering that beforehand they were working on separate native apps, the lack of ability to share common code between the apps always led to delays and repetitions. After they tested and prototyped using React Native, they decided to take the risk and rebuild their apps.
‘The consumer mobile app was a huge endeavour because we had to transition the entire team to React Native.’ ‘
<=”” img=”” alt=”25+ in-depth examples of React Native apps in 2021″>
As a result, they managed to develop the app in roughly half the time it would have taken had they stuck to native development and time saving was not the only benefit of changing the tech stack. React Native unified their dev capabilities, allowed each dev to focus on a single feature at a time, accelerated the release cycle and increased performance for media features (i.e. animations, because JavaScript runs on a separate thread) amongst other things.
You can read more about the tech side of things at Bloomberg on their blog.
Facebook and React Native
Facebook — a technology conglomerate from California, the creator of React Native. Many wonder, why doesn’t Facebook switch all of their applications to React Native and whether React Native is dying? And while it’s true that Facebook Messenger is a native app that was re-written in 2020, again, as a native app, Facebook still heavily uses their JavaScript-based framework.
‘The main app has 750+ React Native screens, and it’s used for several standalone apps.’
When it comes to standalone apps, Facebook used React Native to develop their cross-platform Ads Manager app. Both iOS and Android versions were coded by the same team and the framework seems to handle the complexity of the Facebook Ads business logic just fine.
<=”” img=”” alt=”25+ in-depth examples of React Native apps in 2021″>
When building the Facebook Ads app, the team started with iOS and then proceeded with Android and thanks to React Native’s code reusability, they were able to re-use as much as around 85% of the code that was written for iOS.
They also used React Native to develop another data-heavy standalone app — Facebook Analytics. If you’d like to read about Facebook’s approach to engineering, head over to their blog.
UberEATS and React Native
UberEATS — an American online food ordering and delivery platform launched by Uber in 2014. Fortunately, UberEATS had a lot of similarities between the parent Uber app and hence the team could leverage much of Uber’s existing tech stack to quickly launch the new product.
‘A trip became a delivery. Driver-partners became delivery-partners, and riders became eaters. But there was no analogous party to the restaurant, because for the past five years the assumption had been that there would only be two people involved in a single trip; not three people and one cheese pizza, order of Pad Thai, or chicken fajita.’
As a result, Uber Engineering team had to come up with a way to set a restaurant-delivery-eater communication with a bare minimum of information relayed:
- Placement of a new order
- Acceptance of an order
- Arrival of a delivery-partner
- Completion of an order
A simple React/Flux single-page web app was developed to be used with tablet devices. Because of its web nature, many of the features UberEATS needed were simply not feasible on a browser or were very limited.
When looking for a better solution, the UberEATS team decided to give React Native a try and built a prototype to learn whether, then rather new, RN technology will be able to cover their needs, and it successfully passed the test.
React Native eventually substituted their web-based Restaurant Dashboard. If you’re curious about the tech side of the migration, you can read an in-depth case on Uber Engineering blog.
Discord and React Native
Discord — an instant messaging, VoIP and digital distribution platform that was initially designed for gamers but now is also used by various industries to host their communities.
React Native has been running in Discord’s veins since the very beginning. As they were developing their web-based application, they also needed mobile ones. They started with iOS, but didn’t go for native development and decided to choose React Native instead. It’s worth keeping in mind that the technology back in 2015 was very far from what it is now, yet their tech lead believed in it.
This resulted in:
- v1.0 built within two weeks using the already existing front-end infrastructure,
- Flexbox’s style code was about half as long and far easier to understand than the code of Auto Layout,
- iOS app and web app shared 98% of the code
- performance-wise, the app was only slightly behind those using Objective-C or Swift
Fast-forward to 2021 and the team is still extremely happy with the selected technology. Their iOS app has millions of monthly active users, is 99.9% crash free and has a 4.8-star rating on the App Store.
Yes, it suffered performance issues on old devices, but React Native allowed them to do the necessary optimization which you can read more about here. And even more can be found on their Engineering Blog.
Instagram and React Native
Instagram — a photo and video sharing social networking service owned by Facebook.
In early 2016, Instagram dev team started looking for ways to enable faster features shipping and thus trying to use React Native to achieve the set goal through code sharing and higher iteration speeds, using tools like Live Reload and Hot Reloading that eliminate compile-install cycles.
To kick off their experiment, they decided to port the simplest view they could imagine — Push Notifications, which were originally implemented as a WebView. Although they had a few performance issues at the beginning (let’s not forget React Native was launched in 2015 and in 2016 it still had a long way to go to reach its 2021 performance) they were fixed as the React Native team kept updating the technology.
As a result, the Push Notifications were merged into the core app, and they started working on porting other features.
According to the Instagram’s blog post from early 2017, React Native adoption allowed their product teams to ship features much faster to both Android and iOS applications. Below you can see the percentages of shared code between two platforms in specific features:
- Post Promote: 99%
- SMS Captcha Checkpoint: 97%
- Comment Moderation: 85%
- Lead Gen Ads: 87%
- Push Notification Settings: 92%
Microsoft and React Native
Microsoft — an American multinational technology company, familiar to anyone reading this. They are known to use React Native is various of their products.
For instance, in 2019, Appfigures scanned their pool of applications and here’s what they found:
As you can see, there’s a lot of apps on both lists, I’m very sure you’ve used at least some of them. It’s quite plausible that only some parts of those apps are using React Native, but that still is a very impressive result.
Pinterest and React Native
Pinterest — an image sharing and social media service with over 400 million monthly active users as of August 2020.
Early 2017, a small group of Pinterest engineers started looking into the possibility of adopting React Native in their software, as they were following the technology since it open-sourced in 2015.
The case is quite similar to the Instagram one: they picked one simple yet critical screen — the Topic Picker (the view is shown to users after they sign up and is apparently extremely important for their onboarding process). The prototype provided the team with an indication that shared code will be very beneficial and will increase developers’ velocity.
It took them 10 days to implement the screen on iOS (including bootstrapping the integrations into their infrastructure) and then they ported the screen over to Android in only 2 days with 100% shared UI code between the platforms, saving more than 1 week of implementation time. Performance-wise, it was just as good as the native implementation.
Due to the success of this prototype, Pinterest team continued to implement React Native into their core tech stack.
If you’re curious to find out more about their engineering, head over to their blog.
Walmart and React Native
Walmart — a multinational retail corporation that operates a chain of hypermarkets, discount department stores, and grocery stores.
Another case of an early adopter. In 2016, Walmart started looking for a replacement for their existing app that consisted of a number of embedded web views as the user experience was suffering, for example, when the user had bad internet connection.
After the brainstorming, the team faced the dilemma: go pure native, which would complicate things or go React Native. Considering their web codebase heavily uses React and Redux, they decided to try React Native. As a result, here’s what they reported achieving by the end of the year:
- 95% of the codebase was shared between iOS and Android:
- frontend code could be shared between iOS and Android,
- business logic (redux store) could be shared with their web applications.
- No knowledge sharing was necessary, as each feature was implemented by a single team.
- Due to the fact that React Native is written in JavaScript, Walmart could leverage the programming skills/resources they already had in the organization.
- React Native provided nearly native performance.
- Both platforms could be released the same day.
- There was no need to go through the app stores approval processes as they could host the bundle on their own server and do over-the-air updates.
- React Native provided smooth animations since the code is converted to native views before rendering.
- Each platform could have its own platform-specific design.
- Same automation suite could run on both iOS and Android
In 2017, Walmart only strengthened their bets on React Native open-sourcing their tools for React Native development. By 2019, nearly 90% of the Walmart Grocery App was written in React Native. More about the advantages it brought can be found here.
Wix and React Native
Wix is an Israeli software company, providing cloud-based web development services, allowing their customers to create websites using their drag-n-drop builder.
Their journey with React Native began about 5 years ago, when they decided to use a novelty technology to build their Wix mobile app. The very first version was released with React Native v0.17.0 (the latest RN public version as of the day of writing of this article is 0.63.4).
Here are a few numbers:
- The app consists of more than 650 different screens
- New versions are released twice a week (same versions for iOS & Android)
- ~0.2% crash rate
- ~95% of business logic is shared between iOS and Android, a few of their teams decided to share the logic with the web platform as well
Considering their web stack is powered by React, using React Native for mobile made a lot of sense. To read more about React Native in Wix’s stack, please visit this post.
Adidas GLITCH and React Native
Adidas — the second largest sportswear manufacturer in the world. In 2016, they announced their new line of football boots — GLITCH. It was also a new approach to commerce and CX (customer experience) — the boots were sold only via a dedicated Adidas GLITCH app.
Making the app the way it was intended required a few key elements — GLITCH effect (powered by OpenGL Shaders) and various 3rd party integrations. As a result, the app was connected to:
- Commerce API
- Content API
- Customer Support Chat API
- Ratings & Reviews API
- 2x Push Notifications Services
- Order Tracking in Germany (rolled out in June 2017)
- Order Tracking in the UK (rolled out in November 2016)
- Order Tracking in France (rolled out in October 2017)
- CDN Image API
The first version of the app was developed for iOS and released in the UK in November 2016, the Android app followed one month later in December 2016. Once again, the team was fascinated with how easy it was to port the app from one platform to another with only some minor issues to be solved along the way. The whole journey is documented here.
Tableau and React Native
Tableau is an interactive data visualization software, widely used in the business intelligence industry.
In 2017, the Tableau Mobile team decided to re-write their existing mobile apps. Here’s how Aaron Dail, Staff Software Engineer at Tableau, described their options once they knew they’re not going to re-factor their code, but drop it and start from scratch:
‘Once we had decided to rewrite, that opened the door to choosing a different tech stack to build on. Xamarin had its fans on the team, but also its detractors. We debated rewriting with Xamarin, giving up on the cross-platform dream and going full native, and trying out this new kinda wild React Native thing people were talking about.’
As you can guess, in the end, they decided to go with React Native for reasons described by Aaron in one of his articles on Tableau’s dev blog. You should definitely give it a read as it also goes in-depth on the achieved results and the challenges they had to overcome.
Coinbase and React Native
Coinbase is one of the largest digital currency exchanges in the world.
They had previously worked with React Native, since their Coinbase Pro app was written fully in React Native, but their main apps were still using native technologies.
In mid-2019, Coinbase decided they need to re-write their core mobile sign-up process because they wanted to provide a dynamic sign-up experience that would adapt to each user’s location, considering they already supported over 100 countries. The sign-up that was used prior to this decision was one of the oldest and most complex parts of the app, involving a great deal of business logic. Re-writing it natively would be making it a rather costly endeavour, and they hoped they could eventually use it in their Pro app as well, in case they decide to write it in React Native. So that’s what they did.
As one would expect, around 95% of code was shared between the iOS and Android platforms and the whole flow was made into an internal NPM package that was utilized in both the native Codebase app, written in Swift, and their Coinbase Pro app, just as they planned it.
Fast-forward to the end of 2020, November to be precise, Coinbase team spent 8 months on rewriting its core Android app from scratch using React Native and successfully rolling it out to 100% of their users. They’ve shared the detailed story on how they managed to optimize the performance of React Native here.
Shopify and React Native
Shopify is one of the largest e-commerce companies in the world, powering over 1 000 000 businesses in 175 countries.
The company showed its initial interest in the technology back in 2015 when React Native went open source and, though they were very sceptical about it, they ran their internal hackathon dedicated to React Native in order to assess whether the technology is suitable for their needs. The result was negative, as they faced many performance issues, which led to the decision to stick to native development.
A few years went by and in 2018 they acquired Tictail, a mobile first company, 100% powered by React Native, that showed them how much the technology had evolved with time. This, plus the fact they’re heavily reliant on React on the web frontend, convinced them even more that they should give RN a second chance.
At the end of 2018, they decided to re-write one of their most popular consumer apps — Arrive. As a result, they managed to launch an Android version of the app (since it shared 95% of code with its iOS relative), achieve fewer crashes on iOS in comparison to its native predecessor and compose a team of mobile and non-mobile developers.
In 2019, Shopify announced they will be re-writing their flagship Point of Sales (PoS) app and their Start team, responsible for helping new entrepreneurs, used React Native for their Compass app, which was launched within 3 months after the announcement with ~99% of the code shared between Android and iOS.
By the look of it, Shopify is not planning to stop using React Native in the nearest future. Curious to read more from their Engineering team? Head over to their blog.
Foreca and React Native
Foreca is one of the most popular weather apps on both Android and iOS, and it’s been available for more than 10 years now. In 2018, the team decided the time for a bigger update has finally come. One of the big changes was to unify user experience on both platforms, which at that time was powered by separate native apps. Building and maintaining the new native experience would have been rather difficult and the team decided to switch to React Native, since everything would have to be re-vamped anyway.
As the Foreca app development team admits, there were some challenges in development using React Native, e.g. waiting for the React Native team or the community to add the features which are implemented in native APIs or SDKs updates, with some features being impossible at all. Nonetheless, the benefits of developing multi-platform easily trump those inconveniences.
‘There is always room for improvement whatever platform you will pick and you always need to make some compromises, but in general, we have found React Native beats the other options.’
Khan Academy and React Native
Khan Academy is a non-profit EdTech organization that offers a wide range of online courses on its platform, which belongs to one of the largest EdTech platforms in the world.
The decision to switch from native code in their apps was made back in 2017. With each year they were getting closer and closer to the big milestone — complete migration to React Native, and it finally happened in July of 2020.
The key reasons that contributed to the green light for the switch were the challenges of maintaining two codebases (with significantly different architectures) with a small mobile team.
Once the transition was completed, the team was happy they made that decision in 2017 as the development process got much easier. As Khan Academy’s mobile engineer Brian Clark says it in his blog post
‘Our iOS and Android apps share a single codebase, with engineers specializing in features of the app, rather than platform. This means we’re way better about improving the quality of a given feature over time, and we can make incremental improvements to features, rather than feeling like we need to get everything in the initial version.’
Flipkart and React Native
Flipkart is the largest e-commerce platform in India with over 100 million app downloads and over 400 million weekly visits. They started their journey with React Native in 2016, when they decided to start migrating parts of the native applications. The 3 main reasons for the switch were:
- RN’s unified app development and much easier maintenance,
- unrestricted parallel usage of custom native components,
- ability to ship JavaScript code over-the-air (OTA).
The first stage began in June 2016, when the Flipkart team started re-writing their search results page. In mid-2017, it was time for the Flipkart’s Grocery experience. As a result, 95% of the app’s code was shared between Android and iOS.
As of 2020, Flipkart’s tech stack became a combination of native, React Native and React Native Web. Most components are using React Native, while homepage and navigation are powered by native technologies.
Worthy mentions
Obviously, those above are not the only applications that are powered by React Native. There are many more well-known companies that use the same technology, they just decided not to share detailed information about how and why they’re using cross-platform technologies instead of native. Although, you can easily guess them by looking at the examples we’ve just discussed, in many cases, the reasons are very similar and so are the benefits of using React Native.
Some more apps built with React Native:
- Tesla,
- Tencent QQ,
- WhatsApp,
- Yahoo! Mail,
- New York Times,
- Baidu Mobile,
- Artsy,
Once there will be more examples to show, I’ll make sure to update the article and link relevant blog posts.
Summary
As you can see, React Native has gone a long way from where it started and is now successfully used by many tech giants. Sure, the technology is not going to suit every possible scenario out there, but it’s going to work in most of them.
If you’re looking to develop your own React Native app or migrate some already existing solutions, feel free to drop me a line at ross@softwarebrothers.co or book a demo meeting with our team here.
This content was originally published here.