react-native-patterns

Creates React Native and Expo apps with navigation, styling, and platform-specific code optimizations.

672|104|Updated Apr 10, 2026
One-click install
npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill react-native-patterns-spencerpauly
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-patterns
Source: https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/react-native-patterns
Command: npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill react-native-patterns-spencerpauly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design and implement React Native and Expo mobile apps with solid structure, cross-platform behavior, and performance-aware patterns instead of ad hoc app code.

Core Features & Use Cases

  • Project Setup: Choose between Expo and bare React Native based on whether you need speed or full native control.
  • Navigation and Layouts: Organize screens with expo-router or React Navigation, including tabs, stacks, and dynamic routes.
  • Platform-Specific Development: Apply iOS and Android-specific styling and component files when app behavior must differ by platform.
  • Performance and Libraries: Use FlatList, memoization, safe area handling, keyboard avoidance, and common mobile libraries for production-quality experiences.
  • Use Case: Build a new mobile app, refactor an existing one, or standardize best practices for navigation, styling, storage, animations, and forms.

Quick Start

Ask for a React Native app setup that uses Expo, navigation, platform-specific code, and performance-friendly patterns tailored to your feature requirements.

Frequently Asked Questions about react-native-patterns

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

FAQPage Schema
How do I structure a React Native app for cross-platform mobile behavior?

Structure a React Native app by applying platform-aware techniques with iOS and Android-specific component files, StyleSheet-based styling, and navigation patterns using expo-router or React Navigation.

What's the best way to set up navigation in an Expo mobile app?

Set up Expo app navigation by organizing screens with expo-router, implementing tab and stack layouts, and configuring dynamic routes to establish a production-ready mobile flow.

When do I need platform-specific code files in React Native?

You need platform-specific code files in React Native when app styling or behavior must differ by platform, applying iOS and Android-specific component implementations for precise cross-platform UI control.

How do I optimize performance in a React Native FlatList?

Optimize React Native FlatList performance by applying production-ready patterns like data memoization, safe area handling, and keyboard avoidance to ensure smooth scrolling and rendering.

Should I use Expo or bare React Native for my mobile app project?

Choose Expo for development speed or bare React Native when you need full native control, selecting your workflow based on whether rapid scaffolding or deep native module integration is required.

Can I refactor an existing React Native app with better styling patterns?

Refactor existing React Native apps by standardizing best practices for StyleSheet-based styling, storage, animations, and forms to replace ad hoc code with production-ready patterns.