← All posts

Mobile

Building React Native UI that feels native

February 8, 202610 min read
React NativeMobileUI
Building React Native UI that feels native

React Native lets you ship to two platforms from one codebase, but 'it runs' and 'it feels native' are very different bars. Users can't articulate why an app feels off — they just delete it. Closing that gap is almost entirely about small things, applied consistently.

I've built React Native apps and concepts across sports organising and service-marketplace flows, and the lesson repeats: the JavaScript is the easy part. The hard part is the last 10% of feel — the part that decides whether your app reads as a real product or a wrapped website.

Respect the platform, don't average it

iOS and Android disagree about navigation, typography, back gestures, and where affirmative buttons live. The tempting move is to design one neutral UI and ship it to both; the result feels slightly wrong everywhere. I lean into each platform's conventions instead — native-feeling headers, platform-correct back behaviour, the right ripple or highlight on touch.

React Native makes this cheaper than it sounds: Platform.select, platform-specific file extensions, and navigation libraries that already know the conventions. The point isn't two designs — it's one design with platform-aware joints. Users notice when an app fights their muscle memory, even if they can't say what's wrong.

Motion sells it

Native apps feel alive because things move with physics, not linear fades. Spring-based transitions, touch feedback that responds instantly, and gestures that track your finger are what make a React Native screen read as a real app. A drag that follows the thumb at 60fps communicates quality faster than any visual design decision.

The tooling matters here: animations belong on the UI thread, not the JS thread. Reanimated and the gesture handler exist precisely so a busy JavaScript queue can't make your bottom sheet stutter. If an animation can be interrupted by the user mid-flight and respond gracefully, it feels native; if it plays out on rails regardless, it feels like a video of an app.

Lists are where mobile apps live or die

Almost every mobile screen is secretly a list, and list performance is the most common place React Native apps fall down. The essentials: stable keys, memoised row components, getItemLayout when rows are uniform, and images sized for the cell rather than decoded at full resolution and scaled.

Beyond raw speed, lists carry the feel too: pull-to-refresh that behaves like the platform's, scroll deceleration left at native defaults, skeleton rows while content loads so the layout never jumps. A list that hesitates on scroll marks the whole app as cheap, no matter what the rest looks like.

Touch targets, safe areas, and the physical world

Mobile UI happens on a hand-held piece of glass, and the physical realities are non-negotiable: touch targets at 44 points minimum, primary actions within thumb reach, safe-area insets respected around notches and home indicators, and keyboards that never cover the input the user is typing into.

This is also where testing on real devices earns its keep. The simulator lies about performance, gestures, and glare. Ten minutes with a mid-range Android phone reveals more truth about your app than a day with an M-series simulator — especially for the marketplace-style apps where your actual users aren't on flagship hardware.

The feel is the product

None of these details appear in a feature list. Nobody's app store screenshot says 'correct back gesture behaviour'. But feel is cumulative, and it's the thing users are actually evaluating in the first thirty seconds — the window where they decide whether this app is trustworthy.

React Native's promise was never 'write once, run anywhere'; it's 'learn once, write anywhere'. The apps that honour the second version — one team, platform-aware details, motion done on the UI thread, lists that never stutter — are indistinguishable from native. That's the bar, and it's reachable.

Thanks for reading

Keep exploring or start a conversation.