expo-react-native-performance

Name: expo-react-native-performance
Author: pproenca

github.com/pproencaDevelopment2181.5k installsUpdated 11w ago

About expo-react-native-performance

A reference skill for optimizing Expo React Native applications, intended for developers and coding agents working on app code. It organizes 42 rules into eight impact-prioritized areas, from startup and lists to memory and platform behavior.

Key features

0142 performance rules in eight categories
02Prioritized guidance by impact
03Startup and bundle-size optimization
04List, rendering, and animation guidance
05Image, memory, and data-fetching practices

Use cases

01Building React Native screens and components
02Improving FlatList or FlashList performance
03Reviewing animation and image-loading code
04Refactoring apps for startup or memory efficiency

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/pproenca/dot-skills --skill expo-react-native-performance

After installing, type/expo-react-native-performancein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

AGENTS.md

metadata.json

README.md

assets/templates/

_template.md

references/

_sections.md

anim-interaction-manager.md

anim-layout-animation.md

anim-transform-not-dimensions.md

anim-use-native-driver.md

anim-use-reanimated.md

asset-optimize-image-size.md

asset-prefetch-images.md

asset-recycling-key.md

asset-use-expo-image.md

asset-use-webp-format.md

async-batch-api-calls.md

async-cache-responses.md

async-defer-await.md

async-parallel-fetching.md

async-refetch-on-focus.md

list-estimated-item-size.md

list-get-item-layout.md

list-get-item-type.md

list-memoize-items.md

list-stable-render-item.md

list-use-flashlist.md

mem-abort-fetch.md

mem-avoid-inline-objects.md

mem-cleanup-subscriptions.md

mem-clear-timers.md

Details

From the project README

Expo React Native Performance Best Practices

Comprehensive performance optimization guide for Expo React Native applications. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

Writing new React Native components or screens
Implementing lists with FlatList or FlashList
Adding animations or transitions
Optimizing images and asset loading
Reviewing code for performance issues

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	App Startup & Bundle Size	CRITICAL	`startup-`
2	List Virtualization	CRITICAL	`list-`
3	Re-render Optimization	HIGH	`rerender-`
4	Animation Performance	HIGH	`anim-`
5	Image & Asset Loading	MEDIUM-HIGH	`asset-`
6	Memory Management	MEDIUM	`mem-`
7	Async & Data Fetching	MEDIUM	`async-`
8	Platform Optimizations	LOW-MEDIUM	`platform-`

Quick Reference

1. App Startup & Bundle Size (CRITICAL)

startup-enable-hermes - Enable Hermes JavaScript engine
startup-remove-console-logs - Remove console logs in production
startup-splash-screen-control - Control splash screen visibility
startup-preload-assets - Preload critical assets during splash
startup-async-routes - Use async routes for code splitting
startup-cherry-pick-imports - Use direct imports instead of barrel files

2. List Virtualization (CRITICAL)

list-use-flashlist - Use FlashList instead of FlatList
list-estimated-item-size - Provide accurate estimatedItemSize
list-get-item-type - Use getItemType for mixed lists
list-stable-render-item - Stabilize renderItem with useCallback
list-get-item-layout - Provide getItemLayout for fixed heights
list-memoize-items - Memoize list item components

3. Re-render Optimization (HIGH)

rerender-use-memo-expensive - Memoize expensive computations
rerender-use-callback-handlers - Stabilize callbacks with useCallback
rerender-functional-setstate - Use functional setState updates
rerender-lazy-state-init - Use lazy state initialization
rerender-split-context - Split context by update frequency
rerender-derive-state - Derive state instead of syncing

4. Animation Performance (HIGH)

anim-use-native-driver - Enable native driver for animations
anim-use-reanimated - Use Reanimated for complex animations
anim-layout-animation - Use LayoutAnimation for simple transitions
anim-transform-not-dimensions - Animate transform instead of dimensions
anim-interaction-manager - Defer heavy work during animations

5. Image & Asset Loading (MEDIUM-HIGH)

asset-use-expo-image - Use expo-image for image loading
asset-prefetch-images - Prefetch images before display
asset-optimize-image-size - Request appropriately sized images
asset-use-webp-format - Use WebP format for images
asset-recycling-key - Use recyclingKey in FlashList images

6. Memory Management (MEDIUM)

mem-cleanup-subscriptions - Clean up subscriptions in useEffect
mem-clear-timers - Clear timers on unmount
mem-abort-fetch - Abort fetch requests on unmount
mem-avoid-inline-objects - Avoid inline objects in props
mem-limit-list-data - Limit list data in memory

7. Async & Data Fetching (MEDIUM)

async-parallel-fetching - Fetch independent data in parallel
async-defer-await - Defer await until value needed
async-batch-api-calls - Batch related API calls
async-cache-responses - Cache API responses locally
async-refetch-on-focus - Refetch data on screen focus

8. Platform Optimizations (LOW-MEDIUM)

platform-android-overdraw - Reduce Android overdraw
platform-ios-text-rendering - Optimize iOS text rendering
platform-android-proguard - Enable ProGuard for Android release
platform-conditional-render - Platform-specific optimizations

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

Full Compiled Document

For the complete guide with all rules expanded, see AGENTS.md.

Reference Files

File	Description
AGENTS.md	Complete compiled guide with all rules
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information

Comments

Markdown supported

Details

Author: pproenca
Repository: pproenca/dot-skills
Category: Development
Installs: 1,476
GitHub stars: 218

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.