refactor-react-native_skill

Overview

This skill refactors React Native + TypeScript mobile code to improve maintainability, readability, and runtime performance across iOS and Android. It applies modern patterns from the React Native New Architecture (Fabric, TurboModules, JSI), Expo SDK 52+, React Navigation v7, and Reanimated to deliver cleaner, faster cross-platform apps. The result is smaller components, safer type boundaries, and measurable runtime improvements for lists, images, and animations.

How this skill works

I inspect code for common anti-patterns: prop drilling, large screen components, inline styles, unoptimized FlatList usage, and legacy native module calls. I extract reusable UI components, create focused hooks, introduce type-safe navigation and TurboModule bindings, and replace heavy patterns with Fabric-friendly updates. I also recommend Expo or bare workflow decisions, migrate list-heavy screens to FlashList or optimized FlatList, and add Reanimated-driven UI-thread animations for consistent 60fps.

When to use it

• When screens exceed 150 lines or components mix business logic and presentation
• When FlatList or image-heavy screens drop frames or show jank
• When prop drilling and duplicated JSX reduce developer velocity
• When you plan to adopt the New Architecture or use custom native modules
• When migrating between Expo SDK versions or upgrading native build tooling

Best practices

• Split screens into small components and single-responsibility hooks (useAuth, useCamera, useLocation)
• Use Codegen/TurboModules and prefer JSI bindings for latency-sensitive native calls
• Optimize lists: keyExtractor, getItemLayout, memoized renderers, or FlashList for 1000+ items
• Keep components under ~150 lines and hooks under ~50 lines; extract helpers for complex logic
• Use Reanimated for UI-thread animations and expo-image or fast-image for caching
• Pilot New Architecture on high-traffic screens and run compatibility checks (npx expo-doctor)

Example use cases

• Refactor a messaging app feed with thousands of items to eliminate jank and reduce memory pressure
• Convert a camera/location native module to a TurboModule with Codegen for synchronous JSI calls
• Extract shared navigation and types into a type-safe React Navigation v7 setup
• Replace inline styles with themed style sheets and platform-specific Button.ios/Button.android implementations
• Migrate an Expo-managed app to a targeted bare workflow for a custom native SDK integration