How does this skill help with React Native list performance?

It implements industry-leading patterns including Shopify FlashList, item memoization, and stable callback references to eliminate scrolling lag.

Does it provide guidance on navigation?

Yes, it enforces the use of Native Stack and Tab navigators over JS-based alternatives to ensure native-feeling transitions and gestures.

Is this skill compatible with Expo projects?

Yes, it includes specific configurations for Expo, including image optimization with expo-image and safe area management.

What animation libraries does it use?

The skill focuses on React Native Reanimated and Gesture Handler, prioritizing GPU-only properties like transform and opacity for 60fps performance.

React Native Performance & Patterns

Name: React Native Performance & Patterns
Author: s-hiraoku

bys-hiraoku

0•

Mobile Development

Optimizes React Native and Expo applications using performance-first patterns, native navigation, and GPU-accelerated animations.

This skill provides a comprehensive set of best practices and implementation patterns for building high-performance React Native and Expo applications. It prioritizes critical performance areas such as list rendering with FlashList, memoization strategies, and GPU-only animation properties using Reanimated. By guiding developers through native navigation implementation, proper safe area handling, and efficient monorepo configurations, this skill ensures the creation of scalable, responsive, and production-grade mobile user interfaces.

Key Features

01State management and monorepo structure guidelines for scalable mobile apps

02GPU-accelerated animation patterns using Reanimated and Gesture Handler

030 GitHub stars

04Critical list performance optimization using Shopify FlashList and cell memoization

05Standardized UI patterns for safe areas, native modals, and context menus

06Native stack and tab navigator implementation for fluid mobile transitions

Use Cases

01Architecting new Expo or React Native projects with best-in-class performance standards

02Optimizing slow-scrolling lists and complex UI interactions in existing RN apps

03Migrating from JS-based navigation to high-performance native navigators

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add s-hiraoku/synapse-a2a react-native

For use in Claude.ai and ChatGPT

Download Skill