react-native-best-practices

Apply React Native and Expo performance patterns to mobile screens.

1|Updated Feb 24, 2026
One-click install
npx skills add https://github.com/MartinNevlaha/stratus-v2 --skill react-native-best-practices-martinnevlaha
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/MartinNevlaha/stratus-v2/tree/main/cmd/stratus/skills/react-native-best-practices
Command: npx skills add https://github.com/MartinNevlaha/stratus-v2 --skill react-native-best-practices-martinnevlaha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers implement and optimize React Native mobile applications by applying established performance and architectural best practices, preventing common pitfalls that lead to jank and slow performance.

Core Features & Use Cases

  • Performance Optimization: Provides guidance on using FlatList efficiently, optimizing animations for native thread execution, and managing state effectively.
  • Architecture Patterns: Demonstrates correct usage of expo-image, stable callbacks with useCallback, and secure data storage with expo-secure-store.
  • Use Case: When building a new screen with a long list of items, use this Skill to ensure the FlatList is configured for optimal rendering and smooth scrolling.

Quick Start

Apply React Native best practices to optimize the performance of the mobile application's list components.

Frequently Asked Questions about react-native-best-practices

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

FAQPage Schema
How do I optimize React Native FlatList rendering for long lists?

To optimize React Native FlatList rendering, configure item extraction keys, window sizing, and initial number parameters to recycle views and prevent jank during smooth scrolling of long lists. This Skill applies these specific patterns to mobile screens.

What's the best way to handle React Native animation performance on the native thread?

Handling React Native animation performance on the native thread requires configuring animations to execute off the JavaScript thread, preventing UI jank. This Skill provides guidance on implementing native-threaded animations to ensure smooth mobile visual transitions.

Why does my Expo Router project experience slow screen transitions?

Slow Expo Router screen transitions often stem from inefficient state management and unstable component callbacks. This Skill addresses common navigation issues by applying stable useCallback patterns and optimized state handling within Expo Router projects.

Can I use expo-image for optimized image loading in React Native?

Yes, you can use expo-image for optimized image loading in React Native. This Skill demonstrates correct architecture patterns for expo-image implementation to ensure efficient caching and rendering of visual assets in mobile applications.

How do I securely store data in a React Native Expo application?

Secure data storage in a React Native Expo application is achieved by using expo-secure-store. This Skill demonstrates correct architecture patterns for safe data handling and persistent storage without exposing sensitive information.

When should I use useCallback for stable callbacks in React Native?

You should use useCallback for stable callbacks in React Native when passing functions to child components to prevent unnecessary re-renders. This Skill applies this architecture pattern to optimize overall mobile screen performance.