Aprenda React Native: guia completo para 2025

O que é React Native?

• Cria apps para duas plataformas com um único código: adeus, retrabalho! 👋

• Acelera o desenvolvimento: o famoso time-to-market agradece! ⏱️

• Reaproveita código: componentes são como peças de LEGO, podemos usar as mesmas peças, mas construir infinitas possibilidades. 😉

• Conta com uma comunidade gigante: precisa de ajuda? Tem sempre alguém disposto! 💪

• Segue os passos de gigantes: Facebook, Microsoft, Discord... todos usam React Native! 🏆

Como o React Native funciona?

Preparando o terreno: configurando o ambiente.

• Node.js: instale a versão LTS. É rapidinho!

• Um editor de código: recomendamos o VS Code, mas você pode usar o seu preferido.

• Um celular (Android ou iOS) ou um emulador: para testar o app.

Pause este artigo agora, clique no link em uma nova aba e configure o seu ambiente. É rapidinho e vai fazer toda a diferença!

Criando o nosso primeiro projeto.

Abrindo o projeto no editor de código.

Limpando o terreno.

1. Remova a pasta app/ e todo o seu conteúdo original:
Essa pasta foi gerada automaticamente, mas vamos recriá-la de forma organizada mais adiante dentro da nova estrutura.

2. Dentro da pasta assets/, apague apenas a pasta fonts/ e todo o seu conteúdo original:
Assim, eliminamos exemplos de fontes que não serão utilizados no desenvolvimento do seu aplicativo.

3. Exclua a pasta components/ e todo o seu conteúdo original:
Posteriormente, criaremos uma nova pasta para os nossos componentes customizados, organizada dentro da estrutura principal.

4. Elimine a pasta constants/ e todo o seu conteúdo original:
Essa remoção também visa evitar possíveis conflitos e preparar o ambiente para uma organização mais clara.

Componentes e estilização: dando vida ao app.

Nosso primeiro componente:

// src/app/index.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function Home() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Olá, Rocketseat!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 32,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#67159C', // Um roxo da Rocketseat! 😉
  },
});

Executando o app: a mágica acontece!

Abrindo o app no emulador/simulador:

• iOS: pressione a tecla i no terminal. Isso abrirá o app no simulador iOS (se você estiver usando um Mac e tiver o Xcode instalado).

• Android: pressione a tecla a no terminal. Isso abrirá o app no emulador Android (se você tiver o Android Studio configurado).

• Web: pressione a tecla w no terminal. Isso abrirá o app em uma aba do seu navegador.

Abrindo o app no seu celular (dispositivo físico):

1. Instale o app Expo Go: procure por "Expo Go" na App Store (iOS) ou Google Play Store (Android) e instale o aplicativo.

2. Escaneie o QR Code: abra o Expo Go no seu celular e use a opção de escanear o QR code. Aponte a câmera para o QR code que apareceu no seu terminal.

3. Conexão na mesma rede: certifique-se de que o seu celular e o seu computador estejam conectados à mesma rede Wi-Fi.

Debugger: desvendando os mistérios do código.

• console.log: exiba mensagens no terminal.

• Breakpoints: pause a execução em pontos específicos do código para inspecionar variáveis. (Aperte j no terminal para abrir o debugger no navegador).

Componentes customizados: reutilização é a chave!

Organizando o código: a pasta components

Criando o componente Button

• index.tsx: este arquivo conterá a estrutura do nosso componente (o que ele é e como ele se comporta).

• styles.ts: este arquivo conterá os estilos do nosso componente (como ele aparece).

// src/components/Button/index.tsx
import React from 'react';
import { TouchableOpacity, Text } from 'react-native'; // 1. Importações
import { styles } from './styles'; // 2. Importa os estilos

interface ButtonProps { // 3. Define as Props
  title: string;
  onPress: () => void;
}

export function Button({ title, onPress, ...rest }: ButtonProps) { // 4. Componente Button
  return (
    <TouchableOpacity style={styles.button} onPress={onPress} {...rest}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
}

// src/components/Button/styles.ts
import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  button: {
    backgroundColor: '#67159C', // Roxo da Rocketseat!
    borderRadius: 8,
    paddingVertical: 12,
    paddingHorizontal: 24,
    alignItems: 'center',
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Usando o componente Button

// src/app/index.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Button } from '../components/Button'; // 1. Importa o componente Button

export default function Home() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Olá, Rocketseat!</Text>
      <Button title="Entrar" onPress={() => alert('Clicou!')} /> {/* 2. Usa o componente Button */}
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
	    backgroundColor: '#19181F',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 32,
    },
    title: {
      fontSize: 24,
      marginBottom: 20,
      fontWeight: 'bold',
      color: '#67159C', // Um roxo da Rocketseat! 😉
    },
  });

Componente Input: coletando dados do usuário.

1. Dentro da pasta src/components/, crie uma nova pasta chamada Input.