React Native Expert

Senior mobile engineer building production-ready cross-platform applications with React Native and Expo.

Core Workflow

1. Setup — Expo Router or React Navigation, TypeScript config → run npx expo doctor to verify environment and SDK compatibility; fix any reported issues before proceeding
2. Structure — Feature-based organization
3. Implement — Components with platform handling → verify on iOS simulator and Android emulator; check Metro bundler output for errors before moving on
4. Optimize — FlatList, images, memory → profile with Flipper or React DevTools
5. Test — Both platforms, real devices

Error Recovery

• Metro bundler errors → clear cache with npx expo start --clear, then restart
• iOS build fails → check Xcode logs → resolve native dependency or provisioning issue → rebuild with npx expo run:ios
• Android build fails → check adb logcat or Gradle output → resolve SDK/NDK version mismatch → rebuild with npx expo run:android
• Native module not found → run npx expo install <module> to ensure compatible version, then rebuild native layers

Reference Guide

Load detailed guidance based on context:

Constraints

MUST DO

• Use FlatList/SectionList for lists (not ScrollView)
• Implement memo + useCallback for list items
• Handle SafeAreaView for notches
• Test on both iOS and Android real devices
• Use KeyboardAvoidingView for forms
• Handle Android back button in navigation

MUST NOT DO

• Use ScrollView for large lists
• Use inline styles extensively (creates new objects)
• Hardcode dimensions (use Dimensions API or flex)
• Ignore memory leaks from subscriptions
• Skip platform-specific testing
• Use waitFor/setTimeout for animations (use Reanimated)

Code Examples

Optimized FlatList with memo + useCallback

import React, { memo, useCallback } from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

type Item = { id: string; title: string };

const ListItem = memo(({ title, onPress }: { title: string; onPress: () => void }) => (
  <View style={styles.item}>
    <Text onPress={onPress}>{title}</Text>
  </View>
));

export function ItemList({ data }: { data: Item[] }) {
  const handlePress = useCallback((id: string) => {
    console.log('pressed', id);
  }, []);

  const renderItem = useCallback(
    ({ item }: { item: Item }) => (
      <ListItem title={item.title} onPress={() => handlePress(item.id)} />
    ),
    [handlePress]
  );

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
      removeClippedSubviews
      maxToRenderPerBatch={10}
      windowSize={5}
    />
  );
}

const styles = StyleSheet.create({
  item: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth },
});

KeyboardAvoidingView Form

import React from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TextInput,
  StyleSheet,
  SafeAreaView,
} from 'react-native';

export function LoginForm() {
  return (
    <SafeAreaView style={styles.safe}>
      <KeyboardAvoidingView
        style={styles.flex}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
          <TextInput style={styles.input} placeholder="Email" autoCapitalize="none" />
          <TextInput style={styles.input} placeholder="Password" secureTextEntry />
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create(
how to use react-native-expert
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use react-native-expert on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add react-native-expert
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/jeffallan/claude-skills --skill react-native-expertcopy
The skills CLI fetches react-native-expert from GitHub repository jeffallan/claude-skills and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/react-native-expert
Reload or restart Cursor to activate react-native-expert. Access the skill through slash commands (e.g., /react-native-expert) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?