fbpx

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.

React Native UI Design

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.

[caption id="attachment_702" align="alignleft" width="197"]Android Drawer Menu Android Drawer Menu[/caption]     [caption id="attachment_705" align="alignright" width="300"]IOS Tab Bar IOS Tab Bar[/caption]              

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’).

[caption id="attachment_707" align="alignleft" width="186"]Tabs in Android apps will generally be at the top of the screen Android tab menu on top[/caption] [caption id="attachment_708" align="alignright" width="300"]Android tab menu bottom Android tab menu bottom[/caption]                  

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:

  [caption id="attachment_710" align="alignleft" width="300"] Android Floating Button[/caption]   [caption id="attachment_711" align="alignright" width="300"] Android raised button[/caption]   [caption id="attachment_712" align="alignnone" width="300"] Android flat button[/caption]

Placement of Android buttons:

  • Forms - left
  • Dialogs - right
  • Cards - left

iOS buttons have a flat display

  [caption id="attachment_713" align="aligncenter" width="300"]Flat iOS button Flat iOS button[/caption]  

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.

  [caption id="attachment_714" align="aligncenter" width="300"]iOS primary and secondary buttons iOS primary and secondary buttons[/caption]  

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.

  [caption id="attachment_715" align="aligncenter" width="171"]Android card Android card[/caption]   [caption id="attachment_716" align="aligncenter" width="175"]iOS card iOS card[/caption]

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.

  [caption id="attachment_718" align="aligncenter" width="1024"]Android and iOS icons Android and iOS icons[/caption]  

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 a 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.

  [caption id="attachment_720" align="aligncenter" width="289"]Android alert Android alert[/caption]   [caption id="attachment_721" align="aligncenter" width="223"] iOS alert[/caption]

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.

  [caption id="attachment_723" align="aligncenter" width="300"]Android segment controls Android segment controls[/caption]   [caption id="attachment_724" align="aligncenter" width="300"]iOS segment controls iOS segment controls[/caption]

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.

  [caption id="attachment_720" align="aligncenter" width="289"]Android alert Android alert[/caption]   [caption id="attachment_721" align="aligncenter" width="223"]iOS Alert iOS Alert[/caption]  

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.

  [caption id="attachment_728" align="aligncenter" width="300"]Android action sheet Android action sheet[/caption]   [caption id="attachment_768" align="aligncenter" width="273"]iOS Action Sheet iOS Action Sheet[/caption]

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

Have an idea?

Let's Work Together

Our industry-leading expertise with app development across healthcare, fintech, and ecommerce is why so many innovative companies choose us as their technology partner.