React Native: What are the 5 Key Learnings of the Framework?
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.
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
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.
Is React Native right for you?
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.