react-native-expert
Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.
Security Assessment
About react-native-expert
The react-native-expert skill specializes in building, optimizing, and debugging cross-platform mobile applications using React Native and Expo. It addresses common challenges in mobile development such as navigation management, platform-specific behavior, performance bottlenecks, and native module integration. By providing structured workflows and best practices, this skill ensures that developers can efficiently deliver production-ready applications while minimizing platform inconsistencies and runtime errors.
Key capabilities include setting up and managing navigation hierarchies with tabs, stacks, and drawers, configuring native modules, optimizing FlatList performance using memoization and useCallback, and handling platform-specific requirements for both iOS and Android. The skill also covers SafeArea management, keyboard input handling, memory optimization, and debugging common build or runtime errors using tools like Xcode, adb, Metro bundler, and Flipper. Developers are guided through a systematic workflow from project setup to testing, including environment verification, project structure, component implementation, optimization, and platform testing.
This skill is particularly suited for mobile developers, frontend engineers, and React Native specialists aiming to create high-performance, scalable, and maintainable applications. Use cases include building new React Native or Expo apps, integrating native modules, enhancing list rendering performance, implementing safe UI layouts for notched devices, and configuring Expo SDK projects. Its guidance is beneficial for teams or individuals focused on cross-platform mobile development who require reliable patterns for performance, testing, and error recovery.
FAQ
Which platforms are supported by react-native-expert?
This skill supports cross-platform development for both iOS and Android, ensuring that components and navigation work consistently across devices.
How can I optimize list rendering performance?
Use FlatList or SectionList with memo and useCallback for list items. Avoid ScrollView for large lists and profile performance using React DevTools or Flipper.
Do I need to handle platform-specific code manually?
Yes, the skill provides guidance for handling platform-specific code, including SafeArea, keyboard input, and back button behavior, to ensure proper functionality on both iOS and Android.
What are common error recovery steps?
For Metro bundler errors, clear cache using `npx expo start --clear`. For iOS builds, check Xcode logs; for Android, check adb logcat or Gradle output. Ensure native modules are installed with compatible versions using `npx expo install <module>`.
Are there any constraints to follow?
Yes, developers must use FlatList/SectionList for lists, memoize components, handle SafeArea, and test on real devices. They must avoid ScrollView for large lists, inline styles, hardcoded dimensions, memory leaks, and improper animation handling.
Install react-native-expert
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
jeffallan/claude-skills