How does React Native work?

development

What is React Native?

React Native is a popular framework that enables developers to build cross-platform mobile apps using a single code base.

Conceived during a Facebook hackathon and launched in 2015, React Native is known for its simplicity and flexibility. With its inception, developers can now build mobile apps in their JavaScript comfort zone, while still gaining a fully native user experience.

Within the mobile app development community, React Native offers the best of both worlds – the convenience and fast-paced nature of developing for the web and a truly native mobile app experience for the end users. React Native is declarative, component-based, has a high developer velocity, and is generally portable across mobile platforms.

Why we like React Native

Before React Native, developers faced a dilemma: native or hybrid. Each option has its pros and cons.

Native frameworks perform significantly better, allow more flexibility, and can lead to a more stable product. But native app development can be costly for the initial build-out because it requires a distinct code base for each mobile platform, such as iOS or Android.

Hybrid frameworks are less costly, easier, and faster to build out because they are essentially web applications, but they perform noticeably worse on mobile devices and lack an address bar and back buttons. Examples include Cordova, Ionic, PhoneGap, and Titanium.

Given the downside of both native and hybrid frameworks, React Native has been a game changer. It provides a third option comparable in cost to Ionic or PhoneGap while performing as well as native code. Further, developers can build products for iOS & Android from a single codebase, using a language many developers already know. React Native also includes a bridge system that allows you to drop down into native land and write platform-specific code in Swift or Java if necessary.

Is React Native right for your project?

Here are some observations from our React Native developers in Atlanta:

The Good:

Because the view layer is native code, interactions are responsive and animations are smooth.
Fadi _{VP, Engineering}

When compared to web applications, it’s nearly impossible to tell the difference between a React Native app and one that was written natively.
Kelley _{senior developer}

Easy debugging and tooling. You don’t need to use Xcode or Android Studio.
Jake _{senior developer}

I’m happy with Javascript’s npm library, React Native’s community and ecosystem support, and the ability to reuse code across platforms.
Josh _{solution architect}

The Bad:

Not v8… jscore runtime diff. There can be minor differences to account for on iOS and Android, specifically with regards to date parsing.
Kelley _{senior developer}

iOS and Android ecosystems provide a ton of widgets and functionality that are baked in. When using React Native, you sometimes need to wait for native functionality to be re-implemented by the core team, or implement it yourself.
Jake _{senior developer}

The Ugly:

Upgrades to React Native have historically been a nightmare. In fact, sometimes it’s better to start a new project and simply copy and paste code over. However, more recently the React Native team has put an emphasis on making upgrades easier and more seamless.
Jake _{senior developer}

Our React Native projects

Tempo CRM

Background:

A global leader in marketing automation came to us seeking a CRM that would help deliver a seamless integration between its sales and marketing teams.

Challenge

Relational data management and rendering performance.

Lessons learned:

CRM software has a lot of deeply related data, such as contacts, companies, deals, deal stages, geographic data, and communication information. To render properly, all this data needed to be properly managed and associated.

There are many considerations when fetching and rendering large amounts of data in React Native. A solid bootstrapping process should be in place, and list virtualization is a must-have.

Star Leasing

Background:

Star Leasing, a national truck leasing company, asked us to develop an MVP mobile app that would enable drivers to submit service requests directly from the roadside without having to call a dispatcher. Our goal was to develop a simple, intuitive experience that is easy to download and available for both iOS and Android. With just a few taps, drivers could quickly request emergency roadside assistance, access maintenance schedules, and obtain real-time updates on fleet data.

Challenge:

Connecting to a legacy system and database.
Touch aware graphics and user interactions (selecting areas of a trailer where issues exist).
Real-time status updates to keep drivers in the loop and to reduce calls to customer service.

Lessons learned:

Surprisingly, there wasn’t a library where you could pinch, zoom, swipe, and select part of an image, so we had to write our own.

Farmwave

Background:

FARMWAVE, a leader in AI-driven agricultural technology, came to us seeking a mobile app for smart disease detection that could accurately identify a crop or plant and diagnose a pathogen, pest, or weed.

Challenge:

Network issues in rural areas
Rich media creation

Lessons learned:

Monitoring network fidelity on devices is a challenge, and the amount of available network information, such as connection strength, differs by platform. In general, neither iOS or Android expose enough network quality information for the app to be leveraged as the sole source of truth. To address this, we created a custom network latency monitoring process which informed other internal app processes about the current bandwidth, upload speed, and general connection strength.

Apps heavy in rich media, such as HD images, video, and audio, pose their own set of development challenges. This app allowed users to upload and process HD images and audio regardless of network connection quality.

HD Supply

Background:

HD Supply approached us to design and build a tablet-based voice-activated inventory management app with an ordering interface – in less than three months.

Challenge:

Natively implementing a voice activated search word, “Hey FM”, to activate speech-to-text and run a search.
Understanding what the facilities manager was requesting and taking the appropriate action.

Lessons learned:

Listening for an activation phrase, “Hey FM”, isn’t a capability of React Native, and had to be written in Native Objective-C with a custom native library. React Native makes it very simple to write and connect native functionality wherever it makes sense.

Parsing sentences to discover intent. Here, we were able to take advantage of an abundance of existing Javascript libraries to recognize what the user was requesting. In a fully native application, this would have been significantly more difficult.

Park ‘N Fly

Background:

Park ‘N Fly, the nation’s leader in offsite airport parking, reached out to us to build a mobile app that would create a seamless parking experience for its users.

Challenge:

Analyzing user dropoff.
Dealing with external APIs as the primary backend.

Lessons learned:

User analytics is a massive challenge regardless of the platform or framework choice and is extremely helpful to clients when making decisions about where to focus development effort. With this project, we wanted to have a granular view into where and when users were failing to complete the parking reservation flow. The resulting reservation funnel provided insight into individual user experiences and called attention to drop off points, leading to an improved purchase experience and increased conversions.

GoFan Ticket Scanner

Background:

Huddle Inc, a national leader in high school event ticketing, wanted to test a digital ticketing platform, GoFan, that would replace paper tickets.

Challenge:

Network congestion issues at large events
Large volume of ticket and event data
Interfacing with the Honeywell hardware

Lessons learned:

Since network congestion is common at large events, particularly events with thousands of people, it’s important to continually monitor network quality. React Native exposes some basic network information via the “NetInfo” package, which makes monitoring the network relatively straightforward, but at the end of the day there’s just nothing you can do if you have zero bandwidth. As a result, we built out a syncing procedure that would pull down potentially millions of tickets to the device on the days leading up to the sporting event; save that data in RealmDB, an on-device SQL-like database; and attempt to intelligently sync data whenever possible.
The Honeywell scanners were a very interesting challenge. Honeywell offers a native library that exposes various scanner functionality and information, such as scanner battery level, device connection status, and of course the ability to activate the barcode reader and receive the resulting ticket code. We were able to incorporate the native library into the React Native app using the RNBridge system, which helped us leverage the Honeywell device in a few different ways: Aside from scanning the tickets themselves, the device allowed us to extend the battery life of the iOS device by selectively pulling battery power from scanner itself. This let us dramatically increase the usable time of individual scanners and cut down on how often volunteers at the gate needed to change out and/or charge the devices.

Intent Solutions (iPad and iPhone)

Background:

Intent Solutions teamed up with us to optimize a smart medication dispensing device that uses biometrics to securely deliver medication. Our goal was to create a streamlined patient experience in a mobile app (MVP) that has the ability to collect real-time behavioral and compliance data for use by doctors and other clinicians.

Challenge:

Communicating with a custom-built hardware device. The device automatically dispenses medications upon patient request via the mobile application. The application communicates with an API that decides when and how much medication to dispense, preventing overdoses and missed medications.

Lessons learned:

Complexities with bluetooth communication, bluetooth versions, bandwidth and sending specific hardware codes to control the hardware device.

BoxLock

Background:

BoxLock came to us with an early functional prototype, looking to build the production version of an internet-connected padlock specifically designed to safeguard home deliveries and track package status.

Challenge:

Interfacing with the lock via Bluetooth
General difficulties associated with IoT

Lessons learned:

IoT security. The authentication flow between the device and the app was found to have a major security issue that allowed the lock to be opened by an unauthenticated device. The underlying problem was that the authentication token wasn’t being removed or expired, meaning once a user connected and authenticated the lock, anyone else could send commands to the lock and it would obey. This security issue was discovered during a test by a security researcher at McAfee labs. Because the app was in React Native and utilized a single code base, we were able to quickly develop and deploy a solution in iOS and Android.

Bitwise operations in Javascript are challenging, but certainly possible and definitely interesting. This app required us to implement Bluetooth communication via the Generic Attributes Profile (GATT). The data coming across the wire in this case consisted of either 1- or 2-byte payloads, which needed to be decoded into meaningful commands when received by the app and encoded back to bits when sending commands to the Boxlock. This was achieved by leveraging the bitwise operations in Javascript – a somewhat rare occurrence.

It’s extremely important to have a full-fledged staging environment that encompases all elements of the platform, not just on the app/API side, but also the firmware itself. We worked with a third party to interface with the custom firmware on the BoxLock, and a bug during development led to the test device being “bricked” with no feasible way for the app developers to fix the lock without shipping it to the firmware folks.

Our recommendation

Since most business apps don’t have strict performance requirements or a deep reliance on the native operating system, they do not require fully native app development. Given that we work primarily with business applications, we find React Native to be an excellent fit for most needs.

Where and why it works well:

Business applications: Business apps are a great fit for React Native because typically there is very little need for the latest platform-specific features. React Native can meet most of our needs, and with the option of a third-party library, we can make development fast and the majority of the code usable across multiple platforms.
Chat apps

Where and why it doesn’t work well:

Games: The performance of an app built in React Native will not match that of a native app, but for the apps in which we would use React Native, the performance difference would be negligible. Game apps, on the other hand, require more animations and a lot of native control, which will slow down React Native and result in end users deleting the app.
Photo and video apps: Again, these types of apps likely require many native capabilities that are different between operating systems, and if you can’t use the majority of the code across platforms, you’ll defeat the main purpose of React Native.
Augmented reality: Heavy reliance on the native operating system AND on optimal performance.
Core machine learning stuff: Same as the others really.
If you’re targeting only the Apple ecosystem (iOS, macOS, tvOS): A primary benefit of using React Native is that it’s a cross platform, so you get more use out of one code base. If you’re only going after one operating system, that primary benefit no longer matters.