back to top

our blog



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

by Edward Coleridge Smith, 25 September 2019

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.

Leave a Reply

Your email address will not be published.