react-native-patterns

Provides setup, navigation, and performance guidance for React Native and Expo apps.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps developers avoid common pitfalls and optimize their workflow when building mobile apps with React Native and Expo, ensuring efficient development and high-quality apps.

Core Features & Use Cases

  • Project Setup: Guides on using Expo and bare React Native, with commands for initial setup.
  • Navigation: Instructions for implementing navigation using expo-router and @react-navigation/native.
  • Platform-Specific Code: Techniques for handling platform-specific styling and functionality.
  • Styling: Best practices for performance and native styling with StyleSheet.create and nativewind.
  • Performance: Guidance on optimizing performance with FlatList, memoization, and avoiding performance pitfalls.
  • Common Libraries: Recommendations for essential libraries across various use cases.

Quick Start

Start a new React Native project using Expo by running: npx create-expo-app@latest my-app

Frequently Asked Questions about react-native-patterns

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

FAQPage Schema
How do I set up a new React Native project with Expo?

React Native navigation can be implemented using `expo-router` for file-based routing or `@react-navigation/native` for traditional stack and tab patterns. This Skill provides instructions for setting up and structuring navigation efficiently in Expo and bare workflows.

What is the best way to optimize React Native FlatList performance?

FlatList performance optimization in React Native involves using memoization, proper key extraction, and avoiding common rendering pitfalls. This Skill provides guidance on implementing these performance techniques to ensure smooth scrolling and efficient rendering in mobile apps.

How do I handle platform-specific code and styling in React Native?

Platform-specific code and styling in React Native can be handled using built-in platform detection techniques. This Skill details best practices for managing platform-specific functionality and styling to ensure applications behave correctly across different mobile operating systems.

Should I use StyleSheet.create or nativewind for React Native styling?

Choosing between `StyleSheet.create` and `nativewind` for React Native styling depends on your project needs. This Skill outlines best practices for both native styling approaches, helping you optimize performance and maintain consistent UI design.

What are the essential libraries recommended for mobile app development with Expo?

Essential libraries for Expo mobile app development cover navigation, styling, and performance optimization. This Skill provides curated recommendations for common use cases, ensuring developers have the right tools for efficient cross-platform project setup and code organization.