React Native: What are the 5 Key Learnings of the Framework?

React Native is a framework for building cross-platform mobile apps using the JavaScript library, React. It was publicly released by Facebook in 2015 and has become hugely popular since.
I’ve been a senior developer for a number of years and working with React Native from late 2015. In that time, I’ve built several apps using the technology and identified a number of strengths and weaknesses that I will set out below. That way, you’ll be able to decide if the framework is right for you and your organisation. 
JavaScript In, Native App Out
Well, almost…
React Native uses the React library to build mobile user interfaces with JavaScript. When building a mobile app, you can also build your business logic using JavaScript, avoiding the need to write any ObjectiveC, Swift or Java. The key feature of React Native – which differentiates itself from other frameworks selling the promise of using web technologies to build apps is that you end up with a truly native experience. Frameworks such as Cordova and PhoneGap produce what is essentially a web page contained within a mobile app.
Sounds brilliant doesn’t it? For developers that know JavaScript and React, you’re able to build a truly mobile app without having to learn a new programming language! There are however, a few limitations.
Historically, React Native apps were quite slow to initialise. When a React Native app starts, it loads your JavaScript and converts this into a native user interface. The React Native community has done a lot of work to speed things up recently and startup times are improving, however due to the nature of the framework, this will always be the case.
You may then get to the point where you need a native feature that isn’t supported by React Native. The great news is you can build your own native modules that interact with the JavaScript side of your app. The bad news is you’ll need to write some ObjectiveC and Java. Fortunately, React Native has a great open source community so you may find that the native feature you need already has a module built for it.
One Codebase, Two+ Platforms
Officially, React Native supports iOS and Android devices. However, there are third party integrations which provide support for other platforms. For instance, Microsoft has released a framework which provides support for Windows 10 devices.
In the vast majority of cases, I’ve found that the React Native apps I’ve worked on have shared a high percentage of code, certainly all the business logic can be shared. You may however, find that Android and iOS users have different expectations of the UI; for instance, certain form inputs (such as date controls) differ from iOS to Android. Luckily,  React Native has built-in platform selection utilities allowing you to change the styling of an individual component per platform or even use a totally different version of a component between iOS and Android.
There’s No DOM
Developers familiar with HTML will probably know about  `div` and `span` tags. If you’ve developed a React application for the web, you’ve most likely built React components using those tags and many more. Since React Native is a framework and doesn’t render to a web browser, it provides a set of basic components to build your own, more advanced components from. Out goes `div` and in comes `View`. Want a `button`? You’re going to need to build it yourself with `TouchableOpacity` or `TouchableHighlight`.
It doesn’t stop there, if you’ve built a web app with any kind of interaction before, you’re probably familiar with `form`s. React Native has no concept of a `form`, something I found frustrating to begin with! You can create buttons and inputs, but you can’t create a form. Fortunately, by using React, you already have built-in support for app state and context. You can therefore either build your own form components, or use a third party package. My preference is a package called Formik as it uses the same API for mobile and web thereby promoting consistency between my apps.
Sharing Code Between Your Web and Mobile Apps
As React Native uses JavaScript and React, it is possible to share code – or even the whole app – between your web and mobile clients. For instance, business logic such as data stores and API clients can be shared between mobile and web, if that suits your use case. There is also a framework called React Native Web that renders React Native components to a web browser.
Faster Development
React Native supports hot reloading out of the box. This feature  reloads only the changed portion of your app when you hit ‘save’ in the editor; meaning you don’t need to restart the app, sign back in, navigate to the screen you were working on and check that the label you just updated did in fact change colour.
You also only need to recompile the native portion of the app when something changes, such as an update to React Native or the installation of a third party native package. For day-to-day development, you fire up the JavaScript bundler and open your app on the simulator or a device and you’re good to go. The JavaScript bundler is extremely fast in comparison to the Android and iOS compilers making the experience akin to web development.
Is React Native right for you?
React Native is a great choice if you’re a web developer who wants to make the jump from web development to mobile development, or perhaps if you have an existing web app that uses React or JavaScript and you want to port functionality over to iOS and Android. You’ll feel at home with React Native’s tooling and enjoy the speed at which you can build a real native mobile app.
It does however, suffer a performance penalty due to the nature of how it works. If your app relies heavily on native platform features and APIs, or has a lot of animations and transitions, you might find that it won’t suit your needs. Under these circumstances, you might find that building a truly native app will work better for you.
One of the unique features of React Native is the ability to embed it into your existing mobile apps; So if you decide that the performance of the framework isn’t enough for some parts of your app but fine for others, then there’s always the option to build sections of your app using it. 
If you want further advice on whether React Native is right for your business needs, feel free to get in touch with our CTO Odhrán McConnell or one of our directors.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

In The Zone with Marcin Zasepa

Welcome to the second in our new series, ‘in the zone’, a collection of conversations with CTO’s within the CTO Zone community. Each week we’ll be discussing the latest trends, insights gained from there experiences, and future predictions for their industry. This week we’d like to welcome Marcin Zasepa, CTO at Homegate AG in Switzerland. Every episode will be approximately 30 minutes

Read More »

In The Zone with Sasha Bilton

Welcome to the first in our new series, ‘in the zone’, a collection of conversations with CTO’s within the CTO Zone community. Each week we’ll be discussing the latest trends, insights gained from there experiences, and future predictions for their industry. This week we’d like to welcome Sasha Bilton. Every episode will be approximately 30 minutes long, and we aim

Read More »

Case Study: DAZN Data Engineering

Find out how 101 Ways helped DAZN improve their existing data warehouse as well as planning and setting the foundations of the new cloud-based data platform. Click here to download the full case study. Get in touch with a member of the 101 Ways team if you would like to discuss ways in which we can help you and your company

Read More »

Search the Blog

Agile Management Made Easy!

All About Agile

By Kelly Waters

“’Agile’ is one of the biggest buzzwords of the last decade. Agile methods often come across as rather more complicated than they really are. This book is an attempt to unravel that complexity. To simplify the concepts. This book breaks the concepts into small bite-sized pieces that are easy to understand and easy to implement and delivers the message in a friendly and conversational style. Allaboutagile.com is one of the most popular blogs about agile on the web. ”

Kelly Waters

Agile 101 is available to purchase. GAME ON!

Agile 101

Emma Hopkinson-Spark

“Whilst there are lots of ways you can vary the game depending on the teams you have and the learning outcomes you want, the basic flow of the game play is common to all.”
Emma Hopkinson-Spark

Why did we make the game?

How to play the game?

London

101 Ways Limited
41 Corsham Street
London
N1 6DR
United Kingdom

Manchester

101 Ways Limited
No.1 Spinningfields
Quay Street
Manchester
M3 3JE
United Kingdom

Amsterdam

101 Ways BV
Weesperstraat 61-105
1018 VN Amsterdam
Netherlands

Contact Us

If you would like to get in touch with one of the team at 101 Ways, then please fill out the form below or email us at contact-us@101ways.com.