Should You Use React Native for Your Next Mobile App?
Which framework should you use to build your next mobile app?
Right now, you’ve got a few options beyond building all your apps natively.
One of those is React Native. Originally created by Facebook to build complex user interfaces relatively quickly, it’s popularity is currently soaring. Big hitters Instagram, Netflix and Bloomberg have all used React Native – or its close cousin ReactJS – to build their mobile apps – which has to be a big deal, right?
This article will help you decide, and figure out whether it’s really worth all the hype. We’ll cover:
- A run down of what it is and how it works
- Where and when to use React Native
- It’s pros and cons
- ….and finally, whether it’s better or worse than building a native iOS or Android app
Are you ready? Let’s roll…
React Native: the basics
Before delving into the pros and cons of React Native, we thought it was important to give you the lowdown on the basics.
This was back in 2011, when Facebook were searching for a way of building complex, dynamic UIs which still allowed for high performance. The guy that had the idea was engineer Jordan Walke (this isn’t directly relevant to this article, but when you come up with a game-changing mobile development platform, we reckon you deserve some kudos).
Released two years later in 2013, React Native allows for hybrid mobile development, and uses both native elements and the ReactJS library created by Facebook.
How React Native works
One of the standout things about React Native when compared to alternatives like PhoneGap, Xamarin or Cordova (more on them below) is that it uses native mobile controllers, rather than relying on other engines to wrap code.
This approach makes your apps seem more ‘at home’ on iOS and Android without you having to build them on each native platform. You get the look and feel of a native app, despite the fact you haven’t programmed it as such.
Where and when to use React Native
React Native is a mobile-first framework. So, if your company employs a mobile-first approach to development, it’s a tempting option.
Still, it’s worth doing a bit more digging to see whether it’s a good fit. When figuring out how best to build your project, you should take into account:
- Security needs
- Memory management issues
The companies that use React Native – Bloomberg, Instagram and Netflix, for example – need a fast, reliable UI. They don’t need to carry out advanced calculations guard customers’ savings accounts from external threats.
React Native has grown out of Facebook’s efforts to develop a top-of-the-range user interface – so focus on that as a main reason to use it.
The pros and cons of React Native
There are a lot of great things about using React Native for your mobile apps – but as a programmer you’ll know that no platform is absolutely perfect!
Let’s have a look at some of the pros and cons:
…which gives it two key advantages
It contains native controls and modules
We touched on this above – but this is a major plus point for React Native, so it’s worth reiterating and going into a bit more detail.
React Native uses native APIs to render primitives, so that you can create platform-specific versions of apps and components. This means you don’t need separate teams to create and maintain apps on different platforms – you can maintain one codebase across multiple platforms.
Using React Native saves money on having to hire development talent twice over, and speeds things up by unifying development teams under a single umbrella.
It builds stable, high performing apps
React Native uses a simplified data binding method so that child elements can’t affect the parent data. To change an object using React Native, you have to first modify its state and then apply updates, resulting in stable, reliable apps.
Another plus is that because it renders code to native APIs directly using a separate thread from the UI, which results in better performance than alternatives. Other cross-platform frameworks use WebView (a mobile engine) to render code. This can have its advantages (more on that in the ‘alternatives to React Native) section below, but does sacrifice a bit performance-wise.
There’s a rapidly growing open source community driving improvements
React Native is a very young framework.
Sure, this can have its downsides (we’ll get to them in a minute), but it is also rapidly growing in popularity and has an enthusiastic open source community behind it. There might be a limited range of components to play with now, but the library is rapidly expanding as the community grows.
And, as it’s open source, you can always contribute to it yourself! If you can’t find the right component and you think others might need it too, code it yourself and share it – get into the spirit of open source coding and help your fellow devs out.
Small number of ready-made components
Carrying on from above, React Native is still young.
Of course, there are third-party component libraries which you could make use of, but finding reliable third-party component libraries for React Native is, to put it bluntly, a bit of a lucky dip.
You could strike gold.
Equally, you could go round in circles trying to debug the incredibly glitchy non-official components you’ve used to the extent that you might as well have coded it yourself.
The relative immaturity of React is why AirBnB has recently decided to sunset React Native and switch to native development.
“There are instances in which its immaturity shows through and makes something that would be trivial in native very difficult.” explains developer Gabriel Pearl. “Unfortunately, these instances are hard to predict and can take anywhere from hours to many days to work around.”
Lack of support for JQuery or CSS
This one’s pretty self-explanatory.
Can you or your dev team work around this? Yes.
Can this be really annoying in certain situations? Also yes.
Unlike many other cross-platform development tools, React Native isn’t a hybrid tool. It has its own DOM-like native view hierarchy and style implementation, which is similar to CSS – but not compatible. As JQuery relies so much on HTML DOM, React Native can’t support it.
This might not cause you too many issues if you’re building from scratch using React Native, but if you’re planning to migrate from other frameworks you’ll probably have quite a bit of thinking to do.
Lagging SDK updates and compatibility issues
React Native is generally pretty slow to, errm, react when iOS or Android update their SDKs.
This is annoying, and just one of a list of little niggles. These aren’t dealbreakers, but do often become a source of significant frustration (read ‘devs shouting wildly at their screen’) for anyone working with React Native.
Watch out for:
- Hot reloading failures
- Incompatibilities between community libraries and different versions of React Native
- Emulator issues
- Problems with react-navigation
- The need to frequently reinstall packages
Its future isn’t super clear
One thing that no-one can quite pin down is whether Facebook are committed to React Native long term. All we know is that right now – and for probably the near future – it suits Facebook enough to commit to it now. In the future? Who knows…
Licensing and patents for React are also worth keeping an eye on. Until recently, Facebook were pushing a wildly unpopular ‘BSD + patents’ licensing model for their open source technologies
Essentially, you could use React as an open technology, but if you do you can never sue Facebook for patent infringement, or go against any patent they wish to hold. No intellectual property rights for you.
After significant pressure from the Open Source community, they’ve changed onto the significantly more egalitarian MIT License – but one suspects this doesn’t suit them that much. Your legal eagles will need to keep a close eye on movements in this space.
Alternatives to React Native
React Native isn’t the only cross-platform development tool out there. Depending on your needs, you could also consider:
Owned by Microsoft, Xamarin uses a C# codebase to write native iOS, Android and Windows apps. It’s a popular open source option used by a broad range of organisations, including CA Mobile, the World Bank and Alaska Airlines.
Adobe’s PhoneGap is an affordable multi-platform development tool based on the open source Apache Cordova framework, which uses a hybrid of HTML, CSS and JS. It’s good for building simple apps that ‘feel’ native- though reputationally doesn’t do as well with anything complex. Wikipedia is built on the PhoneGap framework.
If you need high-quality graphics for a gaming app, Corona is a good option to go for. It uses the Lua scripting language (which creates reliably fast and powerful gaming apps), and has the bonus of being able to call any native library or API.
Qt is a cross-platform framework based on C++. Particularly good for graphical interfaces, it’s used by big hitters across the consumer electronics, automotive and medical industries including Sky, Mercedes Benz, Pergeot and LG.
(That’s pronounced ‘cute’ rather than ‘cutie’, if you were wondering).
Ionic is an open source SDK for hybrid app development built on a set of Web Components. This means that users can choose whichever user interface framework they want to, including Angular, vue.js or even React.
Is React better than building completely native apps?
Cheat’s answer: it depends what you mean by ‘better’.
Ultimately, nothing quite behaves as natively as a real native app. If you’re looking for native authenticity whilst using a cross-platform development tool, you’re never going to find it – no matter how good the tool is.
Still, in a lot of cases, React Native comes genuinely close. Apps built using React behave more natively than those on other cross-platform apps because of its native components, and because it uses native controllers to wrap code rather than relying on third-party engines like WebView.
Now, if by ‘better’, you mean ‘better for you’, that’s another story.
In the right circumstances, React Native can save you time and money. There’s no need to hire a separate team of devs for each platform and – assuming you can find the native components you need – it’s much quicker than creating everything from scratch.
And, as long as your app doesn’t need to do anything too complex, it produces great results.
For the relatively small amount of native performance it compromises, React Native is accessible, cost-effective and fast – there’s definitely a lot to like.