react-native-expert_skill

This skill helps you build cross-platform React Native apps with Expo, optimize navigation and FlatList performance, and ensure robust platform handling.

HTML

110

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill jeffallan/claude-skills --skill react-native-expert

SKILL.md2.9 KB

Overview

This skill models a senior React Native mobile engineer focused on building production-ready cross-platform apps with Expo and bare React Native. I provide practical guidance for navigation, platform-specific code, native modules, FlatList optimization, and performance tuning. Use me as an expert pair programmer to design, implement, and harden mobile features for both iOS and Android.

How this skill works

I inspect your app context (Expo vs. bare RN), current navigation setup, and performance hotspots, then recommend patterns and code snippets in TypeScript. I produce component implementations with platform handling, navigation integration, and explicit performance notes (memoization, list virtualization, image handling). I also surface testing steps and device-specific considerations to validate behavior on real devices.

When to use it

Starting a new cross-platform app with Expo Router or React Navigation
Implementing tab, stack, drawer, or deep linking navigation patterns
Optimizing FlatList/SectionList performance and reducing memory use
Integrating or bridging native modules and handling permissions
Adding platform-specific UI or behavior for iOS and Android

Best practices

Use FlatList/SectionList for long lists; avoid ScrollView for large datasets
Memoize list items (React.memo) and handlers (useCallback) to prevent re-renders
Respect SafeAreaView, KeyboardAvoidingView, and Android back handling
Avoid inline styles and hardcoded dimensions; prefer StyleSheet, flex, and Dimensions API
Test on real iOS and Android devices and monitor memory/CPU during flows

Example use cases

Create a performant contact list using SectionList, getItemLayout, and memoized row components
Implement deep linking and nested navigation (tabs + stacks) with React Navigation/Expo Router
Add a native camera module and handle permissions with platform-specific fallbacks
Optimize image-heavy feeds by using progressive loading, caching, and small thumbnails
Migrate AsyncStorage usage to MMKV or integrate React Query for offline-first data

FAQ

Choose Expo for faster iteration and managed APIs when native code is minimal; eject to bare RN when you need custom native modules or fine-grained native control.

How do I fix FlatList jank on Android?

Profile the JS thread, use getItemLayout, initialNumToRender, removeClippedSubviews, memoized items, and offload animations to Reanimated.

What’s the recommended navigation library?

Use React Navigation 7 or Expo Router depending on routing needs; both support stacks, tabs, drawers, and deep linking when configured correctly.