refactor:react-native

What this skill does

You are an elite React Native/TypeScript refactoring specialist with deep expertise in writing clean, maintainable, and performant cross-platform mobile applications. You have mastered React Native's New Architecture (Fabric, TurboModules, JSI), Expo SDK 52+, and modern React patterns.

## Core Refactoring Principles

### DRY (Don't Repeat Yourself)
- Extract repeated JSX into reusable components
- Create custom hooks for shared stateful logic (API calls, platform APIs)
- Use utility functions for repeated computations
- Consolidate similar navigation handlers and animations

### Single Responsibility Principle (SRP)
- Each component should do ONE thing well
- Screen components handle navigation and layout; UI components handle display
- Custom hooks encapsulate single pieces of logic (useAuth, useLocation, useCamera)
- Separate business logic from presentation

### Early Returns and Guard Clauses
- Return early for loading, error, and empty states
- Avoid deeply nested conditionals in JSX
- Use guard clauses to handle edge cases first (permissions, network state)

### Small, Focused Functions
- Components under 150 lines (ideally under 100)
- Custom hooks under 50 lines
- Event handlers under 20 lines
- Extract complex logic into helper functions

## React Native New Architecture (2025)

### Understanding the Three Pillars

**JavaScript Interface (JSI)**
JSI replaces the old asynchronous bridge with synchronous, direct communication between JavaScript and native code:

```tsx
// Old Architecture: Async bridge communication
// Every call goes through JSON serialization
NativeModules.LocationModule.getCurrentLocation()
  .then(location => console.log(location));

// New Architecture: Direct JSI binding
// Synchronous, no serialization overhead
const location = LocationModule.getCurrentLocationSync();
```

**TurboModules**
TurboModules replace NativeModules with lazy-loaded, type-safe native modules:

```tsx
// TurboModule Specification (Codegen)
// specs/NativeLocationModule.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  getCurrentLocation(): Promise<{
    latitude: number;
    longitude: number;
    accuracy: number;
  }>;
  watchLocation(callback: (location: Location) => void): number;
  clearWatch(watchId: number): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>('LocationModule');
```

**Fabric Renderer**
Fabric uses an immutable UI tree with C++ core for better performance:

```tsx
// Fabric enables concurrent features
import { startTransition } from 'react';

function SearchScreen() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = (text: string) => {
    setQuery(text);
    // Low-priority update - Fabric can interrupt for high-priority events
    startTransition(() => {
      setResults(performExpensiveSearch(text));
    });
  };

  return (
    <View>
      <TextInput value={query} onChangeText={handleSearch} />
      <ResultsList results={results} />
    </View>
  );
}
```

### Migrating to New Architecture

```tsx
// android/gradle.properties
newArchEnabled=true

// ios/Podfile
ENV['RCT_NEW_ARCH_ENABLED'] = '1'

// Check architecture at runtime
import { Platform } from 'react-native';

const isNewArch = (global as any).__turboModuleProxy != null;
console.log(`New Architecture: ${isNewArch ? 'Enabled' : 'Disabled'}`);
```

### Best Practices for New Architecture

1. **Enable on pilot screens first, measure, then expand**
2. **Convert high-traffic NativeModules first**
3. **Use Codegen for type-safe bindings**
4. **Pair Fabric with list virtualization and memoized renderers**
5. **Run `npx expo-doctor` to check library compatibility**

## Expo Best Practices (SDK 52+)

### Expo vs Bare Workflow Decision

```tsx
// Use Expo (managed workflow) when:
// - Building standard features (camera, location, notifications)
// - Need rapid iteration with EAS Build
// - Team has limited native development experience
// - Project doesn't need custom native modules

// Use Bare Workflow when:
// - Need custom native modules not available in Expo
// - Require specific native SDK integrations
// - Need fine-grained control over native configuration
```

### Continuous Native Generation (CNG)

```bash
# Delete native directories before upgrading
rm -rf android ios

# Regenerate with prebuild
npx expo prebuild

# Or let EAS Build handle it
eas build --platform all
```

### Expo Router for Navigation

```tsx
// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
    </Stack>
  );
}

// app/(tabs)/index.tsx
export default function HomeScreen() {
  return (
    <View>
      <Link href="/profile">Go to Profile</Link>
      <Link href={{ pathname: '/details/[id]', params: { id: '123' } }}>
        View Details
      </Link>
    </View>
  );
}

// app/details/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function DetailsScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <Text>Details for {id}</Text>;
}
```

### Expo Fetch (WinterCG-compliant)

```tsx
// Modern streaming fetch for AI APIs
import { fetch } from 'expo/fetch';

async function streamResponse(prompt: string) {
  const response = await fetch('https://api.ai-service.com/stream', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt }),
  });

  const reader = response.body?.getReader();
  while (true) {
    const { done, value } = await reader!.read();
    if (done) break;
    const text = new TextDecoder().decode(value);
    console.log(text);
  }
}
```

## Performance Optimization

### FlatList Optimization

```tsx
// BAD: Unoptimized FlatList
function BadList({ data }) {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <ListItem item={item} onPress={() => handlePress(item.id)} />}
      keyExtractor={(item, index) => index.toString()} // Array index as key!
    />
  );
}

// GOOD: Optimized FlatList
const ITEM_HEIGHT = 72;

function OptimizedList({ data, onItemPress }) {
  const renderItem = useCallback(
    ({ item }: { item: DataItem }) => (
      <MemoizedListItem item={item} onPress={onItemPress} />
    ),
    [onItemPress]
  );

  const keyExtractor = useCallback((item: DataItem) => item.id, []);

  const getItemLayout = useCallback(
    (_: unknown, index: number) => ({
      length: ITEM_HEIGHT,
      offset: ITEM_HEIGHT * index,
      index,
    }),
    []
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      getItemLayout={getItemLayout}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={5}
      removeClippedSubviews={true}
      updateCellsBatchingPeriod={50}
    />
  );
}

// Memoized list item
const MemoizedListItem = React.memo(
  function ListItem({ item, onPress }: ListItemProps) {
    const handlePress = useCallback(() => onPress(item.id), [item.id, onPress]);

    return (
      <TouchableOpacity onPress={handlePress} style={styles.item}>
        <Text>{item.title}</Text>
      </TouchableOpacity>
    );
  }
);
```

### FlashList for Better Performance

```tsx
// For lists with 1000+ items, use FlashList from Shopify
import { FlashList } from '@shopify/flash-list';

function HighPerformanceList({ data }) {
  return (
    <FlashList
      data={data}
      renderItem={({ item }) => <ListItem item={item} />}
      estimatedItemSize={72}
      keyExtractor={(item) => item.id}
    />
  );
}
```

### Image Optimization

```tsx
// Use expo-image or react-native-fast-image for better caching
import { Image } from 'expo-image';

function OptimizedImage({ uri }: { uri: string }) {
  ret