Since its development by Facebook, React hit the web and mobile development world by storm. Aside from its growing global community and innovative libraries, a single developer can go from coding complex web interfaces, to easily building effective and scalable mobile applications with almost the same code. This affords various benefits to both the developer and the employer as far as budget and timelines are concerned.

Among the challenges that JavaScript web developers are presented with when building mobile applications is creating great user experiences in regards to platform specific design and interaction. Android and iOS platforms have significantly different approaches to design and layout, and the topic of approaching these from a React Native stance is something that is continuously evolving amongst the community.

The objective of this article is to cover some of the fundamental differences when creating a mobile app for both iOS and Android devices with React Native using the same codebase. By the end of the article, you will have the confidence to design your components in a platform specific way. Let’s take an overview of the two philosophies and learn about the two most valuable resources we will be referring to throughout the article.

Android Devices and Material Design

In 2014, Google developed a design language called Material Design. The idea behind it was to digitally emulate the perception of material objects, which have surfaces, edges, seams and shadows. Material Design makes extensive use of the card motive in grid based layouts and encourages the use of animations, transitions, and using light and shadow to create depth. When you use apps like Gmail, YouTube, Google Drive, Google Maps, or any other Google apps, you will see Material Design in full action.

Material Design Guidelines: https://developer.android.com/design/index.html

iOS Human Interface Design

While Android makes use of the Material Design approach, Apple has their own Design Principles that govern what makes iOS apps outstanding. The three themes that drive great iOS UI are clarity, deference and depth.

Summed up, this UI philosophy calls for a focus on content first and a thoughtful use of external effects, used appropriately to bridge the gap between design and functionality. The use of layers and motions should aid in conveying hierarchy, while use of space, color, images, and other elements should subtly highlight important content whilst conveying interactivity.

iOS: https://developer.apple.com/ios/human-interface-guidelines/overview/themes

The images I use as examples in this article come from the resources that I include at the end.

The Platform API in React Native

Platform is a module that is shipped with React Native and allows us to conditionally render UI based on the current operating system that is running your application. This enables us to write Android and iOS code in the same components. Rendering an iOS and Android button based on the operating system would look something like:

 render( ) {
  return ( ) {
    <TouchableOpacity style={ Platform.OS === ‘ios’ ? 
       styles.iosBtn : 
       styles.androidBtn }>
      <Text>My Button</Text>
    </TouchableOpacity/>
   }
 }

In regards to the larger architecture of your app, creating view containers makes the tasks of rendering different components within each view clean, organized and easy to understand.

Read more about Platform API: https://facebook.github.io/react-native/docs/platform-specific-code.html

Navigation

The importance of Navigation is considerable. It is what determines how users get around and find important destinations in your app. Android and iOS have two very different approaches. It is vital to plan the structure of your screens and how they relate, by deciding what the most important destinations are and how you think your users will behave when finding content. Keep in mind that Android has a built-in back button, and iOS does not, and usually makes use of a chevron “back” button in the navbar.

Android typically utilizes a drawer that slides out with options to navigate the top levels of your app, whereas iOS users are used to tabs at the bottom of the screen.

Android Drawer Menu

Android Drawer Menu

 

 

IOS Tab Bar

IOS Tab Bar

 

 

 

 

 

 

 

 

Tabs in Android apps will generally be at the top of the screen as opposed to the bottom like on iOS, though finding apps that use bottom tab bars on Android is becoming used more often. (Tab bar on top still however is more ‘Androidy’).

Tabs in Android apps will generally be at the top of the screen

Android tab menu on top

Android tab menu bottom

Android tab menu bottom

 

 

 

 

 

 

 

 

 

 

Buttons

There are three commonly used button types in Android. They all display ink reactions upon being pressed.

Floating action button, if you want it to be always available:

 

Android Floating Button

 

Android raised button

 

Android flat button

 

Placement of Android buttons:

  • Forms – left
  • Dialogs – right
  • Cards – left

iOS buttons have a flat display

 

Flat iOS button

Flat iOS button

 

iOS button positioning:

  • Dialog – center
  • Card – wide, center
  • Forms – wide, center

Secondary buttons have an inverted background color with a hint on the primary buttons color. When you come across this in Android, you will likely not see the border around the secondary button.

 

iOS primary and secondary buttons

iOS primary and secondary buttons

 

Cards

Cards are a great way to communicate collections of content. They can be used with different data types and can have multiple actions, whilst creating a pleasant user experience.

On both Android and iOS, cards have a drop shadow and border radius, not too much of however the shadow will be a bit lighter and gentler on iOS.

 

Android card

Android card

 

iOS card

iOS card

 

Icons

Choice of icons is something that truly can enhance the feel of your application, and once again, each platform embraces a different style. While it’s always possible to have your own icons designed for your app, it is important to keep these approaches in mind.

iOS icons are likely to make use of thin lines that make up the icon, often with a transparent background color, whereas Android icons tend to be of a more solid nature, and embracing thicker borders.

The following examples are taken from a great icon package from Expo called Expo Vector Icons, that is commonly used among React Native developers. One can simply search for any icon and see corresponding choices for platform specific inspired icons from a variety of popular libraries like Entypo, Material Design, Ionicons and more. It also allows the developer to import icons as needed instead of loading an entire library.

 

Android and iOS icons

Android and iOS icons

 

Expo Vector Icons: https://github.com/expo/vector-icons

Typography

Typography is something that is easy to overlook, and can make a bigger difference than one might think. Material Design is rather specific about line spacing and uses considerably more whitespace than iOS.

The general font for iOS is San Francisco and font sizes are not as drastically different from each other. In order to create hierarchy between important texts, variants in font weights are more common than font size. Android, on the other hand, uses more contrasting font sizes and less variation in font weight, and uses Roboto as the standard font.

In the following, take note of the space between the text, as well as the bigger more striking text compared to that of iOS.

 

Android alert

Android alert

 

iOS alert

 

Segmented Controls

You could use segmented controls to alternate between content in a single view. Even though they serve the same purpose, the look of each differ very much from the other. Below you can see that each screen has options for alternating to different content, where iOS uses primary and secondary bordered buttons, Android places greater distance between each choice, no button and a simple line demonstrating activity.

 

Android segment controls

Android segment controls

 

iOS segment controls

iOS segment controls

 

Alerts

Whether you are asking permission for location, sending notifications, or collecting data, or tasking specific actions that you want the user to follow, it’s important to get alerts right and to keep your user undisturbed from the experience.

Most notably, the difference between iOS and Android alerts are the buttons. Android alert buttons are placed to the right of the container and exist as text only buttons, usually in all caps. iOS button are separated by dividers, with centered case sensitive text.

 

Android alert

Android alert

 

iOS Alert

iOS Alert

 

Action sheets follow a similar pattern, but have an increased variety of options to choose from. They originate from the bottom of the screen, overlaying the current view.

For android, you will usually use a solid colored sheet, often with a drop shadow to indicate a layer above the regular view. Icons next to the action text add a nice feel. iOS will have a slight transparency to color, centered text and divided and no icons accompanying the text.

 

Android action sheet

Android action sheet

 

iOS Action Sheet

iOS Action Sheet

Things to keep in mind

Things change. As new devices and technologies get made, the way we approach styling changes. Style Guides are constantly updated to note the latest changes in layout and styling and there are great ways to benefit from reading through them every so often. Exceptions can always be made in the way that we approach navbars, tabs and alerts etc, and being creative and creating great user experiences is our main responsibility.

Hopefully this guide helped you as a React developer to define a mental picture of the stylistic differences when building iOS and Android devices.

Awesome resources I used in this article that you can download for free

Design resources for iOS apps from Apple: https://developer.apple.com/design/resources/#ios-apps

Material Design Kit for Android:

https://materialdesignkit.com/android-gui/

Material Design Guidelines:

https://developer.android.com/design/index.html

iOS Human Interface Design Guidelines:

https://developer.apple.com/ios/human-interface-guidelines/overview/themes

Expo Vector Icons: https://github.com/expo/vector-icons