A anatomia de uma tela React Native
Todo app nasce da combinação de poucas peças: caixas que organizam, texto que informa, botões que reagem e um pouco de memória pra lembrar o que o usuário fez. Este é o mapa dessas peças e dos comandos de terminal que colocam tudo isso rodando no seu celular.
Antes de tudo
O Expo (a ferramenta que usamos para criar e rodar o app) precisa do Node.js instalado. É ele quem roda o servidor local e todo o ferramental por trás das câmeras. Antes de criar qualquer projeto, confirme que os dois comandos abaixo respondem com um número de versão, não com erro.
Criando e rodando o projeto
Baixa da internet toda a estrutura do Expo e cria a pasta do app. O --template blank-typescript garante que o projeto venha limpo, sem exemplos, já configurado para TypeScript.
O terminal não entra na pasta sozinho. Sem esse passo, os comandos seguintes rodam no lugar errado.
O template em branco não vem com suporte à Web nem com a biblioteca de área segura, por isso instalamos os dois. Usar expo install (em vez de npm install) garante versões compatíveis com a sua versão do Expo.
O comando do dia a dia: liga o servidor local e gera o QR Code para abrir o app no celular.
01 · Componentes visuais
A estrutura da tela. Antes de qualquer coisa reagir a um toque, alguém precisa organizar as caixas, colocar o texto dentro delas e definir onde a imagem entra. É o "esqueleto" de todo componente que você vai construir.
O padrão que você vai repetir bastante
Toda tela começa envolvendo o conteúdo num SafeAreaProvider e, dentro dele, num SafeAreaView. É esse par que garante que nada fique escondido atrás da câmera ou da barra de gestos do celular.
SafeAreaView
Zonas de risco: câmera/notch em cima, barra de gestos embaixo. Um View comum deixaria conteúdo nascer aqui, escondido ou cortado.
Área segura: o SafeAreaView calcula o respiro certo em cada aparelho, sem número mágico, sem margem fixa que quebra num iPhone e sobra noutro.
<View/>
A caixa universal de layout, equivalente à <div> do HTML. Organiza os filhos em Flexbox (coluna, por padrão).
Use quando precisar agrupar, alinhar ou espaçar qualquer coisa na tela.
<SafeAreaView/>
A view inteligente: respeita as bordas perigosas do aparelho, como câmera, status bar e barra de gestos.
Use quando for a raiz visível de qualquer tela do app.
<Text/>
O único componente que aceita palavras soltas. Toda letra do app precisa estar dentro de um Text.
Use quando mostrar qualquer palavra, número ou frase.
<Image/>
Mostra fotos e ícones: locais (require()) ou remotos (uri). Precisa de largura/altura definidas.
Use quando exibir uma foto, ícone ou ilustração.
<ImageBackground/>
Um Image que aceita filhos por cima, ideal para uma foto de fundo com texto ou formulário na frente.
Use quando precisar de conteúdo sobreposto a uma imagem.
<StyleSheet/>
A nossa folha de estilos, o "CSS" do React Native. StyleSheet.create({ '{' }...{ '}' }) organiza os estilos em objeto JS.
Use quando estilizar qualquer componente (sem unidade: número puro = dp).
02 · Interatividade
Ações do usuário. Uma tela bonita e parada não é um app: é aqui que o toque, a digitação e o liga/desliga entram em cena. Mexa nos exemplos abaixo, eles respondem de verdade.
Repara que várias funções aqui começam com set, tipo setNome e setAtivo. Isso não é acaso: são "atualizadores de estado", a peça que faz a tela lembrar do que o usuário fez. O porquê disso mora lá na frente, em Lógica & estado.
<Button/>
O botão padrão do sistema. O visual muda entre iOS e Android. Recebe só title, onPress e color.
Limite quase não dá pra customizar o estilo.
<TouchableOpacity/>
Torna qualquer coisa tocável e reduz a opacidade ao pressionar. É o feedback que você acabou de sentir nos botões acima.
Use quando quiser 100% de controle do visual do botão.
<TextInput/>
Abre o teclado e captura o que o usuário digita. Controlado com value + onChangeText.
Use quando precisar de nome, e-mail, busca, senha…
<Switch/>
O toggle nativo de ligar/desligar. Controlado com value (boolean) + onValueChange.
Use quando a opção for binária: sim/não, ativo/inativo.
03 · Listas e rolagem
Para conteúdo grande demais pra caber numa tela. A diferença entre os três é o que cada um mantém montado na memória enquanto você rola.
ScrollView
Renderiza todos os filhos de uma vez, mesmo fora da tela. Ótimo pra pouco conteúdo, pesado demais pra listas grandes.
FlatList
Lista virtualizada: só monta o que aparece na tela (+ uma folga). Padrão para qualquer lista média ou grande.
SectionList
Como a FlatList, mas agrupada por categorias com cabeçalho, tipo a agenda do celular separada em A, B, C…
ScrollView · como isso vira código
A mais direta das três: tudo que você coloca dentro dela vira filho normal, sem prop de dados nem função de desenho. Boa pra conteúdo curto e fixo, tipo um formulário longo. Evite se a lista pode crescer pra centenas de itens.
FlatList · como isso vira código
A FlatList não recebe filhos prontos: você entrega os dados em data e uma função em renderItem que diz como desenhar cada linha. O keyExtractor dá um id único pra cada item, é assim que o React sabe o que redesenhar quando a lista muda.
SectionList · como isso vira código
Espera os dados já agrupados em sections: uma lista de grupos, cada um com um title e um data (os itens daquele grupo). O renderItem desenha cada item e o renderSectionHeader desenha o título do grupo.
FlatList · role a lista, o "viewport" é o que fica montado
SectionList · cabeçalho fixo por grupo
04 · Lógica e estado
O cérebro do app. useState é o comando do React que guarda a memória da tela: o que o usuário digitou, se o switch está ligado, quantas vezes um botão foi tocado. Quando essa memória muda, a tela é redesenhada sozinha.
<TouchableOpacity onPress={() => setCount(count + 1)}>