skills.rest
cosmicstack-labs
cosmicstack-labsOFFICIAL
Explore all skills by this author →
Website𝕏@cosmicstackGitHub

react-native-patterns

Generate React Native project scaffolds with navigation, state, and performance patterns.

364|53|Updated May 9, 2026
Search Tags:#performance#navigation#cross-platform#react-native#state-management#turbo-modules#mobile-architecture
One-click install
npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill react-native-patterns-cosmicstack-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-patterns
Source: https://github.com/cosmicstack-labs/mercury-agent-skills/tree/main/categories/mobile/react-native-patterns
Command: npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill react-native-patterns-cosmicstack-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you avoid fragile React Native architecture and performance pitfalls by providing battle-tested patterns for navigation, state, native modules, and cross-platform consistency.

Core Features & Use Cases

  • React Navigation structure: Establishes a scalable Stack + Tab layout for screens like Main, Details, and future feature flows.
  • Performance-focused implementation: Uses memoization patterns, efficient list rendering, image caching, and runtime best practices to keep UIs responsive.
  • Native-module integration strategy: Guides safe bridging via Turbo Modules for React Native’s New Architecture.
  • Cross-platform delivery approach: Supports .ios.tsx/.android.tsx overrides and platform-specific branching while maintaining a single codebase.

Quick Start

Ask an AI assistant to generate a React Native project scaffold that applies the Stack + Tabs navigation pattern, adds performance optimizations for lists and images, and defines a Turbo Module placeholder for cross-platform structure.

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 React Navigation to scale across multiple screens in a cross-platform app?▼

A scalable React Navigation structure uses Stack + Tab layouts for main and detail flows, separating navigation, services, hooks, store, and types into distinct directories to keep cross-platform codebases maintainable.

What's the best way to optimize FlatList rendering and performance in React Native?▼

Optimize FlatList rendering in React Native by applying memoization hooks, efficient list rendering patterns, and image caching strategies to keep the mobile UI responsive under heavy data loads.

How do I integrate native modules using Turbo Modules in React Native's New Architecture?▼

Integrate native modules via Turbo Modules in React Native's New Architecture by defining platform-specific bridging interfaces across iOS and Android while maintaining a single JavaScript codebase.

Can I use platform-specific code overrides while maintaining a single React Native codebase?▼

React Native supports platform-specific code overrides using .ios.tsx and .android.tsx file extensions, allowing platform-specific branching while maintaining a single shared codebase for cross-platform delivery.

Why does my React Native app feel sluggish, and what state management patterns should I apply?▼

React Native apps feel sluggish without consistent state patterns. Apply memoization hooks, optimized FlatList rendering, and Hermes runtime considerations to prevent unnecessary re-renders and keep mobile UIs responsive.

Related Skills

Explore More Software Engineering Skills→
thesaifalitaithesaifalitai
8

react-native-expert

Build and configure production-grade bare React Native projects with native modules.

Community
Advanced
ouakarouakar

mobile-engineer

Build cross-platform mobile apps for iOS and Android from BRD requirements.

Community
Advanced
alsmadi99alsmadi99

react-native-expert

Build and optimize cross-platform React Native apps with Expo SDK.

Community
Advanced
nimadorostkarnimadorostkar
25

react-native

Optimize React Native and Expo apps with FlashList and native module patterns.

Community
Advanced