React Native Development: iOS and Android Differences

React Native is a JavaScript framework for building native mobile apps. Developers can use it to compose rich mobile UIs with declarative components. It allows you to use the same code to create iOS and Android apps. Also, you should learn about safe mobile development to create top tier apps with a huge monetization potential.

The React Native slogan 'write once, use everywhere' was widespread when the framework became popular. Now, after the third anniversary of React Native, a majority of developers may argue with this claim. Yes, we can reuse most code when working with both platforms, but in the end Android and iOS are quite different systems, which causes some issues.

Android and iOS Development: 4 Biggest Differences

1. Development Environment

The only official Windows IDE to work with Android apps is Android Studio. There are some unofficial iOS simulators for Windows to test iOS apps, but their reliability isn’t guaranteed by Apple. For macOS users, the situation is simpler as Android Studio works on Mac. So we recommend that React Native developers choose Macs for work. Building applications for both Android and iOS with React Native is possible with Windows, but testing is limited as XCode (a very helpful tool) and its simulator is only available on macOS.

2. Shadows

Implementing shadows is one difficulty when working on cross-platform apps for iOS and Android. React Native lets you simply style your application with JavaScript. The style names and values match CSS for the web (with some exceptions for camel casing).

We would use code like this to add a shadow:

import React from 'react';
import { View, Text, Picker, Platform } from 'react-native';

const styles = {
 wrapper: {
   justifyContent: 'center', alignItems: 'center', flex: 1
 },
 title: {
   fontSize: 20,
   marginBottom: 40
 },
 shadowTest: {
   width: 300,
   height: 300,
   backgroundColor: '#00d664',
   shadowColor: 'black',
   shadowOffset: { width: 5, height: 5 },
   shadowOpacity: 0.5,
   shadowRadius: 10
 }
};

class ShadowTest extends React.Component {
 render() {
   return (
       Shadow Test {Platform.select({ android: 'Android', ios: 'IOS' })}
   );
 }
}

export default ShadowTest;

But Android has no shadow because it doesn’t support shadows in React Native. If you require a shadow in your Android app, you have to use the elevation property. It elevates an element above the standard elements to cast a shadow. The size of the shadow depends on how much elevation you give the element. This style property doesn’t have an effect on iOS apps, so you don’t need to use the Platform.select option.

If you add elevation: 20 to the code above you’ll get a shadow.

There are limitations to working with shadows on Android as it’s possible to operate with one property.

3. Implementing libraries

If you want to link a library to an app, you can add it as a dependency and run react-native link "library-name". But there are many libraries that require manual linking. This is a tough job for any web developer no matter how experienced they are with native app development.

To implement a library manually, you need to know some Java or Swift/Objective-C.

Good documentation sometimes simplifies this process, and you could manage with the task even without basic knowledge of those languages. But if documentation isn’t updated for the latest React Native version, you can encounter bugs or unexpected differences.

4. Native elements

After spending some time working with React Native, you may notice that React Native library elements with the Picker component give different results in the Android emulator and in the iOS simulator. React Native compiles JavaScript elements to platform-specific elements for its components. Here’s how React Native Picker code is rendered for Android and iOS:

import React from 'react';
import { View, Text, Picker, Platform } from 'react-native';

class MyPicker extends React.Component {
  state = {
    system: ''
  };

  render() {
    return (
        React Native Picker{' '}{Platform.select({ android: 'Android', ios: 'IOS' })}
         this.setState({ system: itemValue })}
          itemstyle={{ width: 100 }}
    );
  }
}

export default MyPicker;

Conclusions

Besides the peculiarities between iOS and Android development mentioned above, other differences are mostly related to the layout of an app. Despite these peculiarities across platforms, React Native is still an awesome technology that lets you reuse most of your code for both systems. Moreover, the limitations of developing in a Windows environment could sometimes be beneficial because if you smooth out the cranky Android app while developing with React Native, you can be sure that those features will work on iOS as well.

Author: Daria Rolina