← Back to skills

Framework

Building Native UI

Guide for building mobile apps with Expo Router covering styling, components, navigation, animations, and native tab bars.

Last reviewed Mar 2, 2026

Install

Create this file in your project:

.claude/skills/building-native-ui/SKILL.md
--- name: building-native-ui description: Use this skill when building mobile apps with React Native and Expo, implementing navigation, or creating native-feeling UI components. --- # Building Native UI ## When to Use - Building or modifying screens in an Expo Router app - Implementing navigation patterns (tabs, stacks, modals) - Creating animations or gesture-driven interactions - Styling components for iOS and Android ## Process 1. **Understand the target** -- Identify the screen, component, or interaction to build. Check the existing project structure and component library. 2. **Choose the right pattern**: - Navigation: Use Expo Router file-based routing. Tabs use `(tabs)/_layout.tsx`, stacks use `_layout.tsx`. - Lists: Use `FlashList` for large lists, `FlatList` for standard lists. Never use `ScrollView` with `map()` for lists. - Forms: Use controlled inputs with proper keyboard handling (`KeyboardAvoidingView`, `keyboardDismissMode`). - Animations: Use `react-native-reanimated` for performant animations. Keep animation values on the UI thread. 3. **Style correctly** -- Use `StyleSheet.create` for static styles. Use platform-specific adjustments via `Platform.select()` or `.ios.tsx`/`.android.tsx` file extensions. 4. **Test on both platforms** -- Verify layout and behavior on both iOS and Android. Check safe areas, notch handling, and platform-specific quirks. ## Rules - Use Expo SDK-compatible packages only. Check compatibility before adding dependencies. - Always handle safe areas with `SafeAreaView` or `useSafeAreaInsets`. - Keep animation and gesture math finite. Avoid division by zero in interpolations. - Only use style props supported by React Native. CSS properties like `gap` (supported) and `grid` (not supported) differ from web. - Test on both iOS and Android before considering a screen complete. - Use `expo-haptics` for tactile feedback on interactive elements. - Handle loading and error states for every async operation. - Use `expo-image` instead of React Native's `Image` for better caching and performance.

What this skill does

Building Native UI guides AI assistants toward creating mobile experiences that feel native on both iOS and Android. Rather than treating React Native as "web in a mobile wrapper," this skill enforces patterns that leverage the platform's native capabilities: proper navigation hierarchies, performant list rendering, gesture-driven animations, and platform-specific adjustments.

The emphasis on Expo Router reflects the modern standard for React Native navigation. File-based routing with typed routes reduces boilerplate and eliminates an entire class of navigation bugs. The skill covers the layout patterns (tabs, stacks, modals) that map directly to native navigation paradigms.

Performance is a recurring theme. Using FlashList over ScrollView with map(), running animations on the UI thread with Reanimated, and using expo-image for cached image loading are all patterns that make the difference between a smooth 60fps experience and a janky one.

Example workflow

You ask the agent to add a profile screen with an edit mode. The agent will:

  1. Create app/(tabs)/profile.tsx as a new tab screen.
  2. Configure the tab in (tabs)/_layout.tsx with an appropriate icon from @expo/vector-icons.
  3. Build the profile view with SafeAreaView, proper scroll handling, and expo-image for the avatar.
  4. Add edit mode with animated transitions using Reanimated's withTiming.
  5. Handle keyboard avoidance for the edit form inputs.
  6. Test layout on both iOS and Android simulators, adjusting for safe area differences.

Tips

  • Start with iOS, then adjust for Android -- iOS is usually stricter about safe areas and gestures
  • Use expo-constants to detect the device type and adjust layouts for tablets vs. phones
  • For complex animations, prototype in Reanimated's worklet-based API first, then polish
  • Always test with the keyboard open -- it's the most common source of layout bugs on mobile

Best with tools

    Related MCP servers

    • No linked MCP servers yet.

    Related skills

    Vercel & React Best Practices

    React and Next.js performance optimization covering component composition, data fetching, bundle size, and React 19 features.

    Web Design Guidelines

    Review UI code for web interface best practices: accessibility, responsive design, semantic HTML, color contrast, and keyboard navigation.