• Mobile Development

  • Digitalization

  • React Native

React Native Development: iOS and Android Differences

calendar icon 26 August 2018
clock icon 2 minutes read
React Native Development preview
Share article
  • linkedin icon
  • x(former twitter) icon
  • facebook icon

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;
React Native Development

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.

React Native Development: iOS and Android

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;
React Native Development illustration

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.

Daria Rolina
Daria Rolina
Marketing and Product Manager

Daria is an experienced Marketing and Product Manager with a strong background in driving product growth and crafting effective marketing strategies. With her expertise in market analysis, product development, and customer engagement, she provides valuable insights on how businesses can optimize their offerings and reach their target audiences.

Share article
  • linkedin icon
  • x(former twitter) icon
  • facebook icon

Safe steps to the legendary partnership!

At UKAD, we exclusively recruit certified professionals dedicated to continuous development. Our team prioritizes ongoing improvement, consistently enhancing their knowledge and expertise through prestigious certifications

Hire a developer
Kickstart your project picture

Contacts

Need support or have a question — contact with us