{"id":3183,"date":"2020-11-10T15:37:32","date_gmt":"2020-11-10T15:37:32","guid":{"rendered":"http:\/\/digitalscientists.com\/?p=3183"},"modified":"2024-04-24T13:44:01","modified_gmt":"2024-04-24T13:44:01","slug":"how-does-react-native-work","status":"publish","type":"post","link":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/","title":{"rendered":"How does React Native work?"},"content":{"rendered":"\n<h4 class=\"wp-block-heading has-option-default\">What is React Native?<\/h4>\n\n\n\n<p class=\"has-option-default\">React Native is a popular framework that enables developers to build cross-platform mobile apps using a single code base.<\/p>\n\n\n\n<p class=\"has-option-default\">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.&nbsp;<\/p>\n\n\n\n<p class=\"has-option-default\">Within the <a href=\"https:\/\/digitalscientists.com\/mobile-app-development\/\">mobile app development<\/a> community, React Native offers the best of both worlds \u2013 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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-option-default\">Why we like React Native<\/h4>\n\n\n\n<p class=\"has-option-default\">Before React Native, developers faced a dilemma: native or hybrid. Each option has its pros and cons.&nbsp;<\/p>\n\n\n\n<p class=\"has-option-default\">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. &nbsp;<\/p>\n\n\n\n<p class=\"has-option-default\">Hybrid frameworks are less costly, easier, and faster to build out because they are essentially <a href=\"https:\/\/digitalscientists.com\/web-application-development\/\">web applications<\/a>, but they perform noticeably worse on mobile devices and lack an address bar and back buttons. Examples include Cordova, Ionic, PhoneGap, and Titanium.<\/p>\n\n\n\n<p class=\"has-option-default\">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 &amp; 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.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-left has-option-default\">Is React Native right for your project?<\/h4>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">Here are some observations from our React Native developers in Atlanta:<\/h5>\n\n\n\n<figure class=\"wp-block-image size-full has-option-mb40\"><img loading=\"lazy\" decoding=\"async\" width=\"939\" height=\"407\" src=\"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/development-team-1.jpg\" alt=\"\" class=\"wp-image-13975\" srcset=\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/development-team-1.jpg 939w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/development-team-1-300x130.jpg 300w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/development-team-1-768x333.jpg 768w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/development-team-1-861x373.jpg 861w\" sizes=\"(max-width: 939px) 100vw, 939px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">The Good:<\/h5>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-option-default\">Because the view layer is native code, interactions are responsive and animations are smooth.<\/p>\n<cite>Fadi <sub>VP, Engineering<\/sub><\/cite><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-option-default\">When compared to web applications, it&#8217;s nearly impossible to tell the difference between a React Native app and one that was written natively.<\/p>\n<cite>Kelley <sub>senior developer<\/sub><\/cite><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-option-default\">Easy debugging and tooling. You don&#8217;t need to use Xcode or Android Studio.<\/p>\n<cite>Jake <sub>senior developer<\/sub><\/cite><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-option-default\">I&#8217;m happy with Javascript&#8217;s npm library, React Native\u2019s community and ecosystem support, and the ability to reuse code across platforms.<\/p>\n<cite>Josh <sub>solution architect<\/sub><\/cite><\/blockquote>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">The Bad:<\/h5>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-option-default\">Not v8\u2026 jscore runtime diff. There can be minor differences to account for on iOS and Android, specifically with regards to date parsing.<\/p>\n<cite>Kelley <sub>senior developer<\/sub><\/cite><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-option-default\">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.<\/p>\n<cite>Jake <sub>senior developer<\/sub><\/cite><\/blockquote>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">The Ugly:<\/h5>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-option-default\">Upgrades to React Native have historically been a nightmare. In fact, sometimes it&#8217;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.<\/p>\n<cite>Jake <sub>senior developer<\/sub><\/cite><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading has-option-default\">Our React Native projects<\/h4>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">Tempo CRM<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large has-option-mb40\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/tempo-blue-bg@2x-1-1024x590.png\" alt=\"\" class=\"wp-image-13990\" srcset=\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/tempo-blue-bg@2x-1-1024x590.png 1024w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/tempo-blue-bg@2x-1-300x173.png 300w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/tempo-blue-bg@2x-1-768x442.png 768w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/tempo-blue-bg@2x-1-1536x885.png 1536w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/tempo-blue-bg@2x-1-2048x1180.png 2048w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/tempo-blue-bg@2x-1-647x373.png 647w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><em><strong><i>Background:<\/i><\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\">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.<\/p>\n\n\n\n<p><em><strong><i>Challenge<\/i><\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Relational data management and rendering performance.<\/li>\n<\/ul>\n\n\n\n<p><em><strong>Lessons learned:&nbsp;<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">Star Leasing<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large has-option-mb40\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/cs-starleasing-media-3-1-1024x550.png\" alt=\"\" class=\"wp-image-13991\" srcset=\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/cs-starleasing-media-3-1-1024x550.png 1024w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/cs-starleasing-media-3-1-300x161.png 300w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/cs-starleasing-media-3-1-768x413.png 768w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/cs-starleasing-media-3-1-694x373.png 694w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/cs-starleasing-media-3-1.png 1063w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-option-default\"><em><strong>Background:<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\"><a href=\"https:\/\/digitalscientists.com\/case-studies\/star-leasing\/\">Star Leasing<\/a>, 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.<\/p>\n\n\n\n<p class=\"has-option-default\"><em><strong>Challenge:<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Connecting to a legacy system and database.<\/li>\n\n\n\n<li>Touch aware graphics and user interactions (selecting areas of a trailer where issues exist).<\/li>\n\n\n\n<li>Real-time status updates to keep drivers in the loop and to reduce calls to customer service.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-option-default\"><em><strong>Lessons learned:&nbsp;<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\">Surprisingly, there wasn&#8217;t a library where you could pinch, zoom, swipe, and select part of an image, so we had to write our own.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">Farmwave<\/h5>\n\n\n\n<p class=\"has-option-default\"><em><strong>Background:<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\">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.<\/p>\n\n\n\n<p class=\"has-option-default\"><em><strong>Challenge:<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Network issues in rural areas&nbsp;<\/li>\n\n\n\n<li>Rich media creation<\/li>\n<\/ul>\n\n\n\n<p class=\"has-option-default\"><em><strong>Lessons learned:&nbsp;<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">HD Supply<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large has-option-mb40\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"302\" src=\"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/HDSupply-React-Native-1-1024x302.png\" alt=\"\" class=\"wp-image-13992\" srcset=\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/HDSupply-React-Native-1-1024x302.png 1024w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/HDSupply-React-Native-1-300x89.png 300w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/HDSupply-React-Native-1-768x227.png 768w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/HDSupply-React-Native-1-1264x373.png 1264w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/HDSupply-React-Native-1.png 1322w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-option-default\"><em><strong>Background:<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\"><a href=\"https:\/\/digitalscientists.com\/case-studies\/hd-supply\/\">HD Supply<\/a> approached us to design and build a tablet-based voice-activated inventory management app with an ordering interface \u2013 in less than three months.<\/p>\n\n\n\n<p class=\"has-option-default\"><em><strong>Challenge:<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Natively implementing a voice activated search word, &#8220;Hey FM&#8221;, to activate speech-to-text and run a search.<\/li>\n\n\n\n<li>Understanding what the facilities manager was requesting and taking the appropriate action.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"has-option-default\"><em><strong>Lessons learned:&nbsp;<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Listening for an activation phrase, \u201cHey FM\u201d, isn&#8217;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.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">Park \u2018N Fly<\/h5>\n\n\n\n<figure class=\"wp-block-image size-full has-option-mb40\"><img loading=\"lazy\" decoding=\"async\" width=\"773\" height=\"461\" src=\"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/pnf_images_react_native-1.png\" alt=\"\" class=\"wp-image-13993\" srcset=\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/pnf_images_react_native-1.png 773w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/pnf_images_react_native-1-300x179.png 300w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/pnf_images_react_native-1-768x458.png 768w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/pnf_images_react_native-1-625x373.png 625w\" sizes=\"(max-width: 773px) 100vw, 773px\" \/><\/figure>\n\n\n\n<p class=\"has-option-default\"><em><strong>Background:<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\"><a href=\"https:\/\/digitalscientists.com\/case-studies\/park-n-fly\/\">Park \u2018N Fly<\/a>, the nation\u2019s leader in offsite airport parking, reached out to us to build a mobile app that would create a seamless parking experience for its users.<\/p>\n\n\n\n<p class=\"has-option-default\"><em><strong>Challenge:<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Analyzing user dropoff.<\/li>\n\n\n\n<li>Dealing with external APIs as the primary backend.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-option-default\"><em><strong>Lessons learned:&nbsp;<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">GoFan Ticket Scanner<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large has-option-mb40\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"620\" src=\"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/go-fan-native-react-1-1024x620.png\" alt=\"\" class=\"wp-image-13995\" srcset=\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/go-fan-native-react-1-1024x620.png 1024w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/go-fan-native-react-1-300x182.png 300w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/go-fan-native-react-1-768x465.png 768w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/go-fan-native-react-1-616x373.png 616w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/go-fan-native-react-1.png 1322w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-option-default\"><em><strong>Background:<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\"><a href=\"https:\/\/digitalscientists.com\/case-studies\/gofan-ticketing-platform\/\">Huddle Inc<\/a>, a national leader in high school event ticketing, wanted to test a digital ticketing platform, <a href=\"https:\/\/digitalscientists.com\/case-studies\/gofan-ticketing-platform\/\">GoFan<\/a>, that would replace paper tickets.<\/p>\n\n\n\n<p class=\"has-option-default\"><em><strong>Challenge:<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Network congestion issues at large events<\/li>\n\n\n\n<li>Large volume of ticket and event data<\/li>\n\n\n\n<li>Interfacing with the Honeywell hardware<\/li>\n<\/ul>\n\n\n\n<p class=\"has-option-default\"><em><strong>Lessons learned:&nbsp;<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Since network congestion is common at large events, particularly events with thousands of people, it\u2019s important to continually monitor network quality. React Native exposes some basic network information via the \u201cNetInfo\u201d package, which makes monitoring the network relatively straightforward, but at the end of the day there\u2019s 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.<br>&nbsp;<\/li>\n\n\n\n<li>The Honeywell <a href=\"https:\/\/sps.honeywell.com\/us\/en?category=enterprise-sleds-for-apple-devices&amp;cat=HSM&amp;pid=captuvosl22v5\">scanners<\/a> 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.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">Intent Solutions (iPad and iPhone)<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large has-option-mb40\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"620\" src=\"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/Intent-solutions-1-1024x620.png\" alt=\"\" class=\"wp-image-13999\" srcset=\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/Intent-solutions-1-1024x620.png 1024w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/Intent-solutions-1-300x182.png 300w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/Intent-solutions-1-768x465.png 768w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/Intent-solutions-1-616x373.png 616w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/Intent-solutions-1.png 1322w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-option-default\"><em><strong>Background:<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\"><a href=\"https:\/\/digitalscientists.com\/case-studies\/intent-solutions\/\">Intent Solutions<\/a> 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.&nbsp;<\/p>\n\n\n\n<p class=\"has-option-default\"><em><strong>Challenge:<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\">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.<\/p>\n\n\n\n<p class=\"has-option-default\"><em><strong>Lessons learned:&nbsp;<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Complexities with bluetooth communication, bluetooth versions, bandwidth and sending specific hardware codes to control the hardware device.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">BoxLock<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large has-option-mb40\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"620\" src=\"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/boxlock-react-native-1-1024x620.png\" alt=\"\" class=\"wp-image-14000\" srcset=\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/boxlock-react-native-1-1024x620.png 1024w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/boxlock-react-native-1-300x182.png 300w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/boxlock-react-native-1-768x465.png 768w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/boxlock-react-native-1-616x373.png 616w, https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/boxlock-react-native-1.png 1322w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-option-default\"><em><strong>Background:<\/strong><\/em><\/p>\n\n\n\n<p class=\"has-option-default\"><a href=\"https:\/\/digitalscientists.com\/case-studies\/boxlock\/\">BoxLock<\/a> 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.<\/p>\n\n\n\n<p class=\"has-option-default\"><em><strong>Challenge:<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Interfacing with the lock via Bluetooth<\/li>\n\n\n\n<li>General difficulties associated with <a href=\"https:\/\/digitalscientists.com\/iot-application-development\/\">IoT<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-option-default\"><em><strong>Lessons learned:&nbsp;<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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\u2019t 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 <a href=\"https:\/\/www.mcafee.com\/blogs\/other-blogs\/mcafee-labs\/whats-in-the-box\/\">McAfee labs<\/a>. 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.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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 \u2013 a somewhat rare occurrence.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It\u2019s 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 \u201cbricked\u201d with no feasible way for the app developers to fix the lock without shipping it to the firmware folks.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading has-option-default\">Our recommendation<\/h4>\n\n\n\n<p class=\"has-option-default\">Since most business apps don\u2019t 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.&nbsp;<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">Where and why it works well:&nbsp;<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Business applications: <\/strong>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.<\/li>\n\n\n\n<li><strong>Chat app<\/strong>s<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-option-default\">Where and why it doesn\u2019t work well:&nbsp;<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Games:<\/strong> The performance of an app built in React Native will not match that of a native app, but for the apps in which we <em>would<\/em> 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.<\/li>\n\n\n\n<li><strong>Photo and video apps:<\/strong> Again, these types of apps likely require many native capabilities that are different between operating systems, and if you can\u2019t use the majority of the code across platforms, you\u2019ll defeat the main purpose of React Native.<\/li>\n\n\n\n<li><strong>Augmented reality: <\/strong>Heavy reliance on the native operating system AND on optimal performance.<\/li>\n\n\n\n<li><strong>Core machine learning stuff:<\/strong> Same as the others really.&nbsp;<\/li>\n\n\n\n<li><strong>If you&#8217;re targeting only the Apple ecosystem (iOS, macOS, tvOS):<\/strong> A primary benefit of using React Native is that it\u2019s a cross platform, so you get more use out of one code base. If you\u2019re only going after one operating system, that primary benefit no longer matters.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading has-option-default\">Looking for a team of React Native developers? <a href=\"https:\/\/digitalscientists.com\/contact\/\">Let&#8217;s talk<\/a>.<\/h4>\n","protected":false},"excerpt":{"rendered":"<p>Within the mobile app development community, React Native offers the best of both worlds \u2013 the convenience and fast-paced nature of developing for the web and a truly native mobile app experience for the end users.<\/p>\n","protected":false},"author":15,"featured_media":3318,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[45],"tags":[],"coauthors":[61],"class_list":["post-3183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How Does React Native Work? | Digital Scientists<\/title>\n<meta name=\"description\" content=\"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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Does React Native Work? | Digital Scientists\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Scientists\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-10T15:37:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-24T13:44:01+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1322\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kelly Rose\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kelly Rose\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/\"},\"author\":{\"name\":\"Kelly Rose\",\"@id\":\"https:\/\/digitalscientists.com\/#\/schema\/person\/6250e7fd56c3ee01d85d359bbc9c5209\"},\"headline\":\"How does React Native work?\",\"datePublished\":\"2020-11-10T15:37:32+00:00\",\"dateModified\":\"2024-04-24T13:44:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/\"},\"wordCount\":2224,\"publisher\":{\"@id\":\"https:\/\/digitalscientists.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png\",\"articleSection\":[\"development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/\",\"url\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/\",\"name\":\"How Does React Native Work? | Digital Scientists\",\"isPartOf\":{\"@id\":\"https:\/\/digitalscientists.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png\",\"datePublished\":\"2020-11-10T15:37:32+00:00\",\"dateModified\":\"2024-04-24T13:44:01+00:00\",\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#primaryimage\",\"url\":\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png\",\"contentUrl\":\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png\",\"width\":1322,\"height\":800,\"caption\":\"react native lessons learned\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitalscientists.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How does React Native work?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitalscientists.com\/#website\",\"url\":\"https:\/\/digitalscientists.com\/\",\"name\":\"Digital Scientists\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/digitalscientists.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitalscientists.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/digitalscientists.com\/#organization\",\"name\":\"Digital Scientists\",\"url\":\"https:\/\/digitalscientists.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digitalscientists.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2022\/11\/header-logo-light.svg\",\"contentUrl\":\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2022\/11\/header-logo-light.svg\",\"width\":165,\"height\":48,\"caption\":\"Digital Scientists\"},\"image\":{\"@id\":\"https:\/\/digitalscientists.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/digitalscientists.com\/#\/schema\/person\/6250e7fd56c3ee01d85d359bbc9c5209\",\"name\":\"Kelly Rose\",\"url\":\"https:\/\/digitalscientists.com\/blog\/author\/kellygedvilas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Does React Native Work? | Digital Scientists","description":"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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/","og_locale":"en_US","og_type":"article","og_title":"How Does React Native Work? | Digital Scientists","og_description":"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.","og_url":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/","og_site_name":"Digital Scientists","article_published_time":"2020-11-10T15:37:32+00:00","article_modified_time":"2024-04-24T13:44:01+00:00","og_image":[{"width":1322,"height":800,"url":"http:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png","type":"image\/png"}],"author":"Kelly Rose","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kelly Rose","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#article","isPartOf":{"@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/"},"author":{"name":"Kelly Rose","@id":"https:\/\/digitalscientists.com\/#\/schema\/person\/6250e7fd56c3ee01d85d359bbc9c5209"},"headline":"How does React Native work?","datePublished":"2020-11-10T15:37:32+00:00","dateModified":"2024-04-24T13:44:01+00:00","mainEntityOfPage":{"@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/"},"wordCount":2224,"publisher":{"@id":"https:\/\/digitalscientists.com\/#organization"},"image":{"@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#primaryimage"},"thumbnailUrl":"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png","articleSection":["development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/","url":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/","name":"How Does React Native Work? | Digital Scientists","isPartOf":{"@id":"https:\/\/digitalscientists.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#primaryimage"},"image":{"@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#primaryimage"},"thumbnailUrl":"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png","datePublished":"2020-11-10T15:37:32+00:00","dateModified":"2024-04-24T13:44:01+00:00","description":"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.","breadcrumb":{"@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#primaryimage","url":"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png","contentUrl":"https:\/\/digitalscientists.com\/wp-content\/uploads\/2020\/11\/react-native-2.png","width":1322,"height":800,"caption":"react native lessons learned"},{"@type":"BreadcrumbList","@id":"https:\/\/digitalscientists.com\/blog\/how-does-react-native-work\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitalscientists.com\/"},{"@type":"ListItem","position":2,"name":"How does React Native work?"}]},{"@type":"WebSite","@id":"https:\/\/digitalscientists.com\/#website","url":"https:\/\/digitalscientists.com\/","name":"Digital Scientists","description":"","publisher":{"@id":"https:\/\/digitalscientists.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitalscientists.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/digitalscientists.com\/#organization","name":"Digital Scientists","url":"https:\/\/digitalscientists.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digitalscientists.com\/#\/schema\/logo\/image\/","url":"https:\/\/digitalscientists.com\/wp-content\/uploads\/2022\/11\/header-logo-light.svg","contentUrl":"https:\/\/digitalscientists.com\/wp-content\/uploads\/2022\/11\/header-logo-light.svg","width":165,"height":48,"caption":"Digital Scientists"},"image":{"@id":"https:\/\/digitalscientists.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/digitalscientists.com\/#\/schema\/person\/6250e7fd56c3ee01d85d359bbc9c5209","name":"Kelly Rose","url":"https:\/\/digitalscientists.com\/blog\/author\/kellygedvilas\/"}]}},"ticketed":false,"_links":{"self":[{"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/posts\/3183"}],"collection":[{"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/comments?post=3183"}],"version-history":[{"count":0,"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/posts\/3183\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/media\/3318"}],"wp:attachment":[{"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/media?parent=3183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/categories?post=3183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/tags?post=3183"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/digitalscientists.com\/wp-json\/wp\/v2\/coauthors?post=3183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}