Comments

Differences in Building iOS and Android Apps Using React Native

iOS and Android differences

You have picked React Native to build cross-platform native apps on both iOS and Android. The biggest perk here is that the code is shared across the platforms. Code once and it works on both iOS and Android. But there are practical differences between iOS and Android, that you have to tackle as a React Native developer. There is never a perfect one size fits all solution, which means you need to tailor some pieces based on the platform as well.

Based on the projects I have worked on, and after seeing what others in the community have shared, about 85-90% of the code is shared between iOS and Android.

85-90% code is shared between iOS and Android using React Native

In this post, we will learn the differences between iOS and Android that you will encounter while building React Native apps.

Tools

If you are building your React Native app, using the React Native CLI, you will use different sets of tools for iOS and Android.

Note: If you are building your app using Expo, which basically adds another layer of abstraction to React Native, you can do away with these tools. You would never touch native iOS or Android code, while using Expo.

iOS

XCODE

The first tool you will need to build iOS apps with React Native is Xcode. It installs the iOS simulator and all the necessary tools to build your iOS app.

You also need a Mac OS to work with Xcode. This means you need a Mac OS if you want to build iOS apps with React Native, or iOS apps in general.

Summary: 

  • Xcode
  • Mac OS
  • CocoaPods

Android

Android Studio

While building Android apps with React Native, you will notice we need a completely different toolset. The first thing you would need is to install the Java Development Kit (JDK). The tool that is comparable to Xcode for Android is, Android Studio.

Summary:

  • Java Development Kit
  • Android Studio
  • Android SDK and related configuration

I am not a fan of working with either Xcode or Android Studio, and they happen to be my least favorite part of the development process. Again, if you completely want to do away with them you have an option of using Expo.

You can read this blog post Expo or Not – Building RN Apps to understand if Expo is a right fit for your development needs.

Native Components

When you start developing apps with React Native, you will start to notice that certain components look different on iOS vs. Android. This is absolutely expected. Since React Native translates the components into the corresponding native component of the platform, you will see the cross-platform differences.

A classic example to this is the date picker component. The native iOS date picker looks entirely different from the native Android date picker.

iOS

Android

The challenge really is that since these are not custom components that look the same across cross-platform, you may have to account for other styling differences etc.. based on whether it is iOS or Android.

Platform Specific Styles

React Native supports styling based on platform. You can leverage it in situations where you may need subtle difference in styling based on the platform. For instance if there is a difference in the native components and you have to style iOS and Android differently, you can use the Platform API.

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red'
      },
      android: {
        backgroundColor: 'green'
      }
    })
  }
});

In the example above we are using the Platform.select to determine if the platform is iOS or Android. The background color is set to red for iOS and green for Android. Notice the other styling like flex are shared across the platforms. You can also use the Platform API to determine the version of the iOS or Android devices.

Platform Specific Files

Let’s say you have significantly different code for some components depending on the platform, then React Native provides you a way to separate them out into different files. As shown below, you can name your iOS component with the extension .ios.js and Android component with the extension android.js.

// Files with extensions

MyComponent.ios.js
MyComponent.android.js

// Import component
import MyComponent from './MyComponent';

When you are ready to import the component, you can simply do so by providing the name of the component, without giving the extensions. React Native is smart enough to detect the device and render the component accordingly. If you are using an iOS device, it renders the component with the ios.js extension and works the same way for Android.

I have personally not encountered reasons to use separate files too often.

Release Process

One of the biggest step post development in building mobile apps, is the release process. Releasing web applications are usually a breeze in comparison to mobile apps.

iOS

App Store

App Store

While releasing iOS apps, you have to go through the App Store. Generally, the Apple Store guidelines to release and review process are more stringent compared to the Android release process. Plan for it to take a couple days to get approved by the App Store.

Android

Google Play

Google Play

Android apps are released to Google Play. This release process is relatively easier than iOS and straightforward.

Note: You can automate most of your release activities like code signing, creating snapshots, etc.. using tools like Fastlane. They help in reducing the time spent on manually generating the release artifacts.

Conclusion

Well that’s a wrap! You now know that although 90% of code is shared between iOS and Android, you will still face some practical differences while working on iOS vs. Android even while using React Native.

If you are looking for a course that gets you started with React Native and teaches the fundamentals, checkout Mosh’s course linked below.

Ultimate React Native Course – Code With Mosh

I hope you enjoyed this article. See you again with more articles. If you liked this post, don’t forget to share it with your network. You can follow me on twitter @AdhithiRavi for more updates or if you have any questions.

Adhithi Ravichandran is a Software Consultant based in Kansas City. She is currently working on building apps with React, React Native and GraphQL. She is a Conference Speaker, Pluralsight Author, Blogger and Software Consultant. She is passionate about teaching and thrives to contribute to the tech community with her courses, blog posts and speaking engagements.
Tags: , , ,

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts

    %d bloggers like this: