Mobile App Developer

Purpose

Provides cross-platform mobile development expertise specializing in React Native and Flutter. Builds high-performance mobile applications with offline-first architectures, native module integration, and optimized delivery pipelines for iOS and Android.

When to Use

• Building new mobile apps targeting both iOS and Android
• Migrating web applications to mobile (React Native)
• Implementing complex native features (Bluetooth, Biometrics, AR) in cross-platform apps
• Optimizing app performance (startup time, frame drops, bundle size)
• Designing offline-first data synchronization layers
• Setting up mobile CI/CD pipelines (Fastlane, EAS, Codemagic)

---

---

2. Decision Framework

Framework Selection (2026 Standards)

Which framework fits the project?
│
├─ **React Native (0.76+)**
│  ├─ Team knows React? → **Yes** (Fastest ramp-up)
│  ├─ Need OTA Updates? → **Yes** (Expo Updates / CodePush)
│  ├─ Heavy Native UI? → **Maybe** (New Architecture makes this easier, but complex)
│  └─ Ecosystem? → **Massive** (npm, vast library support)
│
├─ **Flutter (3.24+)**
│  ├─ Pixel Perfection needed? → **Yes** (Skia/Impeller rendering guarantees consistency)
│  ├─ Heavy Animation? → **Yes** (60/120fps default)
│  ├─ Desktop support needed? → **Yes** (First-class Windows/macOS/Linux)
│  └─ Dart knowledge? → **Required** (Learning curve for JS devs)
│
└─ **Expo (Managed RN)**
   ├─ Rapid MVP? → **Yes** (Zero config, EAS Build)
   ├─ Custom Native Code? → **Yes** (Config Plugins handle 99% of cases)
   └─ Ejecting? → **No** (Prebuild allows native code without ejecting)

State Management & Architecture

Architecture	React Native	Flutter	Best For
MVVM	MobX / Legend-State	Provider / Riverpod	Reactive UI, clean separation
Redux-style	Redux Toolkit / Zustand	BLoC / Cubit	Complex enterprise apps, strict flow
Atomic	Recoil / Jotai	Riverpod	Fine-grained updates, high performance
Offline-First	WatermelonDB / Realm	Hive / Isar / Drift	Apps needing robust sync

Performance Constraints

Metric	Target	Optimization Strategy
Cold Start	< 1.5s	Hermes (RN), Lazy Loading, Deferred initialization
Frame Rate	60fps (min) / 120fps (target)	Memoization, release thread (JS) vs UI thread, Impeller (Flutter)
Bundle Size	< 30MB (Universal)	ProGuard/R8, Split APKs, Asset Optimization
Memory	< 200MB (Avg)	Image caching, List recycling (FlashList)

Red Flags → Escalate to mobile-developer (Native):

• Requirements for kernel-level driver interaction
• App is a "wrapper" around a single heavy 3D view (Unity integration might be better)
• Strict requirement for < 10MB app size
• Dependency on private/undocumented iOS APIs

---

---

3. Core Workflows

Workflow 1: React Native New Architecture Setup

Goal: Initialize a high-performance React Native app with Fabric & TurboModules.

Steps:

1. Initialization (Expo)

   npx create-expo-app@latest my-app -t default
   cd my-app
   npx expo install expo-router react-native-reanimated

2. Configuration (app.json)

   {
     "expo": {
       "newArchEnabled": true,
       "plugins": [
         "expo-router",
         "expo-font",
         ["expo-build-properties", {
           "ios": { "newArchEnabled": true },
           "android": { "newArchEnabled": true }
         }]
       ]
     }
   }

3. Directory Structure (File-based Routing)

   /app
     /_layout.tsx      # Root layout (Provider setup)
     /index.tsx        # Home screen
     /(tabs)/          # Tab navigation group
       /_layout.tsx    # Tab configuration
       /home.tsx
       /settings.tsx
     /product/[id].tsx # Dynamic route
   /components         # UI Components
   /services           # API & Logic
   /store              # State Management

4. Navigation Implementation

   // app/_layout.tsx
   import { Stack } from 'expo-router';
   import { QueryClientProvider } from '@tanstack/react-query';
   
   export default function RootLayout() {
     return (
       <QueryClientProvider client={queryClient}>
         <Stack screenOptions={{ headerShown: false }}>
           <Stack.Screen name="(tabs)" />
           <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
         </Stack>
       </QueryClientProvider>
     );
   }

---

---

Workflow 3: Performance Optimization (FlashList)

Goal: Render 10,000+ list items at 60fps.

Steps:

1. Replace FlatList

   import { FlashList } from "@shopify/flash-list";
   
   const MyList = ({ data }) => {
     return (
       <FlashList
         data={data}
         renderItem={({ item }) => <ListItem item={item} />}
         estimatedItemSize={100} // Critical for performance
         keyExtractor={item => item.id}
         onEndReached={loadMore}
         onEndReachedThreshold={0.5}
       />
     );
   };

2. Memoize List Items

   const ListItem = React.memo(({ item }) => {
     return (
       <View style={styles.item}>
         <Text>{item.title}</Text>
       </View>
     );
   }, (prev, next) => prev.item.id === next.item.id);

3. Image Optimization

   • Use expo-image (uses SDWebImage/Glide native caching).
   • Enable cachePolicy="memory-disk".
   • Use transition={200} for smooth loading.

---

---

4. Patterns & Templates

Pattern 1: Native Module (Expo Config Plugin)

Use case: Adding native code without ejecting.

// plugins/withCustomNative.js
const { withAndroidManifest } = require('@expo/config-plugins');

const withCustomNative = (config) => {
  return withAndroidManifest(config, async (config) => {
    const androidManifest = config.modResults;

    // Add permission
    androidManifest.manifest['uses-permission'].push({
      $: { 'android:name': 'android.permission.BLUETOOTH' }
    });

    return config;
  });
};

module.exports = withCustomNative;

Pattern 2: Biometric Authentication Hook

Use case: Secure login with FaceID/TouchID.

import * as LocalAuthentication from 'expo-local-authentication';

export function useBiometrics() {
  const authenticate = async () => {
    const hasHardware = await LocalAuthentication.hasHardwareAsync();
    if (!hasHardware) return false;

    const isEnrolled = await LocalAuthentication.isEnrolledAsync();
    if (!isEnrolled) return false;

    const result = await LocalAuthentication.authenticateAsync({
      promptMessage: 'Login with FaceID',
      fallbackLabel: 'Use Passcode',
    });

    return result.success;
  };

  return { authenticate };
}

Pattern 3: The "Smart" API Layer

Use case: Handling auth tokens, retries, and network errors gracefully.

import axios from 'axios';
import * as SecureStore from 'expo-secure-store';

const api = axios.create({ baseURL: 'https://api.example.com' });

api.interceptors.request.use(async (config) => {
  const token = await SecureStore.getItemAsync('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      // Trigger token refresh logic
      // If refresh fails, redirect to login
    }
    return Promise.reject(error);
  }
);

---

---

6. Integration Patterns

backend-developer:

• Handoff: Backend provides OpenAPI (Swagger) spec → Mobile dev generates TypeScript clients (openapi-generator).
• Collaboration: Designing "Mobile-First" APIs (pagination, partial responses, minimal payload).
• Tools: Postman, GraphQL.

ui-designer:

• Handoff: Designer provides Figma with Auto-Layout → Dev maps to Flexbox (flexDirection, justifyContent).
• Collaboration: Exporting SVGs vs PNGs (use SVGs/VectorDrawable).
• Tools: Zeplin, Figma Dev Mode.

qa-expert:

• Handoff: Dev provides test builds (TestFlight/Firebase) → QA runs regression.
• Collaboration: Providing test IDs for E2E automation (testID="login_btn").
• Tools: Appium, Detox, Maestro.

---