In the last blog I wrote, I shared my knowledge on how React Native collaborates with the OS to yield the native experience in cross-platform apps. If you haven’t read it yet, please give it a read to understand the sorcery used by this magical framework. In this blog, I will explain how the development cycle with React Native differs from that of iOS. To make it easy to comprehend, I have listed certain criteria based on which we’re going to compare the complexity/ease of development in both environments.
Let’s begin with an illustration of how the transition to React Native feels like to an iOS developer.
After adding React Native to your bucket, you will be able to implement your ideas on both platforms without a hitch. That sounds cool. Right? Let’s get started.
Reloading
In iOS apps, making a small change in code is a Pain as it requires you to rebuild everything from scratch. Then, you have to wait for the app to launch again on the device so that you can verify the changes. If the project contains a large number of files, then multiple runs just add fuel to the flame, and you spend a lot of time just waiting.
In React Native apps, we have a JS bundle that holds the application code and other assets. Your development machine acts like a local server hosting the bundle and the app just downloads it at every refresh/reload. Contents of the bundle are cached on the device which makes the reload process really quick and you don’t have to rebuild your app ever again.
Layout
Laying out screens for the iOS app using Interface Builder in XCode is indeed a blessing for developers. It can use size classes to position views differently on screen sizes using a single interface. Constraints make it really easy to animate views on the screen at runtime. Styling based on certain flags helps in modifying the app behavior without having to write a single line of code.
In React Native, you’re definitely going to miss that ease of laying out views using drag/drop and constraints with XCode. React Native rather uses Flexbox to style and position views on the screen. It’ll take you a little time to get familiar with its syntax and attributes but once you master it, making views with dynamic content will be a cakewalk.
Localization
iOS apps have to manage separate files for localizing strings used in code and Storyboard/Nib files. There are frameworks that take a much easier approach to do this but there is no standard way to keep all the translations in one place.
There is a popular module named react-native-localization to do the localization in React Native apps. It uses just one file that holds the translation for strings used all over the project. It means that you just need to build a simple JSON file holding translations for all languages supported by your app. That sounds pretty easy, right? React Native is even smart enough to capture the locale used on your device and apply translations accordingly.
OTA (Over the Air) Updates
This is something that makes mobile developers envy web developers a lot. Any bug/improvement requires time to recompile everything and submit the app for approval again. This whole cycle takes around 3-4 days to ship the new app to users. In short, it takes some time to fix the issue, and then some more, to deliver it to your audience.
React native has come up with a remedy. With third-party libraries like Code Push, you can have all of your live app’s code on your server. Whoa! Guess what? Apple approves it unless you turn your taxi app into a social media app with an update. You can configure the tool to update code on the live app either at the launch or even when the app moves to the foreground from the background. Did any new update induce regression issues in the app? No worries. You can revert the code back to the last stable version without having to go through the approval process again.
iOS pod lovers will have npm/Yarn in React Native
Many of us love using CocoaPods for linking third-party libraries in iOS apps. Pods installation keeps all developers from the pain of manually placing/managing the required files in project architecture. Just one command and there you have your workspace with Ready to use libraries.
In React Native, you got npm (node package manager)/Yarn at your rescue if you need to use any third-party library in the project. Both operate via terminal commands and can quickly install all packages listed in the package.json file.
Reusability of code (especially for views)
React native has a clear advantage here. In iOS apps, if you need a similar view on other screens then you manually need to copy/paste the view components. In React native, all you need to do is “Just import the component and place it with the start and end tag in the render() method”. That’s it! Imagine just four/five reusable tags building a complex layout for you which looks purely native.
App Size/Performance
For small apps, you might find React Native app’s size larger than that of an app built using native. It’s because of the tools and utilities it’s shipped with but for large-scale apps, size will be significantly less compared to a native app. Fewer lines of code due to the strong reusability make it really easy to manage big projects in React Native.
You might find a React Native app little laggy in debug mode. Don’t be disappointed and try running it in Release mode and voila, it got the same fps as that of a native iOS app.
Debugging
Debugging with XCode is indeed unbeatable. You can debug your code, your views on the go without any hassle. It gets really easy to debug issues in the app and track memory/CPU usage as well. Exception and Symbolic breakpoints help a lot in tracking down the ‘hard to find’ issues.
I tried two ways of debugging a React Native App- one is with google chrome by enabling “Remote JS debugging” right from the device and another by using the inbuilt debugger by Nuclide in Atom IDE. With Nuclide, I find it really easy to put breakpoints and query variable values at every debugging step.
Testing
Compared to iOS apps, there is more scope in React Native to test your code. You can use the Jest module to do unit testing, UI testing, and API testing. UI testing is also supported on XCode but in React Native environment, you can test all screens of your app in one go without even navigating to them. Felt pretty cool to be notified in advance about a little change breaking the views in the app.
What if something to be implemented on iOS is not available as a module on React Native?
React Native’s got your back here as well. It gives full flexibility to let you make function calls to native code and get the callback with the result of the execution. Your experience in iOS development comes really handy when you need to build a similar feature in React Native app. I tried Augmented Reality implementation in iOS as well as React Native app and it worked great. The guide to building your own native module in React Native is easy to follow. Try it and you will be impressed.
Conclusion
Once you start the development with React Native, you are definitely going to miss the X-Factor yielded to developers by XCode. But, if you look at React Native’s power to share the code between platforms while keeping the native feel intact then it’s really worth giving a try. Once you get used to it, you’ll be able to unleash its power on both platforms. Hope the blog gives you an idea of the challenges and perks of using React Native. The new era of cross-platform apps apparently belongs to React Native.
