react-native-expert

Build React Native and Expo apps with navigation and FlatList optimization.

1|Updated Jan 19, 2026
One-click install
npx skills add https://github.com/camelranchentertainment/Booking-Platform --skill react-native-expert-camelranchentertainment
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-expert
Source: https://github.com/camelranchentertainment/Booking-Platform/tree/main/.claude/skills/react-native-expert
Command: npx skills add https://github.com/camelranchentertainment/Booking-Platform --skill react-native-expert-camelranchentertainment

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

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.

Core Features & Use Cases

  • Navigation architectures: set up tabs, stacks, and drawers with Expo Router or React Navigation for scalable app navigation.
  • Performance optimization: memoized list items, useCallback, and FlatList tuning for smooth scrolling on iOS and Android.
  • Platform handling: implement SafeArea, KeyboardAvoidingView, and platform-specific code paths to support iOS and Android devices.
  • Use Case: when starting a new React Native app with Expo, this skill provides a production-ready structure and best practices.

Quick Start

Initialize a new React Native project with Expo and implement a cross-platform navigation and performance optimization workflow.

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 scrolling performance in React Native?

Optimize FlatList scrolling in React Native by implementing memoized list items and wrapping item renderers with useCallback to prevent unnecessary re-renders. This tuning ensures smooth scrolling performance across both iOS and Android devices.

What's the best way to set up navigation hierarchies with Expo Router?

Set up navigation hierarchies with Expo Router by configuring scalable tab, stack, and drawer architectures. This approach provides a production-ready structure for handling complex navigation flows within your cross-platform mobile application.

How do I handle platform-specific code for iOS and Android in Expo?

Handle platform-specific code in Expo by implementing SafeArea and KeyboardAvoidingView components to manage device safe areas and keyboard input. This ensures your cross-platform mobile app renders correctly on both iOS and Android.

Does this React Native workflow include end-to-end testing and error recovery?

The React Native workflow enforces end-to-end requirements including robust testing and error recovery. It ensures platform handling and native module integration are validated across iOS and Android environments.

Why does my React Native app lag when rendering large lists on mobile?

Large lists lag in React Native when item components are not memoized. Applying memo and useCallback patterns to FlatList rendering prevents excessive re-renders and significantly improves mobile scroll performance.

Can I use React Navigation instead of Expo Router for my cross-platform app?

Yes, you can use React Navigation as an alternative to Expo Router for your cross-platform app. Both frameworks support setting up scalable tab, stack, and drawer navigation architectures for iOS and Android.