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 custom develop mobile apps with almost the same code. This affords various benefits to both the developer and the employer as far as costs of app development 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.

new rapid prototyping ebook

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>

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


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











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.


We'll provide insight into what tech stack and APIs work best for your app idea.
Tell me more
iOS primary and secondary buttons

iOS primary and secondary buttons



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


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


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


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:


Material Design Guidelines:


iOS Human Interface Design Guidelines:


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

Bring your app idea to life
30 minute consultation

Investing in an app? Read this First.

Looking for help with your app?

From a prototype to a full-blown app, we’ll help you hit the market
in record time with a product that’s set to win.
We can help with:
Schedule a Consultation
From a prototype to a full-blown app, we’ll help you hit the market in record time with a product that’s set to win.
Your app will have a unique visual appeal engaging your customers way beyond average digital experiences.
We’ll pick relevant technology pieces for your app to make it secure and easy to scale up and maintain.
Schedule a Consultation

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.

Learn how to build winning apps.

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

Copy link