In this day and age, it would be hard for most of us to imagine living without our mobile phones and all of the applications they provide. Among other things, mobile technology helps us find information and keep in touch with our friends and family, and provides games and media to pass the time. The list goes on.
As technology and web development continue to evolve, so does application development. While this field was previously dominated by apps created with Java for Android or Swift/Objective-C for iOS, currently the picture is more diverse.
There are plenty alternatives for creating native-like applications, such as Xamarin and NativeScript, but there is one that is rapidly gaining popularity – React Native!
REACT NATIVE
React Native was started by Facebook in the summer of 2013 as an internal project and was released to the public in March 2015. It is based on React and allows developers to create native mobile apps with React and JavaScript by composing rich mobile UIs from reusable and declarative components.
Its usage and popularity have been booming lately. Popular mobile apps like Instagram and Skype were created using React Native. Why is it so popular?
Why use React Native?
Let’s look at some of the reasons why you should consider using React Native for your next project.
Cross-platform apps
One thing that should always be on your mind when creating mobile applications is the target audience. Around 99% of smartphones run Android or iOS, so to reach the most users, you should create apps for both platforms. The problem here is that developing native apps for both platforms is costly, as they each have their own language and tools, and the code is not at all interchangeable. You would need two teams that each develop their own apps.
By using React Native, both platform apps can be developed simultaneously, with one codebase. This means that not only will the app for both platforms be almost identical in look and feel, but the development costs will also be lower!
Native code integration
React Native invokes Java APIs to render Android components or Objective-C APIs to render iOS components, so the app is indistinguishable from native ones.
By default, a lot of building blocks and APIs are available for use, but if the necessity arises, it is easy to drop down to native code and optimize what is needed. You can also build part of your apps using native code and part in React Native!
Performance
One big advantage for React Native is that the JavaScript code is compiled into natively written code. The speed is almost the same as that of native apps and far better than of “mobile web” or “hybrid” apps.
Flexibility
A big part of what makes developing in React Native so great is the fact that it is based on React and uses JavaScript. According to StackOverflow’s survey, JavaScript was the most popular language and React was the most-loved framework/library among developers in 2017.
Because of this following, there are many developers that can contribute to apps created with React Native. Android and iOS developers are part of a niche market, and you would need different people for each platform.
Code reusability is one of the biggest selling points of React Native. After Instagram made the switch, they wrote an article explaining that they reuse between 85% and 99% of code for different products! This shows how flexible the library is and how it can speed up development.
Third-party packages
As with most popular JavaScript frameworks and libraries, React Native has an enormous ecosystem of third-party packages and modules that developers can use. Most of the problems have already been solved, so developers can focus on the task at hand – creating the app!
You can seamlessly integrate Redux in your app for predictable state management and add NativeBase for an enormous list of ready-to-use, native-looking cross-platform UI components.
Development
By utilizing the tools provided for React Native, there are many ways you can develop your applications. You can build projects with native code by using Android Studio and use an Android Virtual Device, or use Xcode with an iOS simulator. Another option is to connect a physical device and run your application there.
A superb feature that makes developing so great is Hot Reloading. As the React Native team put it, “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.” To summarize, this allows developers to see their changes almost instantly, without having to wait for the whole package to recompile, saving time.
Another way to quickly start developing is by using the create-react-native-app package. It allows you to start a project without having to install Android Studio or Xcode. It uses Expo for smooth and fast development.
EXPO
Expo is a free, open source toolchain that helps with developing, building and sharing React Native applications. It not only comes with an even more extended API for native features, but can also help with over-the-air updates, distribution to app stores and much more.
Expo provides users with tools such as a graphical development environment (Expo XDE), their own command line tool (Expo CLI), a client that can be installed on iOS and Android (Expo Client), and Expo Snack!
Expo client
Do you need to quickly show a demo of an app to a client who is situated on the other side of the globe? No problem! By using Expo Client, you can make your app accessible to anyone, anywhere.
By downloading the Expo client for your iOS or Android device, you can access any project by simply scanning a QR code. Changes made by the developer will be available within seconds. Such an agile process is not imaginable with native apps created with Java or Objective-C/Swift.
You can develop your app and immediately see how it looks and feels on both platforms, on simulated clients and real devices.
Expo snack
Expo Snack allows you to create projects without any downloads needed, straight in your browser. Just open the link and start coding! Snack shows your changes almost instantly for both iOS and Android. It uses Appetize.io to run the native apps in your browser.
Snack can be used to show a quick demo to a client, for training purposes, to quickly test a component and more. You can also access your code on your phone, by using the client.
Snack also includes the possibility to see the device logs in the editor, so you can check why something is not working or see the response from an API. It also incorporates drag-and-drop functionality of components and integrated ESLint support.
As good as all of this sounds, there are cases when Expo should not be used. For example, not all of the iOS and Android APIs are available. Expo and React Native are constantly evolving, and there are many new things lined up. In any case, if you start development with Expo and at some point realize that you need to write and include your own native code, it is possible to eject from Expo and continue without issues.
CONCLUSION
React Native is a very powerful library for creating native mobile applications. It has become a bridge between developing native applications in Java or Objective-C/Swift and developing them in JavaScript. Correctly utilizing all of the possibilities and tools provided can significantly improve the process:
- Create applications for Android and iOS with a single codebase.
- Share code between platforms and reuse components.
- Speed up development by using third-party packages and Expo.
- Prototype, share and update almost instantly.
Of course, there are many situations where you should develop your application natively, but do your research about the tools that are available and what current libraries and frameworks can offer.
Whatever route you choose in the end, allow us at Diatom Enterprises team to help you realize it. Our participation in countless Successful projects using React Native and vast knowledge of other technologies enable us to help you on your journey from an idea to a finished product!