Expo SDK 52: desenvolvimento React Native sem ejetar

1. O que é o Expo SDK 52 e por que ele importa hoje

O ecossistema React Native passou por uma transformação significativa desde seus primórdios. No início, o Expo era visto como uma ferramenta limitada — ideal para protótipos, mas insuficiente para aplicações complexas. Desenvolvedores frequentemente precisavam "ejetar" (executar expo eject) para acessar funcionalidades nativas, perdendo as vantagens do managed workflow.

Com o Expo SDK 52, esse paradigma mudou radicalmente. A versão mais recente do SDK oferece suporte nativo ao React Native 0.76 e à New Architecture, permitindo que aplicações completas sejam desenvolvidas sem jamais precisar ejetar. O segredo está na combinação de três pilares: EAS Build para compilação na nuvem, EAS Update para atualizações over-the-air e um sistema robusto de plugins configuráveis.

As principais novidades da SDK 52 incluem:
- Suporte completo ao React Native 0.76 com New Architecture (Fabric + TurboModules)
- Melhorias significativas de performance, especialmente em animações e listas grandes
- Sistema de plugins maduro que elimina a necessidade de código nativo manual
- Expo Router 4 com navegação baseada em arquivos e deep linking automático

O conceito "sem ejetar" deixou de ser uma limitação e tornou-se uma vantagem competitiva: menos configuração, mais produtividade e atualizações simplificadas.

2. Configuração zero e o novo ecossistema de plugins

No Expo SDK 52, o arquivo app.json ou app.config.js é a única fonte de verdade para toda a configuração nativa. Não é mais necessário gerenciar AndroidManifest.xml, Info.plist ou arquivos de gradle manualmente.

O sistema de plugins permite adicionar funcionalidades complexas com uma única linha de configuração. Por exemplo, para adicionar suporte a notificações push:

// app.config.js
export default {
  expo: {
    name: "MeuApp",
    slug: "meu-app",
    plugins: [
      [
        "expo-notifications",
        {
          icon: "./assets/notification-icon.png",
          color: "#ffffff",
          sounds: ["./assets/notification-sound.wav"]
        }
      ]
    ]
  }
};

Para adicionar câmera e localização:

// app.json
{
  "expo": {
    "plugins": [
      "expo-camera",
      ["expo-location", {
        "locationAlwaysAndWhenInUsePermission": "Permita que $(PRODUCT_NAME) use sua localização."
      }]
    ]
  }
}

Tudo isso sem tocar em código nativo. O Expo SDK 52 gera automaticamente as permissões e configurações necessárias durante o build.

3. EAS Build e EAS Update: CI/CD nativo sem dor de cabeça

O EAS (Expo Application Services) transformou completamente o fluxo de desenvolvimento. Com EAS Build, você compila binários iOS e Android diretamente na nuvem, sem precisar de Xcode ou Android Studio instalados localmente.

Fluxo de trabalho simplificado:

# Instalar EAS CLI
npm install -g eas-cli

# Configurar o projeto
eas init

# Compilar para iOS
eas build --platform ios --profile production

# Compilar para Android
eas build --platform android --profile production

# Enviar atualização over-the-air
eas update --branch production --message "Correção de layout"

Comparado ao fluxo antigo com expo build:ios, o EAS Build oferece:
- Builds mais rápidos com cache inteligente
- Suporte a perfis de build personalizados (dev, preview, production)
- Integração com GitHub Actions e outras ferramentas de CI/CD

O EAS Update permite enviar atualizações JavaScript sem passar pela revisão da App Store. Isso é crucial para correções rápidas e experimentos A/B.

4. A Nova Arquitetura do React Native no Expo SDK 52

A SDK 52 é a primeira versão estável do Expo com suporte total à New Architecture do React Native. Isso inclui:

  • Fabric: novo renderizador que melhora a performance de animações e interações
  • TurboModules: chamadas nativas mais rápidas e com menor overhead de memória

Para ativar a New Architecture, basta adicionar ao app.json:

{
  "expo": {
    "newArchEnabled": true
  }
}

O impacto real em performance é notável:
- Redução de 30-40% no jank em listas grandes (FlatList, ScrollView)
- Animações mais suaves com Reanimated 3
- Menor consumo de memória em operações nativas frequentes

Testes internos da equipe Expo mostraram que apps com New Architecture ativada têm renderização 2x mais rápida em componentes complexos.

5. Expo Router 4: navegação baseada em arquivos e deep linking

O Expo Router 4 introduz um sistema de navegação inspirado no Next.js, onde a estrutura de pastas define as rotas automaticamente.

Estrutura de exemplo:

app/
  index.tsx          -> /
  profile.tsx        -> /profile
  (auth)/
    login.tsx        -> /login
    register.tsx     -> /register
  (tabs)/
    _layout.tsx      -> Layout com abas
    home.tsx         -> /home
    settings.tsx     -> /settings

Exemplo prático de autenticação com rotas protegidas:

// 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>
  );
}

O deep linking funciona automaticamente. Se um usuário receber um link meuapp://profile/123, o Expo Router redireciona para a rota correta sem configuração adicional.

6. Debugging e ferramentas de desenvolvimento modernas

O Expo SDK 52 modernizou significativamente as ferramentas de debug. O Expo Dev Tools agora oferece:

  • Inspeção de layout em tempo real: similar ao React DevTools, mas integrado ao terminal
  • Logs remotos: visualize logs do dispositivo diretamente no navegador
  • Network inspector: monitore requisições HTTP sem ferramentas externas

Para depuração avançada, use o expo-dev-client:

// app.json
{
  "expo": {
    "plugins": [
      "expo-dev-client"
    ]
  }
}

Isso permite acesso a:
- Chrome DevTools para debug de JavaScript
- React DevTools para inspeção de componentes
- Console nativo para logs do sistema

O Flipper foi depreciado na SDK 52, sendo substituído por ferramentas mais leves e integradas ao ecossistema Expo.

7. Limitações reais e quando você ainda precisa ejetar

Apesar dos avanços, existem cenários onde o managed workflow ainda não é suficiente:

  1. Módulos nativos não suportados: Bluetooth Low Energy (BLE) customizado, comunicação serial, ou integrações com hardware específico

  2. Performance extrema: apps com renderização 3D complexa ou processamento de vídeo em tempo real podem se beneficiar do controle total

  3. Bibliotecas legadas: algumas bibliotecas React Native antigas não possuem plugins Expo equivalentes

Estratégia híbrida com config-plugins:

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

function withCustomNativeModule(config) {
  return withAndroidStyles(config, async (config) => {
    config.modResults = {
      ...config.modResults,
      resources: {
        ...config.modResults.resources,
        string: [
          ...config.modResults.resources.string,
          { $: { name: 'custom_config' }, _: 'valor_personalizado' }
        ]
      }
    };
    return config;
  });
}

export default {
  expo: {
    plugins: [withCustomNativeModule]
  }
};

Na prática, mais de 95% dos casos de uso são cobertos pelo managed workflow com plugins. O eject deve ser o último recurso.

8. Migrando projetos legados para Expo SDK 52

Migrar um app React Native puro (CLI) para o Expo managed workflow é um processo estruturado:

Passo 1: Preparação

# Instalar Expo CLI
npm install -g expo-cli

# Iniciar migração
npx expo init --template blank

Passo 2: Converter configurações nativas

// Antes (react-native.config.js)
module.exports = {
  dependencies: {
    'react-native-camera': {
      platforms: {
        android: null
      }
    }
  }
};

// Depois (app.json)
{
  "expo": {
    "plugins": [
      ["expo-camera", {
        "cameraPermission": "Permita o uso da câmera."
      }]
    ]
  }
}

Passo 3: Checklist de compatibilidade
- Bibliotecas que funcionam nativamente: react-navigation, react-native-reanimated, react-native-gesture-handler
- Bibliotecas que precisam de adaptação: react-native-fs → expo-file-system, react-native-push-notification → expo-notifications

Passo 4: Testar com EAS Build

eas build --platform ios --profile development
eas build --platform android --profile development

A migração pode ser feita incrementalmente, mantendo partes do código nativo enquanto converte gradualmente para plugins Expo.

Referências