All Case Studies Design Development Interviews Our Way 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 mobile 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. There are tools to test iOS apps for Windows, but they are unofficial.  

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.

2. Native Elements

It may not seem so obvious at the beginning, but while using elements from the React Native library, 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 compiles JavaScript elements to platform-specific elements for a 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

image3-1image1-1

3. Specific Styles - shadows

Shadows are another important topic in terms of differences between iOS and Android while working on cross platform app. 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

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:

image5-1

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. Linking Libraries

When we’d like to use some kind of third-party library in our app, most of the times adding it as a dependency and running react-native link "library-name" will do the job, but many libraries require manual linking. 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 layout of the application.

After working with React Native for some time, I learned that the limitations of Windows can also be an advantage, because most of the problems I encountered while developing apps with React Native pertained to Android apps. When I’ve got something working on Android, there is a very low possibility that it doesn’t work on iOS.

New Call-to-action
New Call-to-action
READ ALSO FROM React Native
Read also
Need a successful project?
Estimate project or contact us