Expo Managed Workflow Best Practices

# Expo Managed Workflow Best Practices

Master Expo managed workflow development with Google Antigravity IDE. This comprehensive guide covers app configuration, build optimization, and deployment strategies for cross-platform mobile applications.

## Why Expo Managed Workflow?

Expo managed workflow simplifies React Native development by handling native configuration automatically. With Google Antigravity IDE's Gemini 3 integration, you get intelligent suggestions for optimal app architecture and performance patterns.

## Project Configuration

### app.json Structure

```json
{
  "expo": {
    "name": "My Antigravity App",
    "slug": "my-antigravity-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#0a0a0a"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.antigravity.myapp",
      "buildNumber": "1.0.0"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#0a0a0a"
      },
      "package": "com.antigravity.myapp",
      "versionCode": 1
    },
    "plugins": [
      "expo-router",
      "expo-secure-store",
      ["expo-camera", { "cameraPermission": "Allow camera access" }]
    ],
    "extra": {
      "eas": { "projectId": "your-project-id" }
    }
  }
}
```

### Environment Configuration

```typescript
// app.config.ts
import { ExpoConfig, ConfigContext } from "expo/config";

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: process.env.APP_NAME || "Antigravity App",
  slug: "antigravity-app",
  extra: {
    apiUrl: process.env.API_URL,
    enableAnalytics: process.env.ENABLE_ANALYTICS === "true",
    eas: {
      projectId: process.env.EAS_PROJECT_ID,
    },
  },
});
```

## Expo Router Navigation

```typescript
// app/_layout.tsx
import { Stack } from "expo-router";
import { ThemeProvider } from "@react-navigation/native";
import { useColorScheme } from "react-native";

export default function RootLayout() {
  const colorScheme = useColorScheme();
  
  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : LightTheme}>
      <Stack
        screenOptions={{
          headerStyle: { backgroundColor: "#0a0a0a" },
          headerTintColor: "#fff",
          headerTitleStyle: { fontWeight: "bold" },
          animation: "slide_from_right",
        }}
      >
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="modal" options={{ presentation: "modal" }} />
      </Stack>
    </ThemeProvider>
  );
}
```

## Performance Optimization

### Image Optimization

```typescript
// components/OptimizedImage.tsx
import { Image } from "expo-image";

interface OptimizedImageProps {
  source: string;
  width: number;
  height: number;
  priority?: boolean;
}

export function OptimizedImage({ source, width, height, priority }: OptimizedImageProps) {
  return (
    <Image
      source={source}
      style={{ width, height }}
      contentFit="cover"
      transition={200}
      priority={priority ? "high" : "normal"}
      cachePolicy="memory-disk"
      placeholder={blurhash}
    />
  );
}
```

### Lazy Loading Screens

```typescript
// Lazy load heavy screens
const HeavyScreen = React.lazy(() => import("./HeavyScreen"));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <HeavyScreen />
    </Suspense>
  );
}
```

## EAS Build Configuration

```json
// eas.json
{
  "cli": { "version": ">= 5.0.0" },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": { "simulator": true }
    },
    "preview": {
      "distribution": "internal",
      "android": { "buildType": "apk" }
    },
    "production": {
      "autoIncrement": true,
      "env": { "ENABLE_ANALYTICS": "true" }
    }
  },
  "submit": {
    "production": {
      "ios": { "appleId": "your@email.com" },
      "android": { "serviceAccountKeyPath": "./pc-api-key.json" }
    }
  }
}
```

## Best Practices

- Use Expo Router for file-based navigation
- Implement proper splash screen handling
- Configure EAS Build for CI/CD pipelines
- Use expo-secure-store for sensitive data
- Optimize images with expo-image
- Enable Hermes JavaScript engine

Google Antigravity IDE provides real-time suggestions for Expo configuration and automatically detects common performance issues in your mobile applications.