React Native may be new, but it has a lot to offer. Is it the long-awaited path towards cross-platform mobile development? In this article, Anna Klimenko and Alexander Kotov explain why React Native makes sense for developing across multiple mobile platforms.
Don’t struggle so much, the best things happen when not expected,” Gabriel Garcia Marquez once said. The invention of React Native (RN) was no different!
It all started with the intent of Facebook to make the development across mobile platforms quicker and with fewer developer efforts. Being restricted by the specifics of the native platform languages, Facebook could not update their mobile app as quickly as they did it with their website.
RN very quickly went out into the big IT world and set its place among other Frontend technologies. The RN history timeline consists of the following highlights:
- Summer 2013 – React Native was born as a Facebook’s internal hackathon project.
- January 2015 — React.JS Conference: the first RN preview.
- March 2015 — F8 Conference: RN was announced open-source and available on GitHub.
- September 2016 — UI Toolkit was launched for RN.
- September 2017 — First Conference on RN, Poland.
The attractiveness of the React Native app development is that an engineer is able to create one code base that will fit any platform without a necessity to learn iOS and Android programming languages. This approach was named “learn once, write anywhere.”
Right now, there are more than 1,500 RN contributors with more than 12,000 commits registered on GitHub. Anyone of the contributors can propose code fixes and enhancements, and after Facebook’s approval, they can be implemented and released officially.
React Native vs. Hybrid
When clients say that they want an app for all mobile platforms, they think that they only need one app, not three apps written by three different teams for iOS, Android, and Windows Phone.
Native apps are always the best for each individual platform, as far as look, feel, and performance are concerned. However, despite these benefits, native app development is slower and much more expensive.
First of all, mobile devices vary wildly. Different mobile devices have a variety of screens. Android, in particular, has a catastrophic number of options to keep track of and optimize for. Secondly, the compiling time after every minor change seriously slows down development.
Another option is hybrid development. For example, if a client wants to test a startup idea to deliver it to the market quickly. There are many hybrid apps like Basecamp or Untappd in the stores today. With the help of frameworks like Cordova and Ionic, hybrids can easily cope with most of the standard features and mimic native behavior.
However, if you really want a native-looking app that is efficient and scalable, then you should build a mobile app with React Native.
At first glance, it may seem that there is no difference between RN and hybrid development. They both have a common aim: to facilitate mobile app development and make native-looking apps with less time, money, and effort. But the hybrids run on a base of WebView — a middle layer between an app and native shell. Such approach affects the app behavior smoothness and performance. React Native doesn’t use WebView; that makes the application speed almost as good as in the native Android or iOS apps. Facebook, Instagram, Skype, Walmart, Uber, Airbnb, SoundCloud, and more are fully or partially built with the help of RN for both iOS and Android.
Why is React Native so cool?
There are many reasons why we love React Native, but we’ve narrowed it down to our top five.
Easy to learn if you know react
It’s easy for developers experienced with React to understand React Native-specifics since they both use the same reactive programming paradigm. Lots of tutorials and a vibrant GitHub community make it possible to master these skills quickly.
Flexbox and SVG for an adaptive UI
One of the advantages of React Native app development is that it uses the Flexbox technology for a layout that adapts UI to all screen dimensions. This seriously saves time for development as you don’t need to adjust the code for different OS versions and screen sizes. Here is the example of Flexbox ability to transform into different screen dimensions.
You won’t need as many developers
Converting apps is easy
If you already have a web application written with React, you can quickly migrate it into a RN mobile version. This is obviously much simpler than writing it from scratch. Of course, you will have to make some manipulations with layout and styles, as well as change the interactions with a server. Overall, this kind of migration saves you heaps of time.
Let’s imagine we developed some music sharing application like SoundCloud. To facilitate the process, the following scheme can be used:
- Create app in RN
- Let the iOS and/or Android developers write some native components if they are missing
- Bridge these components to the rest of the RN code.
This will be much faster than creating the whole app in native languages.
For one of our most recent projects, we needed to add a gallery of images to our client’s app. Though the gallery looks and behaves similarly in Android and iOS, the data is extracted from the platforms differently. So we wrote the code in RN and then made a ‘fork’ that explained how the ‘CameraRoll’ component should run on Android and iOS. Here it is:
Disadvantages of React Native
React Native is still the new kid on the block as far as mobile development goes. Like any young technology, obviously it still has quirks and issues.
Still raw technology
First of all, React Native is immature. Despite that, improvements are implemented quickly. It’s not just Facebook developers working on the changes, but also contributions from community members. This accelerates the technology evolution and maturity.
Here’s one example from several months ago. At the time, there was no good solution for navigation, making development difficult. But, by the end of April 2017, React Navigation was released and took a huge step towards the first stable release with up to 300 bug fixes.
Since then, we’ve already used React Navigation in a recent project and it was really cool: quick to install, easy to use, and it has 60fps animation and native components for a great look and feel. The only problem we had was that making this component work with redux; the solution wasn’t intuitive, so we had to spend some time wrapping our heads around it.
Some components aren’t available
The most significant disadvantage for React Native is that many components are still unavailable. But the good thing is that very few components are left to develop. It’s only a question of time. For now, you have to write the missing components by yourself.
Recently at Greenice, we worked on one interesting project. During development, we were challenged by a lack of official components for mobile cameras and Bluetooth. Luckily, we managed to find more or less appropriate components in the community and we were able to rebuild them to our needs. We wrote native Android and iOS code to add camera effects, a gif-making tool, flash-effect, sliders, Bluetooth mechanism, and more. While this process took most of the development time, this was much faster than if we would create separate iOS and Android apps.
Now the app runs perfectly and we gained valuable experience. Thus, we tested it in person so that if you need to create some unique features, you can always write them in a native language and combine with RN code.
Why choose React Native?
Today, you may see requests for React Native from employers and developers alike. The front-end developers that know RN will be in demand for the years to come.
In addition to creating new apps from scratch, many companies want to rewrite their existing native apps to RN. The main reasons for that are better scalability for different platforms, higher performance than in hybrids, and easier overall maintenance.
Advantages for employers
- Fewer developers. You will get one code easily rendered for different platforms with the efforts of only one RN developer.
- Quicker to make changes. RN makes the development process more agile and responsive to the changing requirements.
- Cheaper. Hiring iOS and Android developers is more expensive than hiring a RN developer.
- High app performance. The performance is a constant point of concern in mobile development. There is certainly some difference in speed between native and hybrid apps. But the performance of most of the RN apps is almost as good as of the native ones.
- Time-saving. With RN, you don’t waste time for drawing interfaces for different screen dimensions. Development and all continuous changes are quicker than with native mobile languages.
Advantages for developers
- Exciting experience. RN is a young and quickly maturing technology that is interesting to follow. There are not many specialists yet and you can be one of the first in the niche.
- The learning curve is low. Having a good knowledge of React and understanding mobile development principles, it is possible to learn RN in about a month or so. If you have some basics in iOS and Android native languages, it can also help you make really great platform-specific things quicker.
- Great community. Though the technology hasn’t even reached its 1.0 release, the technology is often updated and enhanced. Due to the community the technology quickly progresses and you can find the components that are still missing officially.
Source : https://jaxenter.com/react-native-cross-platform-app-development-142732.html