# React Native Expert

> Builds, optimizes, and debugs cross-platform mobile applications with React Native (bare workflow). Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList/FlashList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a bare React Native app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input.

- Skill: `tomevault-io/react-native-expert-8` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/react-native-expert-8`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-native-expert-8/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/react-native-expert-8

---


# React Native Expert

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

## Core Workflow

1. **Setup** — React Navigation (native stack + bottom tabs), TypeScript config → _run `npx react-native doctor` to verify environment; 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 `npm start` (already includes `--reset-cache`), then restart
- **iOS build fails** → check Xcode logs → resolve native dependency or provisioning issue → run `npx pod-install ios` then `npm run ios`
- **Android build fails** → check `adb logcat` or Gradle output → resolve SDK/NDK version mismatch → `npm run android:rebuild`
- **Native module not found** → `npm install <module>`, then `npx pod-install ios` for iOS native rebuild

## Reference Guide

Load detailed guidance based on context:

| Topic | Reference | Load When |
|-------|-----------|-----------|
| Navigation | `references/react-navigation.md` | React Navigation, tabs, stacks, deep linking |
| Platform | `references/platform-handling.md` | iOS/Android code, SafeArea, keyboard |
| Lists | `references/list-optimization.md` | FlatList, performance, memo |
| Storage | `references/storage-hooks.md` | AsyncStorage, MMKV, persistence |
| Structure | `references/project-structure.md` | Project setup, architecture |

## 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

```tsx
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

```tsx
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({
  safe: { flex: 1 },
  flex: { flex: 1 },
  content: { padding: 16, gap: 12 },
  input: { borderWidth: 1, borderRadius: 8, padding: 12, fontSize: 16 },
});
```

### Platform-Specific Component

```tsx
import { Platform, StyleSheet, View, Text } from 'react-native';

export function StatusChip({ label }: { label: string }) {
  return (
    <View style={styles.chip}>
      <Text style={styles.label}>{label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  chip: {
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 999,
    backgroundColor: '#0a7ea4',
    // Platform-specific shadow
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 3 },
    }),
  },
  label: { color: '#fff', fontSize: 13, fontWeight: '600' },
});
```

## Output Format

When implementing React Native features, deliver:
1. **Component code** — TypeScript, with prop types defined
2. **Platform handling** — `Platform.select` or `.ios.tsx` / `.android.tsx` splits as needed
3. **Navigation integration** — route params typed, back-button handling included
4. **Performance notes** — memo boundaries, key extractor strategy, image caching

## Knowledge Reference

React Native 0.82+ (bare workflow), React Navigation 7, Reanimated 4, Gesture Handler, MMKV, TanStack React Query 5, Zustand 5, FlashList, react-native-bootsplash

---
> Source: [maximcoding/react-native-bare-starter](https://github.com/maximcoding/react-native-bare-starter) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-22 -->