PhoneGap, Ionic Framework, Xamarin. All of these have been on the native development market quite long now, but only Facebook with its React Native had turned the world upside down.
Well, it didn’t happen overnight – the framework has been around for about two years now. I was always thinking about getting my hands on mobile development, but I haven’t really had a chance to. Then I met React Native.
It has grown on the shoulders of its older brother – React.JS – and inherited what’s the best in it. Functional and reactive programming, composition, modularisation and reusability.
And the community is constantly growing. The number of project we can fork and use is really impressive. Let’s have a quick look at the search results for the phrase “react native” on Github:
Let’s start from the beginning. I am, a web developer with around 7 years of experience in creating web systems, mostly in PHP, Node and React.JS.
I spent last 4 months doing a side project in React Native and that’s what I’ve found.
Hot Reloading is the thing. If you haven’t been working with React.JS on the web I’ll give you a few words of explaination on this.
According to the React Native blog:
The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don’t lose any of your state which is especially useful if you are tweaking the UI.
That means, when you are working on your app, you have some data loaded, you can even be logged-in as a user – when you update some components of the app, change styling or fix the bug – you’ve got the latest changes visible on your app. Doesn’t matter if it works on the simulator or on the physical device. It just works, blazing fast and instantly.
Finding the right path
The first big struggle for me was choosing the navigation library. There’s tens of choices and almost every of them does the same job. For more reference I would refer you to the amazing comparison made by Charles Mangwa: Thousand Ways to Navigate in React Native
After a few hours of testing I’ve chosen React Navigation, mainly because of the performance reasons. It uses native animations to switch between screens and that makes it working better on the older, especially Android-powered devices. I also written a small abstraction layer (technically, a class) between my routes and the navigation library, to leave myself a backdoor to switch to another library.
You’ve got only two platforms to support
The above sentence is true. You don’t have to worry about Internet Explorer, Opera, Firefox, mobile browsers, Smart TV and any other web browsers being able to display (or not) your app.
But on the other side you have two very different platforms, with different navigation patterns, security features and display capabilities. Having this in mind and abstracting as much of a common code as you can, you can only achieve around 30% of reusability. But still it’s +30% of reusable code you don’t have to maintain for both platforms separately.
In the meantime, around React Native has been built a lot of quality tools helping developers make their lifes easier and deliver better code faster.
One of them, which I really loved from the first sight, is Expo. It gives a full variety of easily accessible native APIs, like GPS location, accelerometer, camera, filesystem as well as push notifications. Expo also makes your first experience with React Native much easier by delivering handy UI that displays logs, allows instantly launch device simulator or restart the packager.
In my opinion, React Native is nowadays very mature, powerful and easy to learn mobile development framework with rapidly growing community.
Although I think it is an amazing tool, it is now free of downsides.
First of all, building very complex apps may and it will – require native development knowledge. So, if you’re thinking of it seriously – take a look at Swift, Objective-C, Java or even Kotlin.
Animations and PanResponder APIs – it will take you a good couple of days practicing those to understand what’s exactly going on.
Thirdly, lack of native modules. React Native is still growing, but sooner or later you’ll experience it.
I have intentionally saved downsides for the very last paragraph, because I think you’ll have a good time of practice until you reach any serious issues. At this point I’m sure you’ll be able to deal with them or you’ll be surrounded by someone who can help you. So don’t worry and I wish you all the best with your React Native journey.