Q S S
T E C H N O S O F T
R E A C T
1 0
F A M O U S B U I L T
W I T H
R E A C T
A P P S N A T I V E
info@qsstechnosoft.com | +91 9910511064 (IND) / +1 612-424-3786 (USA)
N A T I V E
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
In the world of mobile app developments, we’re always looking for swift development cycles, faster time to deployment, and greater app performance. With two operating systems dominating the landscape, enterprises creating mobile apps often face a compromise: apps that give a better user experience, or apps that are faster to develop and run on more platforms and devices? The concept of creating apps using only one paradigm for all platforms sounds a bit unbelievable. However, React Native, despite its immaturity, allows to accelerate the process of building apps across different platforms, thanks to the likelihood of reusing most of the code between them.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
What is React Native? React Native is a native version of the popular web library of the same name and its main purpose is to bring the power of React to native mobile apps development. React Native components are pure, side-effect-free functions that return what the views look like at any point in time. For this reason it is easier to write statedependent views, as you don’t have to care about updating the view when the state changes since the framework does this for you. The UI is rendered using actual native views, so the final user experience is not as bad as other solutions that simply render a web component inside a WebView. What reason are the largest companies using React Native for?
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
#1 Facebook & React Native React Native commenced as Facebook’s hackathon project developed in response to the company’s needs. Facebook wanted to bring all the advantages of web development – such as quick iterations and having a single team develop the whole product – to mobile. That is how React Native was brought to life and leveraged in mobile app development for both iOS and Android apps. Why did they choose React Native? Originally, Facebook only developed React Native to support iOS. However, with it’s recent support of the Android operating system, the library can now provide mobile UIs for both platforms. Facebook used React Native to develop its own Ads Manager app, creating both an iOS and an Android version. Both versions were created by the same team of developers. Facebook also made React Native open-source, with the idea that compatibility with other platforms like Windows or tvOS could be operated on by the development community, so stay tuned.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Results Performance improvements: Events Dashboard startup is now twice as fast. Most of the advances made were done at the framework level, which determines your React Native app will automatically benefit when transferring to the latest version of React Native app. #2 Facebook Ads & React Native The social networking platform isn’t the only React Native application that was produced under Facebook’s roof. Facebook Ads was the first React Native app for Android and, the first completely React Native based, cross-platform app built in the company. The framework seemed absolutely suitable for the lot of complex business logic required to accurately handle differences in ad formats, time zones, currencies, date formats, currency conventions, and so on, particularly that a big chunk of it was already drafted in JavaScript.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Why did they choose React Native? From a design viewpoint, the interface is clean with intuitive UX and simple navigation. The animations and transitions are perfect; they do not feel unnatural or buggy at any point. The overall experience is brilliant, and if your marketing team isn’t using the app, Facebook strongly recommend them to start. Results The first thing you will notice is that the app is lightning faster, regardless of the operations you want to perform; from checking the status of a current campaign to building a new one, all it needs is a second or two at most to navigate to the next level or access the data with ease.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
#3 Walmart & React Native Walmart has already proved its innovative attitude introducing Node.js into their stack. A few years later they also revised their mobile app into React Native. Walmart managed to improve performance of the app on both iOS and Android by using less resources and within shorter time span. 96% of the codebase was shared between platforms while skills and experience of developers were leveraged across the organization. Why did they choose React Native? Walmart aims really high, striving to become the world’s largest online retailer. With such big goals the company needs to take bold moves that involve higher risk in order to gain a competitive advantage. That is why they always seek the ways to improve customer experience by trying new technologies.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Results React Native allows for great performance, nearly identical to native apps, and extremely smooth animations. #4 Bloomberg & React Native Bloomberg’s new consumer mobile application for iOS and Android gives clients a streamlined, interactive experience with simple-to-access personalized content, videos and live feeds featured across Bloomberg’s Media. To develop the application, the company employed a unique mobile app development framework. An engineering team at Bloomberg’s NewYork City headquarters produced the app using React Native app development technology, the primary tool that actually delivers on the promise of cross-platform native app development.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Why did they choose React Native? The consumer mobile app was huge endeavor because we had to transition the entire organization to React Native“ says Gabriel Lew, a senior application engineer at Bloomberg office who led the development team’s effort. (source) Another advantage of React Native is that it automates code refreshes, accelerating the release of new product features. Instead of recompiling, your app reloads instantly. #5 Instagram & React Native Instagram accepted the challenge to integrate React Native into their existing native app beginning from the simplest view you can imagine: the Push Notification view which was basically implemented as the WebView. It did not require building navigation infrastructure, as UI was quite simple.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Why did they choose React Native? The dev team at Instagram faced a few problems on the way, but they substantially improved developer velocity. 85% to 99% of code was shared between Android and iOS apps, depending on products, thus the team was able to deliver the app much faster than they would have with a native solution. #6 SoundCloud Pulse & React Native SoundCloud Pulse is an application for creators that helps them manage their accounts and keep their community humming. When the company started designing the second set of native apps, they faced a few obstacles. iOS developers were impossible to find and they didn’t want to have a huge gap between the iOS and Android releases. Therefore, an independent research team started to run user-testing sessions with React Native based prototypes.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Why did they choose React Native? Their experience with the framework was generally positive. Developers found it easier to work on a React Native-based application than on a native application. Moreover, they were capable of building the application by themselves without frequent input from specialised mobile developers. #7 Townske & React Native Townske aims to be your travel inspiration city guide on your next trip. The app connects you with locals to get a list of their favorite places and creates a curated list of places to explore and experience as locals do. It’s not mandatory for users to have an account, which is great, as it allows you to quickly find the next location you want to visit.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Why did they choose React Native? React Native is focused solely on building a mobile UI. Compared with JavaScript frameworks like AngularJS or MeteorJS, React Native is UI-focused, making it more like a JavaScript library than a framework. The resulting UI is highly responsive and feels fluid thanks to asynchronous JavaScript interactions with the native environment. This means the app will have faster and smooth load times than a typical hybrid app, and a smoother feel. #8 Gyroscope & React Native Gyroscope enables you to see the complete story of your life; it’s the health app on steroids. Not only can you track steps, your workout, or your heart rate, but with the dozens of integrations you can also track activities like productivity on the computer, or use sleep tracker and automatic Ai to make sure you get enough sleep.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Results All the data is exhibited in two attractive, well-designed views: Simple and Cards mode. All tracked data is aggregated in daily/weekly/monthly statements, and you can also easily deep-dive into it and pick on which things you want to focus next. #9 Wix & React Native Started in 2006, Wix is an online company that provides web hosting and website design services. Users can design and build their sites in HTML5/CSS, as well as mobile websites, using drag and drop utilities. Two popular features of Wix are that developers can create their own web applications to market to other users, and that users do not need to know any coding to create a website. There are several navigation options available for handling navigation in react native apps like React-native-router-flux, react-navigation,airbnb-nativenavigation and wix-react-native-navigation out of which I prefer to use reactnative-navigation because of its extremely configurable navigation and screen options along with properly maintained and updated codebase.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Why did they choose? Whereas native app development is usually linked with inefficiency, less developer productivity, and slower time rate to deployment, React Native is all about delivering the speed and agility of web app development to the hybrid space – with native results. See the project on Github. #10 Delivery.com & React Native Delivery.com empowers the neighborhood economy by enabling customers to order online from their preferred local restaurants, grocery stores, wine and spirits shops, and laundry and dry cleaning providers. Every day more than one million delivery.com customers explore their areas and order from more than 10,000 regional businesses while at home, at work, or on the go. With headquarters in New York and an expanding presence throughout the U.S., delivery.com offers e-commerce an integral part of local everyday life, helping customers shop, businesses grow, and neighborhoods thrive.
Q S S
T E C H N O S O F T
R E A C T
N A T I V E
Why did they choose? React Native allows you link the plugin with a native module, so you can connect the map up with the device’s functions like rotate, zoom, and the compass, while utilizing less memory and loading faster. If your app supports previous operating systems (and older devices), this can help you keep the app running smoothly.
Q S S
T E C H N O S O F T
R E A C T
T H A N K F O R
C O M M E N T S
Y O U ! O R
Q U E S T I O N S :
Email us at info@qsstechnosoft.com +91 9910511064 (IND) +1 612-424-3786 (USA)
N A T I V E