react-native-expert

Implement React Native best practices for adaptive styling and optimized lists.

24|3|Updated Nov 25, 2025
One-click install
npx skills add https://github.com/nguyenthienthanh/aura-frog --skill react-native-expert-nguyenthienthanh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-expert
Source: https://github.com/nguyenthienthanh/aura-frog/tree/main/aura-frog/skills/react-native-expert
Command: npx skills add https://github.com/nguyenthienthanh/aura-frog --skill react-native-expert-nguyenthienthanh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Expert-level patterns for React Native apps with mobile performance, navigation, and platform handling.

Core Features & Use Cases

  • Platform-aware components and styling
  • Performance optimization for lists and navigation
  • Cross-platform patterns and tooling (Expo)

Quick Start

Scaffold a simple React Native screen with optimized FlatList and navigation hooks.

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 performance in React Native apps with large lists?

Use FlatList or FlashList with memoization and proper key props to prevent unnecessary re-renders. Both components virtualize list items, rendering only visible elements to maintain smooth performance across iOS and Android platforms.

What's the best way to handle navigation across different platforms in React Native?

Implement type-safe navigation using platform-specific patterns that adapt routing logic for iOS and Android. React Navigation combined with TypeScript ensures consistent, predictable navigation behavior across platforms.

Can I use adaptive styling to make React Native components work on different screen sizes?

Yes, adaptive styling detects screen dimensions and platform capabilities at runtime, applying responsive layouts and safe area insets. This ensures components render correctly on phones, tablets, and different orientations.

How do I implement platform-aware components in React Native and Expo projects?

Platform-aware components use conditional rendering and platform-specific file extensions (.ios.js, .android.js) to load different implementations. This approach applies native styling and behaviors appropriate to each platform while sharing business logic.

What patterns prevent performance regressions when navigating between React Native screens?

Apply memoization to screen components, use lazy loading for heavy screens, and prevent unnecessary context updates during navigation transitions. These patterns reduce memory overhead and maintain frame rates during route changes.