Por que usar React Native com Expo: benefícios e como criar suas primeiras páginas

1. O que é o Expo?

O Expo é um conjunto de ferramentas que simplifica o desenvolvimento com React Native. Ele cuida da configuração inicial, compilação, assets, atualizações OTA (Over The Air) e muito mais. Isso significa menos tempo com setup e mais tempo programando.

Em vez de lidar com Android Studio, Xcode e configurações nativas, o Expo permite criar e testar seu app com apenas um comando.

npx create-expo-app meuApp
cd meuApp
npx expo start

Ao rodar esse comando, você pode abrir o app diretamente no celular com o app Expo Go (disponível na Play Store e App Store).

2. Principais benefícios do Expo

• ⚡ Rápido de começar: sem precisar configurar SDKs ou ambientes nativos.
• 📱 Testes instantâneos: visualize as alterações em tempo real no celular via QR Code.
• ☁️ Atualizações OTA: publique mudanças no app sem precisar reenviar à loja.
• 📦 Bibliotecas integradas: câmera, sensores, notificações e muito mais já prontos.
• 💡 Compatível com EAS Build: compile APKs e IPAs direto na nuvem do Expo.

3. Criando páginas simples com Expo

Com o Expo, você pode estruturar seu app com múltiplas páginas usando o React Navigation.

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

Crie um arquivo App.js como este:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Bem-vindo ao App!</Text>
      <Button title="Ir para Sobre" onPress={() => navigation.navigate('Sobre')} />
    </View>
  );
}

function SobreScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Página Sobre</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Sobre" component={SobreScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Pronto! Agora você tem um app com duas páginas e navegação funcional — tudo sem precisar abrir o Android Studio.

4. Usando o Expo Snack

O Expo Snack é uma ferramenta online para testar e compartilhar projetos React Native diretamente no navegador.

Você pode acessar em: https://snack.expo.dev

Basta colar seu código, clicar em "Run" e escanear o QR Code com o app Expo Go no celular. É ideal para ensinar, testar componentes e compartilhar ideias com outros desenvolvedores.

// Exemplo simples de componente no Snack
import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Olá do Snack! 🚀</Text>
    </View>
  );
}

5. Quando usar (ou não) o Expo

O Expo é perfeito para 90% dos projetos, mas há casos em que o bare workflow (sem Expo) pode ser melhor.

• ✅ Use Expo se quer rapidez, praticidade e recursos prontos.
• ⚙️ Use React Native puro se precisa integrar SDKs nativos complexos ou bibliotecas fora do ecossistema Expo.

Você pode começar com Expo e, se necessário, ejetar o projeto com npx expo prebuild.

Conclusão

O Expo é uma das ferramentas mais poderosas para quem trabalha com React Native. Ele reduz a complexidade, acelera o desenvolvimento e torna o aprendizado mais acessível. Com ele, qualquer pessoa pode criar um app completo em minutos — direto do navegador ou do celular.

Se você ainda não testou, acesse o Snack do Expo e comece agora mesmo 🚀