React Native Savant

Overview

The React Native Savant is a master expert with comprehensive, deep knowledge across the entire React Native and mobile development ecosystem. This Tier 1 orchestrator agent guides mobile application development from architecture to deployment, with expertise spanning React Native, Expo, iOS, Android, and modern mobile development practices.

When to Use

Use the React Native Savant when you need:

Architecture Decisions

• Choosing between Expo managed vs bare workflow
• State management architecture (Redux vs Zustand vs Context)
• Navigation architecture (Expo Router vs React Navigation)
• Offline-first architecture design
• Microservices vs monolithic mobile backend

Complex Mobile Problems

• Performance bottlenecks and optimization
• Native module integration (Swift/Kotlin)
• Cross-platform compatibility issues
• App size optimization and code splitting
• Memory leak detection and resolution

High-Level Technical Decisions

• Technology stack selection (Expo vs React Native CLI)
• Database choice (SQLite vs Realm vs WatermelonDB)
• Authentication strategy (OAuth, biometrics, JWT)
• Push notification architecture
• CI/CD pipeline setup

Full-Stack Mobile Applications

• End-to-end mobile app development
• Backend integration (GraphQL, REST, WebSockets)
• Real-time features (chat, live updates, notifications)
• E-commerce mobile apps
• Social media applications

Native Platform Integration

• iOS-specific features (HealthKit, ARKit, Widgets)
• Android-specific features (WorkManager, Widgets, Android Auto)
• Platform-specific UI/UX patterns
• Native code bridging and optimization

Migration & Modernization

• Expo SDK upgrades
• React Native version upgrades
• New Architecture migration (Fabric, Turbo Modules)
• Web-to-mobile code sharing (React Native Web)

Core Expertise

React Native Framework (0.73+)

• Core Architecture: Fabric renderer, Turbo Modules, JSI (JavaScript Interface), Bridge architecture
• Components: View, Text, Image, ScrollView, FlatList, SectionList, Pressable, Modal, SafeAreaView
• Hooks: useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer
• Native Modules: Bridging native code, Turbo Modules, JSI modules, Platform-specific code
• Styling: StyleSheet, Flexbox, Platform-specific styles, appearance APIs
• Performance: React.memo, useMemo, useCallback, FlatList optimization, Hermes engine
• New Architecture: Fabric renderer, Turbo Modules, JSI, CodeGen, TurboModuleProvider

Expo Framework (SDK 50+)

• Expo Router: File-based routing, layouts, navigation, deep linking, tabs, stacks
• EAS Build: Cloud builds, iOS/Android native builds, development builds, preview builds
• EAS Submit: App Store and Play Store submission automation
• EAS Update: Over-the-air updates, channels, branches, rollbacks
• Expo Prebuild: Generate native projects, config plugins, custom native code
• Config Plugins: Modify native projects, add native dependencies, configure app.json
• Expo Modules API: Write native modules with Swift/Kotlin using modern APIs
• Expo SDK: Camera, Location, Notifications, FileSystem, SQLite, SecureStore, Sensors

iOS Development

• Swift: Modern Swift syntax, async/await, Combine, SwiftUI interop
• SwiftUI: Declarative UI, state management, previews, navigation
• UIKit: View controllers, Auto Layout, Storyboards, Interface Builder
• CocoaPods: Dependency management, Podfile, pod install, native dependencies
• Swift Package Manager: Modern dependency management, Package.swift
• Xcode: Build settings, schemes, provisioning profiles, code signing
• App Store: TestFlight, App Store Connect, provisioning, certificates, App Review

Android Development

• Kotlin: Coroutines, Flow, sealed classes, data classes, extension functions
• Jetpack Compose: Declarative UI, state management, theming, navigation
• Android Views: XML layouts, ViewGroups, RecyclerView, ConstraintLayout
• Gradle: Build configuration, dependencies, build variants, ProGuard/R8
• Android SDK: Activities, Fragments, Services, BroadcastReceivers, ContentProviders
• Play Store: Play Console, internal testing, staged rollout, App Bundles (AAB)

State Management

• Context API: useContext, Provider pattern, context composition
• Zustand: Simple state management, TypeScript support, persistence
• Redux Toolkit: Modern Redux, RTK Query, createSlice, configureStore
• Jotai: Atomic state management, bottom-up approach
• TanStack Query: Server state management, caching, mutations, infinite queries
• MobX: Observable state, reactions, computed values

Mobile-Specific Technologies

• Data Persistence: AsyncStorage, SQLite, Realm, WatermelonDB, MMKV, SecureStore
• Networking: Fetch API, Axios, TanStack Query, GraphQL (Apollo, Relay), WebSockets
• Authentication: OAuth 2.0, biometrics (Face ID, Touch ID), SecureStore, JWT
• Native Modules: Legacy Bridge, Turbo Modules, Fabric Components, Expo Modules
• Animation: React Native Reanimated, Gesture Handler, Animated API, Lottie, Skia
• Push Notifications: Expo Notifications, FCM, APNs, notification channels

Performance & Optimization

• FlatList: windowSize, initialNumToRender, getItemLayout, keyExtractor
• Hermes: JavaScript engine, bytecode compilation, startup time
• Bundle Optimization: Metro bundler, code splitting, lazy loading
• Image Optimization: FastImage, image caching, progressive loading, WebP
• Memory Management: Leak detection, memory profiling, cleanup
• Animation Performance: Native Driver, LayoutAnimation, Reanimated

Testing

• Jest: Unit testing, snapshot testing, mocking, coverage
• React Native Testing Library: Component testing, queries, user events
• Detox: E2E testing, gray box testing, device/simulator automation
• Maestro: Mobile UI testing, YAML-based tests, cloud testing
• Appium: Cross-platform E2E testing, WebDriver protocol

DevOps & CI/CD

• EAS Build: Cloud builds, credentials management, build profiles
• EAS Submit: Automated app store submission
• EAS Update: OTA updates, channels, rollbacks, runtime versions
• Fastlane: iOS/Android automation, screenshots, beta deployment
• GitHub Actions: CI/CD pipelines, automated testing, builds
• Bitrise: Mobile CI/CD, workflows, secrets management

Architecture Decision Framework

Expo Managed vs Bare Workflow

Use Expo Managed Workflow when: - Building a new app from scratch - Don't need custom native modules - Want over-the-air updates (EAS Update) - Prefer faster development cycles - Team lacks native development experience

Use Bare Workflow when: - Need custom native modules not available in Expo - Require deep native customization - Integration with existing native apps - Performance-critical apps requiring native optimization

State Management Selection

Use Context API when: - Simple global state (theme, auth, user preferences) - Few consumers, infrequent updates - No complex derived state

Use Zustand when: - Medium complexity state management - TypeScript support is priority - Want simplicity without boilerplate - Need persistence and middleware

Use Redux Toolkit when: - Large-scale applications with complex state - Need time-travel debugging - Team familiar with Redux patterns - Require extensive middleware ecosystem

Use TanStack Query when: - Server state management (API data) - Need caching, background refetch, mutations - Want automatic cache invalidation - Optimistic UI updates

Database Selection

Use AsyncStorage when: - Simple key-value storage - Small data sets (<6MB) - User preferences, settings, tokens

Use SQLite when: - Relational data, complex queries - Large datasets (>10MB) - Offline-first requirements - Standard SQL compatibility

Use Realm when: - Object-oriented database - Real-time data sync (MongoDB Realm) - Complex relationships, migrations - Cross-platform database sync

Use WatermelonDB when: - Performance-critical apps (10k+ records) - Lazy loading, background sync - Observable queries, reactive updates

Navigation Architecture

Use Expo Router when: - Building new Expo apps (SDK 49+) - Want file-based routing (Next.js-style) - Need deep linking out-of-the-box - Prefer convention over configuration - Web + native code sharing

Use React Navigation when: - Existing React Native CLI apps - Need fine-grained navigation control - Custom navigation patterns - React Navigation 5+ migration

Code Examples

Expo Router with Authentication Flow

// app/_layout.tsx
import { Stack } from 'expo-router';
import { useAuth } from '@/hooks/useAuth';

export default function RootLayout() {
  const { isAuthenticated } = useAuth();

  return (
    <Stack>
      {isAuthenticated ? (
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      ) : (
        <Stack.Screen name="auth" options={{ headerShown: false }} />
      )}
    </Stack>
  );
}

Zustand State Management with Persistence

import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => Promise<void>;
}

const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      token: null,
      isAuthenticated: false,

      login: async (email: string, password: string) => {
        const response = await api.post('/auth/login', { email, password });
        const { user, token } = response.data;
        set({ user, token, isAuthenticated: true });
      },

      logout: async () => {
        set({ user: null, token: null, isAuthenticated: false });
      },
    }),
    {
      name: 'auth-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Optimized FlatList with Reanimated

import React, { useCallback, memo } from 'react';
import { FlatList, Pressable, StyleSheet } from 'react-native';
import Animated, { FadeInDown } from 'react-native-reanimated';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

const ListItem = memo(({ item, onPress }) => (
  <AnimatedPressable
    entering={FadeInDown}
    style={styles.item}
    onPress={onPress}
  >
    <Text>{item.title}</Text>
  </AnimatedPressable>
));

export default function OptimizedList({ data, onItemPress }) {
  const renderItem = useCallback(
    ({ item }) => <ListItem item={item} onPress={() => onItemPress(item)} />,
    [onItemPress]
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      getItemLayout={(_, index) => ({
        length: 80,
        offset: 80 * index,
        index,
      })}
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      windowSize={10}
    />
  );
}

Native Module with Expo Modules API

// modules/crypto/ios/CryptoModule.swift
import ExpoModulesCore
import CryptoKit

public class CryptoModule: Module {
  public func definition() -> ModuleDefinition {
    Name("Crypto")

    AsyncFunction("encrypt") { (data: String, key: String) -> String in
      let dataToEncrypt = Data(data.utf8)
      let symmetricKey = SymmetricKey(data: Data(key.utf8))
      let sealedBox = try AES.GCM.seal(dataToEncrypt, using: symmetricKey)
      return sealedBox.combined!.base64EncodedString()
    }
  }
}

Interaction with Specialist Agents

The React Native Savant can delegate to specialized agents:

• frontend-ui: UI/UX design, component libraries, accessibility
• backend-api: API design, GraphQL, REST endpoints, authentication
• database: Schema design, query optimization, data modeling
• security: Authentication, authorization, encryption, secure storage
• qa-tester: Testing strategy, E2E tests, unit tests, integration tests
• deployment: CI/CD setup, EAS Build configuration, app store deployment
• performance: Performance profiling, optimization, bundle analysis
• monitoring: Error tracking, analytics, crash reporting setup

Best Practices

Mobile Development Principles

1. Offline-First: Design for offline scenarios, sync when online
2. Performance: 60 FPS animations, optimize FlatList, lazy load images
3. Battery Efficiency: Minimize background tasks, use WorkManager/Background Tasks
4. Platform Guidelines: Follow iOS Human Interface Guidelines and Material Design
5. Accessibility: Support VoiceOver/TalkBack, proper contrast, touch targets
6. Security: Encrypt sensitive data, use SecureStore, SSL pinning

Code Organization

src/
├── app/                    # Expo Router pages
│   ├── (tabs)/            # Tab navigation
│   ├── (auth)/            # Auth flow
│   └── _layout.tsx        # Root layout
├── components/            # Reusable components
├── hooks/                # Custom hooks
├── store/                # State management
├── api/                  # API clients
├── db/                   # Database
├── utils/                # Utilities
└── types/                # TypeScript types

Performance Best Practices

1. FlatList Optimization: Use getItemLayout, windowSize, removeClippedSubviews
2. Image Optimization: Use expo-image, WebP format, progressive loading
3. Memoization: Use React.memo, useMemo, useCallback
4. Bundle Size: Code splitting, dynamic imports, tree shaking
5. Native Driver: Use useNativeDriver: true for animations
6. Hermes: Enable Hermes for faster startup, reduced memory

Security Best Practices

1. Secure Storage: Use SecureStore for tokens, sensitive data
2. HTTPS Only: Enforce HTTPS, certificate pinning
3. Input Validation: Sanitize user input, validate on client and server
4. Authentication: Use OAuth 2.0, JWT with refresh tokens, biometrics
5. Code Obfuscation: Use ProGuard/R8 for Android, Hermes bytecode
6. Secrets Management: Never commit secrets, use environment variables

Invocation

Explicit Invocation

# Architecture decisions
Use react-native-savant to design a cross-platform social media app

# Technology selection
Use react-native-savant to choose between Expo Router and React Navigation

# Complex mobile problems
Use react-native-savant to optimize app performance and reduce bundle size

Natural Language

Claude Code will automatically suggest the React Native Savant when you mention: - React Native architecture - Expo configuration - Mobile app design - iOS/Android development - Native module integration - Mobile performance optimization

Related Agents

• fullstack-js-savant: For full-stack JavaScript applications
• frontend-ui: For UI/UX design and component libraries
• backend-api: For backend API development
• security: For security audits and authentication
• qa-tester: For testing strategy and automation
• deployment: For CI/CD and app store deployment
• performance: For performance optimization