react-native-expert

Builds and optimizes cross-platform mobile apps with React Native and Expo.

1|Updated Aug 18, 2026
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill react-native-expert-scsm-unrestrict
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-expert
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/react-native-expert
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill react-native-expert-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Cross-platform mobile development with React Native involves recurring pitfalls: slow list rendering, inconsistent iOS/Android behavior, keyboard and notch handling, and fragile navigation setup. This Skill provides a senior-engineer workflow with verified patterns, constraints, and error recovery steps for building production mobile apps. ## Core Features & Use Cases - Navigation Architecture: Implements Expo Router or React Navigation hierarchies including tabs, stacks, drawers, protected routes, and deep linking. - Performance Optimization: Applies FlatList/SectionList best practices with memo, useCallback, getItemLayout, and FlashList alternatives for large datasets. - Platform Handling: Manages SafeArea insets, KeyboardAvoidingView, StatusBar, Android back button, and platform-specific file splits (.ios.tsx / .android.tsx). - Use Case: When building an Expo app with a tabbed home screen, a login flow, and an infinite-scrolling product list, this Skill delivers typed route params, memoized list items, and correct keyboard behavior on both platforms. ## Quick Start Use the react-native-expert skill to scaffold an Expo Router app with tab navigation and an optimized FlatList product screen.

Frequently Asked Questions about react-native-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize FlatList performance in React Native?

Wrap list items in React.memo, memoize renderItem and keyExtractor with useCallback, and set removeClippedSubviews, maxToRenderPerBatch, and windowSize props. For fixed-height rows, provide getItemLayout to skip measurement; for very large lists, use Shopify's FlashList.

How to set up navigation in an Expo app?

Use Expo Router for file-based routing: define app/_layout.tsx as the root Stack, group screens in directories like (tabs) and (auth), and navigate with router.push or Link components. Enable typed routes in app.json experiments for type-safe params.

Should I use AsyncStorage or MMKV in React Native?

MMKV is faster and synchronous, making it better for large data and frequent access, while AsyncStorage is asynchronous and suits small, simple data. For sensitive values like tokens, use Expo SecureStore instead.

How do I handle the keyboard covering inputs on iOS and Android?

Wrap forms in KeyboardAvoidingView with behavior set to 'padding' on iOS and 'height' on Android, and adjust keyboardVerticalOffset per platform. Combine with a ScrollView using keyboardShouldPersistTaps='handled'.

Why does my Expo build fail and how do I fix it?

Metro bundler errors are usually fixed by clearing the cache with npx expo start --clear. iOS failures require checking Xcode logs for provisioning issues, while Android failures need adb logcat or Gradle output to resolve SDK/NDK mismatches.