react-native-best-practices

Enforce React Native and Expo engineering standards for cross-platform mobile apps.

Updated Feb 6, 2026
One-click install
npx skills add https://github.com/ntuan2502/piggy --skill react-native-best-practices-ntuan2502
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/ntuan2502/piggy/tree/main/.agent/skills/react-native-best-practices
Command: npx skills add https://github.com/ntuan2502/piggy --skill react-native-best-practices-ntuan2502

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive set of guidelines and best practices for developing React Native and Expo applications, ensuring high performance, maintainability, and a native-like user experience.

Core Features & Use Cases

  • Architecture Guidance: Recommends Expo Router for file-based routing and efficient navigation.
  • UI/Styling Standards: Promotes NativeWind for Tailwind CSS in React Native and FlashList for optimized long lists.
  • Performance Optimization: Advises on using expo-image for caching, react-native-reanimated for smooth animations, and enabling the Hermes engine.
  • Data Management: Suggests TanStack Query for server state and MMKV for fast local storage.

Quick Start

Apply the react-native-best-practices skill to ensure Hermes is enabled and images use expo-image.

Frequently Asked Questions about react-native-best-practices

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

FAQPage Schema
What's the best way to structure React Native apps with Expo Router?

Expo Router provides file-based routing for React Native apps, enabling efficient navigation and maintainable architecture. This Skill enforces Expo Router standards to ensure robust cross-platform mobile application structures.

How do I optimize React Native list rendering performance?

Optimize React Native list rendering by using FlashList instead of standard lists. This Skill enforces FlashList standards to ensure optimized rendering for long lists and smooth scrolling performance.

Can I use Tailwind CSS for React Native UI styling?

Yes, you can use Tailwind CSS in React Native via NativeWind. This Skill enforces NativeWind styling standards to ensure maintainable and consistent UI components across your mobile application.

How does TanStack Query work for React Native data management?

TanStack Query manages server state in React Native apps by handling data fetching and caching. This Skill enforces TanStack Query standards alongside MMKV for fast local storage to ensure efficient data management.

Why should I enable the Hermes engine in React Native?

Enable the Hermes engine in React Native to improve app performance through optimized JavaScript execution. This Skill enforces Hermes activation alongside expo-image for caching and react-native-reanimated for smooth animations.