Native-Feel Expo Screens with Expo Router
Builds Expo Router screens that feel native: real stack headers, native tabs, sheets, SF Symbols, correct insets and haptics.
Before & after
Same prompt, same agent — the only difference is the skill.
React Native has a built-in FlatList component that works well for rendering lists efficiently. You can render items efficiently by only showing what's visible on screen, which improves performance. For a native feel, you'll want to handle gestures and touch feedback properly throughout your app. Material Design and iOS design have different conventions and standards, so you might need platform-specific styling and logic. Styling in React Native uses a CSS-like syntax that feels familiar. You could use libraries like React Native Paper for pre-built components, but a custom implementation is also doable. Do you want help setting up a basic FlatList? I could walk you through the configuration.
import { FlatList, ListRenderItem, Platform } from 'react-native';
import { Text, View } from 'react-native';
import { GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
const NativeListView = () => {
const renderItem: ListRenderItem<Item> = ({ item }) => (
<Swipeable
renderRightActions={() => (
<View style={styles.swipeAction}>
<Text>Delete</Text>
</View>
)}
>
<View style={styles.listItem}>
<Text style={styles.itemTitle}>{item.title}</Text>
<Text style={styles.itemSubtitle}>{item.subtitle}</Text>
</View>
</Swipeable>
);
return (
<FlatList
data={items}
renderItem={renderItem}
keyExtractor={item => item.id}
scrollEventThrottle={16}
removeClippedSubviews={true}
maxToRenderPerBatch={10}
updateCellsBatchingPeriod={50}
/>
);
};
const styles = {
listItem: {
paddingHorizontal: 16,
paddingVertical: Platform.OS === 'ios' ? 12 : 14,
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5'
},
itemTitle: {
fontSize: 16,
fontWeight: '600',
marginBottom: 4
}
};
OPTIMIZATION KEYS: Gesture-based swipe requires react-native-gesture-handler. removeClippedSubviews prevents off-screen renders. Platform-specific padding handles Android/iOS density differences. maxToRenderPerBatch caps rendering cost. Avoid inline functions in renderItem.About this skill
Your Expo app works, but it feels off. The header is a hand-built View that never collapses. Content slides under the tab bar. Bottom sheets come from a JS library that fights the gestures. On an iPhone, the whole thing reads like a website. This skill writes Expo Router screens that use the platform's own components, so iOS and Android each behave the way their users expect.
What it does
- Replaces fake JS headers with native stack headers: large titles that collapse, blur, and built-in search bars, all configured through Stack.Screen options
- Fixes inset bugs at the root by using automatic content insets on scroll views instead of stacking SafeAreaView wrappers
- Sets up native tabs (including iOS 26 Liquid Glass where available) and form sheets with detents, using a per-tab Stack layout
- Uses SF Symbols on iOS with Material fallbacks, semantic platform colors that follow dark mode, continuous corners, and CSS boxShadow
- Adds haptics only where the platform would (selection changes, toggles, confirmations), not on every tap
- Flags SDK, Expo Go, and dev-build requirements before you hit them
What you get
Working Expo Router route and layout files with the native options already set, a short list of the decisions made and why, and any version-dependent APIs marked for you to verify.
Best for
React Native developers on Expo SDK 52+ with Expo Router, building or polishing consumer iOS and Android apps where native feel matters.
SKILL.md preview
---
name: native-feel-expo-screens
description: Builds Expo Router screens that feel native on iOS and Android by leaning on platform primitives instead of JS imitations. Covers native stack headers with large titles and search, native tabs, form sheets, SF Symbols, semantic colors, automatic content insets, and restrained haptics. Use when the user says "build this screen in Expo", "make my Expo app feel more native", "my header looks fake and doesn't collapse", "content is hidden under the tab bar", "add a bottom sheet in Expo Router", "how do I get liquid glass tabs", "my app looks like a website on iPhone".
---
# Native-Feel Expo Screens with Expo Router
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.