OXNAR | Criando Apps com React Native

Tutorial passo a passo • Do projeto inicial ao primeiro aplicativo

Antes de começar: este guia considera que o Node.js e as ferramentas do React Native/Expo já estão instalados no computador. Vamos criar um app simples que muda a cor da tela quando você toca nos botões.

1. Criar o projeto

1

Abra o terminal

Abra o Prompt de Comando, PowerShell ou o terminal integrado do VS Code. Digite:

npx create-expo-app@latest MeuApp

O comando cria uma pasta chamada MeuApp com os arquivos iniciais do aplicativo. Aguarde o processo terminar.

2

Entre na pasta e inicie

Execute os comandos, um de cada vez:

cd MeuApp
npx expo start

O terminal exibirá um QR Code e atalhos para abrir o app. Se o projeto já existir, não crie outro: entre na pasta dele e execute npx expo start.

2. Edite o código do aplicativo

3

Abra o projeto no VS Code

Abra a pasta MeuApp no VS Code. Localize o arquivo App.js (em alguns modelos recentes, a tela inicial pode estar dentro da pasta app). Substitua o conteúdo do arquivo principal pelo exemplo abaixo.

import React, { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

export default function App() {
  const [cor, setCor] = useState('#ffffff');

  return (
    <View style={[styles.container, { backgroundColor: cor }]}>
      <Text style={styles.titulo}>Meu primeiro app</Text>
      <Text style={styles.texto}>Escolha uma cor:</Text>

      <Pressable style={[styles.botao, {backgroundColor:'#eeeeee'}]}
        onPress={() => setCor('#ffffff')}>
        <Text style={styles.textoBotao}>Branco</Text>
      </Pressable>

      <Pressable style={[styles.botao, {backgroundColor:'#f3d93b'}]}
        onPress={() => setCor('#fff176')}>
        <Text style={styles.textoBotao}>Amarelo</Text>
      </Pressable>

      <Pressable style={[styles.botao, {backgroundColor:'#087cf0'}]}
        onPress={() => setCor('#087cf0')}>
        <Text style={[styles.textoBotao, styles.claro]}>Azul</Text>
      </Pressable>

      <Pressable style={[styles.botao, {backgroundColor:'#111111'}]}
        onPress={() => setCor('#111111')}>
        <Text style={[styles.textoBotao, styles.claro]}>Preto</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
  titulo: { fontSize: 24, fontWeight: 'bold', marginBottom: 12 },
  texto: { fontSize: 16, marginBottom: 14 },
  botao: { width: 190, padding: 13, borderRadius: 9, marginVertical: 5, alignItems: 'center' },
  textoBotao: { fontWeight: 'bold', color: '#222222' },
  claro: { color: '#ffffff' }
});
Dica: salve o arquivo com Ctrl + S. O Expo normalmente atualiza o aplicativo automaticamente.

3. Entenda os principais elementos

4

O que cada parte faz?

useState
Guarda a cor atual da tela. Quando ela muda, o app atualiza a interface.

View
É o contêiner que organiza os elementos da tela.

Text
Mostra títulos, mensagens e rótulos.

Pressable
Cria uma área que responde ao toque; onPress define a ação.

StyleSheet
Organiza cores, tamanhos, margens e alinhamentos.

5

Visualize o resultado

Abra o app no celular com o Expo Go e leia o QR Code, ou use um emulador Android configurado. Você também pode pressionar w no terminal do Expo para abrir a versão web, quando disponível.

Meu primeiro app

Escolha uma cor:

Demonstração interativa desta página HTML. Os botões do aplicativo React Native funcionam no app que você executar.

4. Comandos úteis

Criar um projeto:

npx create-expo-app@latest MeuApp

Entrar na pasta:

cd MeuApp

Iniciar o servidor:

npx expo start

Parar o servidor: volte ao terminal e pressione Ctrl + C.

Próximos desafios: adicione uma quinta cor, crie um botão para voltar à cor original, inclua uma imagem e depois experimente montar uma tela de login.