skills.rest
jmanuelrosa
jmanuelrosaCOMMUNITY
Explore all skills by this author →
GitHub

react-native

Apply React Native and Expo best practices for list virtualization, animations, and native modules.

2|Updated Oct 28, 2022
Search Tags:#performance#animations#guidelines#react-native#native-modules#expo#lists
One-click install
npx skills add https://github.com/jmanuelrosa/dotfiles --skill react-native-jmanuelrosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native
Source: https://github.com/jmanuelrosa/dotfiles/tree/main/roles/ai/files/claude/skills/react-native
Command: npx skills add https://github.com/jmanuelrosa/dotfiles --skill react-native-jmanuelrosa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Native development often suffers from performance regressions and inconsistent patterns. This Skill provides architecture and coding guidelines to improve rendering, list virtualization, animations, image handling, and native integrations.

Core Features & Use Cases

  • Clear best practices for React Native and Expo apps, including list virtualization, animations with Reanimated, image optimization, and native module integration.
  • Use cases across building components, optimizing lists, implementing responsive UI, and coordinating monorepo native dependencies.
  • Guardrails and examples to prevent common pitfalls and improve maintainability.

Quick Start

Follow these guidelines to bootstrap high-performance React Native components and optimize lists, animations, and native integrations.

Frequently Asked Questions about react-native

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

FAQPage Schema
How do I optimize React Native list rendering performance?▼

Optimize React Native list rendering by applying list virtualization guidelines to ensure only visible items are rendered, reducing memory overhead and improving scroll performance across large datasets.

What's the best way to handle React Native animations without dropping frames?▼

Handle React Native animations without dropping frames by using Reanimated guidelines to run animations on the UI thread, ensuring smooth transitions and preventing JavaScript thread bottlenecks.

Can I use Expo with native modules in a React Native monorepo?▼

You can use Expo with native modules in a React Native monorepo by following specific monorepo coordination guidelines to align native dependencies and prevent version conflicts across packages.

Why does my React Native app have inconsistent UI patterns and rendering issues?▼

React Native apps have inconsistent UI patterns and rendering issues due to a lack of enforced guidelines across Core Rendering, React State, and Design System patterns, which this skill standardizes.

How do I configure the React Compiler for React Native state management?▼

Configure the React Compiler for React Native state management by applying enforced rules that optimize re-renders and state updates, ensuring efficient UI rendering and preventing performance regressions.

Related Skills

Explore More Software Engineering Skills→
beemanbeeman
12

vercel-react-native-skills

Codify React Native and Expo performance best practices for mobile apps.

Community
Advanced
soham2008xyzsoham2008xyz

vercel-react-native-skills

Enforces React Native rendering, list virtualization, animation patterns to prevent crashes and improve performance.

Community
Intermediate
cgRGMcgRGM
1

vercel-react-native-skills

Review React Native and Expo code for performance, UI, and architecture gaps.

Community
Advanced
datorresbdatorresb

vercel-react-native-skills

Codify React Native and Expo best practices for performance and maintainability.

Community
Advanced