Building Native UI

What Is This?

Overview

Building native user interfaces for mobile applications requires a structured approach that balances visual quality, performance, and platform consistency. Expo Router provides a file-based routing system combined with a rich set of UI primitives that allow developers to construct polished, production-ready applications for iOS and Android from a single codebase.

This skill covers the complete workflow for building native UI with Expo Router, from foundational layout and styling concepts through advanced animation techniques and native component integration. Developers learn how to structure screens, apply consistent styling, manage navigation hierarchies, and leverage platform-specific controls to deliver experiences that feel genuinely native on each target platform.

The skill draws from official Expo documentation and practical patterns used in real-world applications. Topics include Reanimated-powered animations with entering, exiting, and layout transitions, scroll-driven effects, gesture handling, and native iOS controls such as Switch, Slider, SegmentedControl, DateTimePicker, and Picker.

Who Should Use This

• React Native developers who want to adopt Expo Router for file-based navigation and need a structured reference for UI construction
• Frontend web developers transitioning to mobile development who are familiar with React but new to native UI constraints and patterns
• Mobile app designers who write code and need guidance on implementing animations, gestures, and platform-specific components correctly
• Full-stack developers building cross-platform applications who need to ship consistent, high-quality interfaces on both iOS and Android
• Junior developers starting their first Expo project who need a comprehensive guide covering fundamentals through advanced topics in one place

Why Use It?

Problems It Solves

• Inconsistent UI across platforms: Without clear guidelines, components often look and behave differently on iOS and Android, breaking user expectations.
• Animation complexity: Implementing smooth, performant animations with React Native Reanimated involves significant boilerplate that this skill helps reduce through documented patterns.
• Navigation structure confusion: File-based routing with Expo Router introduces conventions that are not immediately obvious, and understanding tab layouts, stack navigators, and nested routes requires a reliable reference.
• Native control integration: Knowing when and how to use platform-native controls like DateTimePicker or SegmentedControl requires knowledge of their APIs and behavioral differences across operating systems.

Core Highlights

• File-based routing with Expo Router for predictable screen organization
• Styling fundamentals using StyleSheet and platform-aware patterns
• Reanimated integration for entering, exiting, and layout animations
• Scroll-driven animation support for parallax and sticky header effects
• Gesture handling with React Native Gesture Handler
• Native iOS controls including Switch, Slider, SegmentedControl, DateTimePicker, and Picker
• Tab-based navigation with native tab bar configuration
• Reusable component patterns for scalable UI architecture

How to Use It?

Basic Usage

Start by organizing screens inside the app/ directory. Expo Router maps file paths directly to routes.

app/
  _layout.tsx        Root layout with navigation shell
  index.tsx          Home screen
  profile.tsx        Profile screen
  (tabs)/
    _layout.tsx      Tab navigator configuration
    feed.tsx         Feed tab
    settings.tsx     Settings tab

Apply styles using React Native's StyleSheet API for performance-optimized style objects:

import { StyleSheet, View, Text } from "react-native";

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, backgroundColor: "#fff" },
  heading: { fontSize: 24, fontWeight: "600" },
});

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Welcome</Text>
    </View>
  );
}

Specific Scenarios

Scenario 1: Animated list item entrance. Use Reanimated's FadeInDown preset to animate items as they mount:

import Animated, { FadeInDown } from "react-native-reanimated";

<Animated.View entering={FadeInDown.delay(index * 100)}>
  <ItemCard data={item} />
</Animated.View>

Scenario 2: Native date picker on iOS. Import and render DateTimePicker with controlled state to match platform conventions:

import DateTimePicker from "@react-native-community/datetimepicker";

<DateTimePicker value={date} mode="date" onChange={(_, selected) => setDate(selected ?? date)} />

Real-World Examples

A settings screen uses SegmentedControl for theme selection and Switch components for feature toggles, providing a fully native iOS feel without custom styling overhead. A social feed screen uses scroll-driven animations to collapse a header as the user scrolls, implemented with Reanimated's useAnimatedScrollHandler.

When to Use It?

Use Cases

• Building a new Expo application from scratch with a scalable file-based routing structure
• Migrating an existing React Native project to Expo Router for improved navigation organization
• Adding polished animations to an existing app without rewriting component logic
• Integrating native iOS controls into forms and settings screens
• Implementing gesture-based interactions such as swipe-to-dismiss or drag-to-reorder
• Creating tab-based navigation shells for consumer-facing mobile applications
• Designing scroll-driven UI effects for content-heavy screens

Important Notes

Requirements

• Node.js 18 or later with a configured Expo development environment
• Expo SDK 50 or later for full Expo Router v3 compatibility
• Physical device or simulator with Expo Go or a development build for accurate native control rendering

FAQ

Q: What does the Building Native UI skill cover when using Expo Router?

This Skills guide covers the fundamentals of building native user interfaces with Expo Router, including styling, components, navigation, and animations. Happycapy users can leverage these techniques to create visually appealing apps.

Q: Can I use this skill to learn about animation patterns in React Native apps?

Yes, the Building Native UI skill provides detailed guidance on implementing animation patterns in React Native apps. It is designed to help both new and experienced developers using Happycapy and Skills.

Q: How does the AI agent assist with building native UI components?

The AI agent in Happycapy can guide you step-by-step through the process of creating and styling native UI components using the knowledge from this Skills module.

Q: Is navigation between screens covered in this skill?

Navigation is a core topic in the Building Native UI skill, teaching you how to implement smooth transitions and routing with Expo Router. This is especially useful when working with AI agent-powered workflows in Happycapy.

Q: Where can I find the source code for the Building Native UI skill?

The source code and detailed documentation for this Skills module are available on GitHub. Happycapy users can access it directly to enhance their app development process.