skills.rest
DiegoHeer
DiegoHeerCOMMUNITY
Explore all skills by this author →
GitHub

react-native

Apply React Native performance, navigation, and UI patterns to Expo projects.

3|Updated Jun 18, 2025
Search Tags:#architecture#performance#patterns#navigation#animations#react-native#expo
One-click install
npx skills add https://github.com/DiegoHeer/realty-alerts --skill react-native-diegoheer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native
Source: https://github.com/DiegoHeer/realty-alerts/tree/main/.claude/skills/react-native
Command: npx skills add https://github.com/DiegoHeer/realty-alerts --skill react-native-diegoheer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Native apps often suffer from performance bottlenecks, jank in animations, and inconsistent architecture across platforms. This Skill provides a structured set of performance, navigation, and UI patterns to help teams deliver smoother apps and maintainable codebases.

Core Features & Use Cases

  • List performance optimizations (virtualization, memoization, keyExtractor, getItemLayout)
  • Animation improvements with react-native-reanimated and gesture handling
  • Navigation structure and Expo Router basics (layout, deep linking, unmountOnBlur)
  • UI patterns for safe areas, keyboard avoidance, and cross-platform consistency
  • Expo workflow guidance (development builds, EAS updates, config plugins)
  • Code review patterns for maintainable RN apps

Quick Start

Apply the recommended React Native performance, navigation, and UI patterns to your Expo project to improve responsiveness and maintainability.

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 performance to reduce scrolling jank?▼

Optimize React Native list performance by applying virtualization, memoization, proper keyExtractor usage, and getItemLayout to ensure smooth scrolling without rendering bottlenecks. These patterns prevent unnecessary re-renders and maintain stable frame rates.

What is the best way to handle complex animations in React Native?▼

The best way to handle React Native animations is using react-native-reanimated for smooth gesture-driven interactions on the UI thread. This pattern avoids JavaScript bridge bottlenecks and eliminates animation jank during complex user interactions.

How do I structure navigation in an Expo project using Expo Router?▼

Structure Expo navigation by organizing Expo Router layouts, configuring deep linking, and applying unmountOnBlur to manage screen state. This architecture pattern ensures consistent navigation behavior and maintainable routing across the application.

Does this React Native architecture skill work with existing code reviews?▼

Yes, this React Native architecture skill applies to code reviews by enforcing practical requirements like list virtualization, SafeArea handling, and cross-platform code organization. It provides concrete examples to identify performance bottlenecks and architectural inconsistencies.

Can I use these performance patterns for both new Expo projects and existing React Native apps?▼

Yes, these React Native performance patterns apply to both new Expo projects and existing codebases. They cover Expo workflows like development builds, EAS updates, and config plugins alongside fundamental UI patterns for cross-platform consistency.

Related Skills

Explore More Software Engineering Skills→
solana-mobilesolana-mobile
6

mwa-setup

Set up Mobile Wallet Adapter dependencies, crypto polyfills, and provider wiring for Expo apps.

Official
Intermediate
json-choijson-choi

expo-deployment

Deploy Expo applications to iOS, Android, and web via EAS workflows.

Community
Intermediate
TMHSDigitalTMHSDigital
2

mobile-animations

Add smooth animations to React Native and Flutter apps using Reanimated 3, Lottie, and Rive.

Community
Intermediate
MicrockMicrock
322

native-modules

Bridge JavaScript and native code for React Native iOS and Android modules.

Community
Advanced