Mobile UX patterns

Why it matters

A phone is used with a thumb, often with one hand, on a bus, in sunlight, with notifications popping in. A layout that looks fine in a desktop browser can be frustrating on a phone: buttons too small to hit, text hidden under the notch, a keyboard covering the field you are typing in. Mobile UX is a set of small, concrete rules that make an app comfortable to use, and most of them are easy to check.

Touch targets

A fingertip is much less precise than a mouse pointer. Platform guidelines set minimum sizes for anything tappable:

• Apple Human Interface Guidelines: at least 44 x 44 points.
• Material Design (Android): at least 48 x 48 dp.
• WCAG 2.2 (the web accessibility standard, often applied to apps too): 2.5.8 asks for at least 24 x 24 CSS pixels or enough spacing (level AA); 2.5.5 recommends 44 x 44 (level AAA).

The visible icon can be smaller than the target. In React Native, hitSlop extends the touchable area without changing the layout:

<Pressable
  onPress={onClose}
  hitSlop={12}                 // adds 12 points on every side
  accessibilityRole="button"
  accessibilityLabel="Close"
>
  <CloseIcon size={20} />      {/* 20 + 12 + 12 = 44 points */}
</Pressable>

Keep targets apart too: two small icons side by side invite mis-taps. Give important actions more room.

Thumb zones and layout

On a large phone the bottom-middle of the screen is easy to reach with one thumb and the top corners are hard. That is why primary actions often live in a bottom tab bar or a full-width button at the bottom, while rare or destructive actions (delete, sign out) sit further away. Put the thing users do most where the thumb already is.

Safe areas

Modern phones have notches, camera cut-outs, rounded corners, a status bar and a home indicator. The safe area is the part of the screen that none of these cover. Content outside it can be clipped or hard to tap.

Use react-native-safe-area-context (included with Expo templates):

import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom"]}>
        <Home />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

function Footer() {
  const insets = useSafeAreaInsets();
  return <View style={{ paddingBottom: 16 + insets.bottom }}>{/* buttons */}</View>;
}

React Native also has a built-in SafeAreaView, but it only works on iOS and is deprecated in recent versions, so prefer the library. Navigation libraries already pad their headers and tab bars; you mainly need insets for custom headers, footers and full-screen layouts.

The keyboard

When a text field is focused, the on-screen keyboard covers roughly the bottom half of the screen. Make sure the field and its submit button stay visible:

• wrap forms in KeyboardAvoidingView (with behavior="padding" on iOS) or put them in a ScrollView with keyboardShouldPersistTaps="handled", so a tap on a button is not swallowed by the keyboard dismiss,
• set keyboardType ("email-address", "numeric", "phone-pad"), autoComplete and textContentType so the right keyboard and autofill appear,
• use returnKeyType="next" to move between fields.

Feedback and platform conventions

Every tap should respond immediately: a pressed state (Pressable gives you pressed in its style function), a spinner for slow actions, and a message when something fails. Respect each platform's habits: Android users expect the system back button to work everywhere; iOS users expect to swipe back from the left edge. Support Dynamic Type and font scaling: Text scales with the user's font size setting by default, so test your layouts at a large size instead of turning scaling off.

Worked example: reviewing a screen

A sign-in screen has a 24-point "X" close icon in the top-right corner, email and password fields, and a small "Sign in" text link under the fields. Applying the rules:

1. The close icon is only 24 points: add hitSlop={10} to reach 44.
2. The top-right corner is hard to reach on a big phone, which is fine for a rare action like close.
3. "Sign in" is the main action but is a small link: make it a full-width button near the bottom, padded by the bottom safe-area inset.
4. The email field shows the default keyboard: set keyboardType="email-address" and autoComplete="email".
5. When the keyboard opens, the button disappears: wrap the form in KeyboardAvoidingView.

Common mistakes

• Tiny icon buttons with no hitSlop.
• Content under the notch or home indicator because no safe-area padding was applied.
• Forms the keyboard hides.
• Disabling font scaling (allowFontScaling={false}) instead of fixing the layout.
• No pressed state, so users tap twice.

Quick recap

• Touch targets: 44 pt (Apple) or 48 dp (Android); use hitSlop for small icons.
• Put frequent actions within thumb reach.
• Respect safe areas with react-native-safe-area-context.
• Keep inputs visible above the keyboard and choose the right keyboard type.

Try it

Take the quiz in the Do tab, then open any app on your phone and look for one target that is too small.