building-native-ui
Building Native UI with React Native and Expo
Overview
React Native UI differs fundamentally from web UI. There is no CSS, no DOM, no browser layout engine. Everything renders to native platform views through a bridge. Understanding this architecture prevents the most common mistakes.
Core principle: Think in native components and Flexbox, not in HTML/CSS. Every visual element maps to a platform-native view.
When to Use
- Building screens, components, or layouts in React Native
- Implementing navigation between screens
- Adding animations or gesture interactions
- Using native platform controls (switches, sliders, segmented controls)
- Styling components (StyleSheet, not CSS)
- Creating modals, form sheets, or bottom sheets
Navigation with Expo Router
More from bidah/react-native-hifi
use-dom
Use when embedding web-only libraries or DOM content in React Native apps, including charts with recharts, syntax highlighting, rich text editors, or any component that requires a browser DOM
1software-mansion-best-practices
Software Mansion's best practices for production React Native apps on the New Architecture. Use when writing, reviewing, or debugging React Native code across animations, gestures, SVG, haptics, on-device AI, multimedia, rich text, multithreading, or audio. Trigger on any React Native implementation question or when a more specific sub-skill below matches the task.
1writing-plans
Use when you have a spec or requirements for a multi-step task, before touching code
1agent-device
Automates interactions for iOS simulators/devices and Android emulators/devices. Use when navigating apps, taking snapshots/screenshots, tapping, typing, scrolling, or extracting UI info on mobile targets.
1expo-ui-swift-ui
Use when building iOS-specific UI components using SwiftUI views in Expo, embedding React Native views in SwiftUI with RNHostView, or implementing native iOS interfaces beyond cross-platform components
1brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
1