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.

2. Dentro da pasta Input, crie dois arquivos:
• index.tsx (estrutura do componente)
• styles.ts (estilos do componente)

// src/components/Input/index.tsx
import React from 'react';
import { TextInput, TextInputProps } from 'react-native';
import { styles } from './styles';

export function Input({ ...rest }: TextInputProps) {
  return (
    <TextInput
      style={styles.input}
      placeholderTextColor="#999999" // Cor do placeholder
      {...rest}
    />
  );
}

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

export const styles = StyleSheet.create({
  input: {
    width: '100%',
    height: 52,
    backgroundColor: '#121214', // Cor de fundo escura
    borderRadius: 10,
    padding: 12,
    fontSize: 16,
    borderWidth: 1,
    margin: 20,
    color: '#FFFFFF',       // Cor do texto digitado
  },
});

Usando o Input e o useState (estado):

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

export default function Home() {
  const [name, setName] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Olá, {name}!</Text>
      <Input
        placeholder="Digite seu nome"
        onChangeText={setName}
      />
      <Button title="Entrar" onPress={() => alert(`Olá, ${name}!`)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#19181F',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 32,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#453467',
  },
});

Navegação (Expo Router): indo além!

Criando a tela dashboard.tsx

1. Dentro da pasta src/app/, crie um novo arquivo chamado dashboard.tsx.

2. Cole o seguinte código dentro de dashboard.tsx:

// src/app/dashboard.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Button } from '../components/Button'; // Importa o nosso componente Button
import { useRouter } from 'expo-router'; // Importa o useRouter

export default function Dashboard() {
  const router = useRouter(); // Inicializa o useRouter

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Dashboard</Text>
      <Button title="Voltar" onPress={() => router.back()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 32,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 24, // Adiciona um espaço abaixo do título
  },
});

Navegando para a tela dashboard:

// src/app/index.tsx
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Button } from '../components/Button';
import { Input } from '../components/Input';
import { useRouter } from 'expo-router'; // <-- Importe o useRouter aqui também

export default function Home() {
  const [name, setName] = useState('');
  const router = useRouter(); // <-- Inicialize o useRouter

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Olá, {name}!</Text>
      <Input
        placeholder="Digite seu nome"
        onChangeText={setName}
      />
      <Button
        title="Entrar"
        onPress={() => {
          if (name.trim() !== '') { // Verifica se o nome foi preenchido
            router.push('/dashboard'); // Navega para /dashboard
          } else {
            alert('Por favor, digite seu nome!'); // Exibe um alerta se o nome estiver vazio
          }
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 32,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#453467',
  },
});

1. Salve todos os arquivos modificados (index.tsx e dashboard.tsx).

2. Se o Hot Reloading não atualizar o app automaticamente, reinicie o servidor Expo (Ctrl+C e npx expo start).

3. Digite seu nome no campo de texto.

4. Clique no botão "Entrar".

5. Você deverá ser redirecionado para a tela "Dashboard"!

6. Clique no botão "Voltar" para retornar à tela inicial.

Conclusão: sua jornada React Native começou!

• O que é React Native e por que ele é tão incrível.

• Como configurar seu ambiente de desenvolvimento.

• Como criar seu primeiro projeto e executar o app.

• Como criar e estilizar componentes.

• Como usar o estado para tornar seu app interativo.

• Como implementar navegação entre telas com o Expo Router.

• Explore a documentação oficial: o site do React Native e a documentação do Expo são fontes riquíssimas de informação.

• Participe da comunidade: junte-se à comunidade da Rocketseat no Discord para trocar ideias, tirar dúvidas e aprender com outros devs.

• Faça o curso gratuito: comece agora mesmo a dominar os fundamentos com o Minicurso de React Native da Rocketseat!

Explodiu sua mente?! 🤯 Então compartilhe este artigo com aquele amigo ou amiga que também quer dominar o React Native! E ó: a jornada só está começando! Corra para a comunidade da Rocketseat no Discord, tire suas dúvidas, troque ideias com outros devs apaixonados e continue aprendendo com a gente!

💜

Eu sei que, às vezes, mesmo com o guia mais detalhado, as coisas podem dar errado. Por isso, para garantir que você não fique travado(a), preparei um vídeo completo lá no meu canal, mostrando um conteúdo semelhante. Às vezes, ver o código sendo feito "ao vivo" ajuda a clarear as coisas. É só dar o play e bora codar junto!