Monolito Modular vs Multi-App

// app.config.ts - un codebase, identidad impulsada por variante
import { ExpoConfig, ConfigContext } from "expo/config";
 
const variant = process.env.APP_VARIANT ?? "consumer";
 
const variants: Record<string, { name: string; bundleId: string; enableB2B: boolean }> = {
  consumer: { name: "Shop", bundleId: "com.example.shop", enableB2B: false },
  business: { name: "Shop Business", bundleId: "com.example.shop.business", enableB2B: true },
};
 
const active = variants[variant] ?? variants.consumer;
 
export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: active.name,
  slug: "shop",
  ios: { bundleIdentifier: active.bundleId },
  android: { package: active.bundleId },
  extra: {
    appVariant: variant,
    featureFlags: {
      b2bPortal: active.enableB2B,
      newCheckout: process.env.EXPO_PUBLIC_FF_NEW_CHECKOUT === "true",
    },
  },
});

# Mismo repositorio - diferentes apps instalables via perfiles EAS
APP_VARIANT=consumer eas build --profile production-consumer --platform ios
APP_VARIANT=business eas build --profile production-business --platform ios

// src/shared/config/featureFlags.ts
import Constants from "expo-constants";
 
type FeatureFlags = {
  b2bPortal: boolean;
  newCheckout: boolean;
};
 
export function getFeatureFlags(): FeatureFlags {
  const extra = Constants.expoConfig?.extra as { featureFlags?: FeatureFlags } | undefined;
  return {
    b2bPortal: extra?.featureFlags?.b2bPortal ?? false,
    newCheckout: extra?.featureFlags?.newCheckout ?? false,
  };
}

// src/app/navigation/useAppRoutes.ts - monolito modular controla pestañas en tiempo de ejecución
import { useMemo } from "react";
import { getFeatureFlags } from "@/shared/config/featureFlags";
 
export function useAppRoutes() {
  const flags = getFeatureFlags();
 
  return useMemo(() => {
    const tabs = [
      { name: "index", title: "Home" },
      { name: "orders", title: "Orders" },
    ];
    if (flags.b2bPortal) {
      tabs.push({ name: "b2b", title: "B2B Portal" });
    }
    return tabs;
  }, [flags.b2bPortal]);
}

// app/(tabs)/_layout.tsx - renderizar solo pestañas habilitadas
import { Tabs } from "expo-router";
import { useAppRoutes } from "@/app/navigation/useAppRoutes";
 
export default function TabLayout() {
  const routes = useAppRoutes();
 
  return (
    <Tabs>
      {routes.map((route) => (
        <Tabs.Screen key={route.name} name={route.name} options={{ title: route.title }} />
      ))}
    </Tabs>
  );
}

// eas.json - multi-app: perfiles separados por listado de tienda
{
  "build": {
    "production-consumer": {
      "env": { "APP_VARIANT": "consumer" },
      "channel": "production-consumer"
    },
    "production-business": {
      "env": { "APP_VARIANT": "business" },
      "channel": "production-business"
    }
  }
}

# Diseño de repositorio multi-app (cuando listados divergen completamente)
apps/
├── consumer-mobile/     # slug: shop-consumer
└── business-mobile/     # slug: shop-business
packages/
├── features/            # módulos de características compartidas
└── ui/

// app.config.ts (extracto) - inquilino de env en tiempo de compilación
const tenant = process.env.TENANT ?? "acme";
 
export default {
  name: process.env.APP_NAME ?? "Acme Shop",
  slug: `shop-${tenant}`,
  ios: { bundleIdentifier: `com.${tenant}.shop` },
  extra: { tenant, primaryColor: process.env.PRIMARY_COLOR },
};

// Fallar cerrado cuando módulo requerido está deshabilitado
import { getFeatureFlags } from "@/shared/config/featureFlags";
 
export function B2BPortalScreen() {
  if (!getFeatureFlags().b2bPortal) {
    return null; // o redirigir - la ruta también debe estar sin registrar
  }
  // ...
}