All Case Studies Design Development Interviews Machine Learning Project Management

React Native - Differences in Development for Android and iOS

React Native lets you build native mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich enterprise mobile app UI from declarative components. It basically allows you to reuse your code for writing apps for Android and iOS. “Write once, use everywhere” was one of the most popular slogans for this technology when it came out.

After more than 3 years since it first came out, it’s obvious that the slogan is not entirely true. We can reuse most of the code between both platforms, but in the end Android and iOS are different systems, and there are some differences.

Here are the 4 most important differences between development for Android and iOS

1. Operating System

There are some tools which let you run an iOS simulator and probably test the app there, but I haven’t tried any of them, and I am not sure about their reliability, because they’re not official Apple’s tools.

So while working on Windows, you’re limited to the only official tool - Android Studio, which lets you work on the Android version of the app.   

When you use macOS you don’t have this kind of problem, because Android Studio works on Apple’s Macbook. This is why the recommended tool for React Native developers is a computer with macOS.

You can build applications for both systems - Android and iOS - with React Native, but you cannot easily check if the app works on both systems if you’re working on a computer with Windows. Windows cannot run XCode and its simulator, which is a macOS-only app. This is quite a limiting situation, because XCode is a very helpful tool and I use it quite often when working on React Native applications.

There is a way to run iOS applications on Windows using the Expo framework. This tool allows you to run your app on a physical iOS device without XCode. Working with Expo comes with some limitations, which are listed in the official documentation. Although running iOS apps is possible on Windows machines, the recommended OS for creating React Native is macOS with its set of dedicated tools.

2. Native Elements

It may not seem obvious at the beginning, but while using components from React Native you may be surprised that, for example, using the Picker component produces a different result in the iOS simulator than in the Android emulator. This is because, under the hood, React Native uses platform-specific elements for its components.

The example below shows the code of a simple React Native Picker and its rendering on Android and iOS.

Code: https://gist.github.com/Karniej/86082a5d09e8147dacedb23b5e5aa7f5

React Native Picker iOSReact Native Picker: Android

3. Specific Styles - shadows

Shadows are another important topic in terms of differences between iOS and Android while working on cross platform apps.

With React Native, you just style your application using JavaScript. The style names and values usually match how CSS works on the Web, except names are written using camel casing, e.g borderRadius rather than border-radius.

That’s why implementing shadow we would use code like this: https://gist.github.com/Karniej/20088e7a545910fd175dc2acb391f475

Shadow test: Differences on Android and iOS

As you can see, there’s no shadow on Android at all. This is because Android doesn’t support shadows in React Native, and in order to have some kind of shadow, we have to use the elevation property. The elevation property “elevates' an element above the standard elements so it “casts” a shadow. The shadow grows bigger in line with how much elevation is given to it.

This style property has no effect on iOS apps, which is why we don’t have to use the Platform.select option this time.

Adding elevation: 20 to the code above results with a shadow on Android like this:

Shadow test on Android: adding elevation: 20

As we can see, there’s a shadow. We can only operate with one property, so there’s limitations to operating with shadows on Android.

4. Manually Linking Libraries

The React Native team has recently made huge progress when it comes to the process of integrating third-party libraries. Autolinking allows you to seamlessly add native dependencies to most projects. But sometimes you need to do some work on your own.

Linking libraries manually isn’t an easy job for anyone coming from the web development world and isn’t that easy for Native developers trying React Native.

Manual library linking means adding some code in the Android and iOS folders, which requires some knowledge of the Java and Swift/Objective-C languages. Most of the libraries which I have used had great documentation and, even without knowing anything about these languages, I was able to implement those libraries into the app.

Unfortunately, sometimes the docs aren’t updated to the latest react-native version and there might be some differences or errors which may take some time to fix.

Summary

Although there are some differences between developing for both systems, React Native is still an awesome technology because it lets you reuse most of your code for both systems. Most of the differences are around the framework tooling and the application’s appearance.

React Native Development Services
Project management app
READ ALSO FROM Mobile
Read also
Need a successful project?
Estimate project or contact us