Joe Tuan
Joe Tuan
Founder, Topflight Apps
February 6, 2018

React Native remains one of the most popular cross-platform app development tools. Aside from its growing global community and innovative libraries, React Native has given the freedom to JavaScript web developers to easily transition from coding complex web interfaces, to developing custom mobile native apps, using almost the same code. This single fact bears huge benefits to both developers and business owners in terms of app development costs and project timelines.

Among other challenges app developers have to face when building mobile applications is creating great user experiences tailored to platform-specific design and interaction. Fortunately, React Native UI design principles provide enough room for developers to adjust mobile apps to Android and iOS, with their different takes on the app design.

React Native UI Design

In this blog, we’ll cover the fundamental differences in UI/UX when creating a mobile app for iOS and Android devices with React Native, sharing the same codebase. When you’ve finished reading, you will have the confidence to design your UI components in a platform-specific way. So if you’ve ever wondered about how to design UI in React Native, buckle up. We’ll start by quickly reviewing the two mobile design paradigms (Apple’s and Google’s).

Android Devices and Material Design

In 2014, Google developed a design system 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 motif 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 action.

Material Design Guidelines: https://material.io/design

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, applied 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.

new rapid prototyping ebook

The Platform API in React Native

Platform is a module that is shipped with React Native framework UI 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 React Native user interface, organized and easy to understand.

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

Navigation

Internal app navigation has a crucial impact on the overall app’s success. It is what determines how users get around and find important destinations in your app.

Android and iOS have two very distinct approaches to navigation. 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. Keep that in mind starting your app from scratch.

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 where designers use bottom tab bars on Android is becoming more common. (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 button’s 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 while creating a pleasant user experience.

When creating React Native user interface on both Android and iOS, you need to account for the fact that cards have a drop shadow and border-radius. However, shadows 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 create your own icons within React Native mobile UI, it is important to keep the following approaches in mind.

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

The following templates 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 open-source 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

Expo Vector Icons React Native app UI design: 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 when you design a React Native UI. 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. On the other hand, when you make a user interface with React Native for Android, use more contrasting font sizes and less variation in font weight. Roboto works as the Android’s 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

It’s hard to imagine React Native user interfaces without segmented controls. You could use segmented controls to alternate between content in a single view. Even though they serve the same purpose, their looks differ greatly.

Below you can see that each screen has options for alternating to additional 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 tracking location, sending notifications, 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. So when you build UI using React Native, take notice of these differences.

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 buttons 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 enter the market, 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 crafting 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 UI designing in React Native.

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

Related

Bring your app idea to life
30 minute consultation

X
Investing in an app? Read this First.
Joe Tuan

Founder, Topflight Apps
Founder of Topflight Apps. We built apps that raised $165M+ till date. On a mission to fast-forward human progress by decentralizing healthcare and fintech.
Learn how to build winning apps.

Privacy Policy: We hate spam and promise to keep your email address safe

Copy link