Some tips for designing apps in React Native

Devin Jameson

When it comes to design, web and mobile are surprisingly different beasts. Here are some tips for designing great mobile apps in React Native.

Become one with the thumb

In desktop-land, the cursor rules. In mobile-topia, the thumb reigns supreme.

All jokes aside, we use mobile apps with our fingers – mostly our thumbs. Therefore, our apps should be designed for our thumbs.

The most impactful thing you can do in this regard is to make your touch targets bigger. Apple’s Human Interface Guidelines state, “Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.”

You don’t need each element to be at least 44pt x 44pt in size. You just need the tappable area of each control to be at least this size.

A hand tapping a button on a mobile device. On the mobile device is an interface for adopting a cat. The touch targets on the interace have blue rectangles around them which represent their tappable area.

To accomplish this, you can add some padding to your touchable component or some margin to its child:

<TouchableOpacity style={styles.buttonContainer}>
  <View style={styles.button}>
    <Text>Button</Text>
  </View>
</TouchableOpacity>

and

styles = StyleSheet.create({
  buttonContainer: {
     padding: 20,
  },
})

or

styles = StyleSheet.create({
  button: {
    margin: 20,
  },
})

Consider implementation in the design phase

Designs that are trivial to implement on the web can be surprisingly challenging to develop in React Native. When mocking out your app, consider how it might actually be implemented. Ask yourself questions like:

  • Will we need to import an open-source library to achieve this design? If so, is this library reliable?
  • Will implementing this design take a lot of development time? If so, is this a good use of that time?
  • Does this design require extensive customization of a standard library, such as React Navigation? If so, is there a way to avoid this design?

An app with a complex design. There is a floating card layout that the user can navigate by swiping left or right. There is also a background with overlapping circles as well as a highly customized bottom tab bar.

If you’re unsure whether a design will require complicated implementation, consider asking a developer during the design phase. This check might save you from having to redesign various parts of the app if they turn out to be too challenging to develop.

Make it feel native (even though it’s not)

Even though your React “Native” app is not actually native, it should still look and feel that way. In other words, your app should behave like the other apps on any given device. People shouldn’t have to learn any new patterns, gestures, or conventions to use it.

An app interface on which a user can adjust their settings. The switches that the user can tap to turn a setting on or off are the native iOS switches.

Here are some tips to give your app that native feel:

  • Use the native typeface: San Francisco on iOS and Roboto on Android. React Native Typography makes this reasonably effortless.
  • Strive to use native colors, where appropriate. React Native Typography is also an excellent tool for this.
  • Compare your app to native apps. Does your app seem out place, or does it fit within the ecosystem?
  • Use standard navigation patterns. For example, on iOS: the back button should be in the top left, the action button should be in the top right, the title should be in the middle or on the left, and so on. React Navigation makes this easy.

Consistently run the app on a physical device during development

Interacting with your React Native app on a simulator (or emulator) can be misleading for a few reasons:

  • Colors and contrast display differently on desktop monitors versus mobile devices
  • You use with the simulator with your mouse or trackpad, not your fingers
  • The simulator can often be slow and unresponsive in comparison to a physical device

Using your app on a physical device makes it much easier to get an accurate sense for spacing, layout, color, and general usability.

Here’s a short checklist of things to look for when testing on a device:

  • Tap on various controls. Are their any tap targets that are too small or hard to hit?
  • Tap on all of your text inputs. Does the keyboard overlap with any of them?
  • Turn your brightness all the way down. Is there still enough contrast? Is anything hard to read? Compare your app to the native apps on your device.
  • Open some native apps on your device. Does your app seem out of place, or does it fit within the native ecosystem?

Simulate your app on different devices

If your app makes it onto the App Store or Google Play Store, it will no doubt be run on devices with varying screen sizes, aspect ratios, and shapes. To ensure your app functions correctly on all these devices, test it on each of them using the Apple Simulator and/or Android Emulator.

Two different sized devices with the same interface. The interface shows the users photos with the heading "My photos."

Don’t reinvent the wheel: use reliable libraries

One of the core benefits of React Native is its massive collection of open-source libraries. Here are some of my favorites:

React Navigation: Easy-to-implement navigation with a native look and feel.

React Native Typography: Make your typography look and feel native on both platforms.

React Native Vector Icons: Easily pull from a collection of thousands of icons.

React Native SVG: Use SVGs as components.

Have an idea for a React Native app? Let’s talk!