Como criar estrutura de app com React Native do zero
Uma jornada real de configuração inicial de projeto, estruturação de telas e preparação de componentes reutilizáveis em React Native.
Por que isso é importante
Iniciar um projeto React Native com uma estrutura sólida economiza tempo, previne retrabalho e facilita a escalabilidade. Organizar bem temas, fontes, componentes e arquitetura desde o início evita dificuldades na evolução do projeto.
Configurando a base do projeto
O desenvolvimento começou em um dia frio e ideal para programar. A estrutura inicial foi feita usando React Native, organizando theme, Style Guide, UI Kit e a primeira tela de entrada do app.
src e dividir as responsabilidades por domain.expo-font.Montando os componentes reutilizáveis
Componentes como botões e textos foram criados de forma separada no início, mas o autor identificou a necessidade de composição mais inteligente, criando um só componente que unisse lógica e visual.
⚠️Atenção
Evite criar pequenos componentes excessivamente segmentados. Prefira composições completas, como um botão que já inclui texto e estilos internos.
Desafios com animações
A ideia era animar um mascote 3D diretamente com código usando Three.js. No entanto, a complexidade e performance no mobile exigiram a análise de alternativas como o Lottie, ferramenta mantida pela Airbnb para animações leves em 2D.
Animação com código (Three.js)
Prós
- Alta personalização
- Controle total
Contras
- Curva de aprendizado alta
- Problemas de performance
Lottie
Prós
- Leve para dispositivos móveis
- Fácil de implementar
Contras
- Limitações nas interações dinamicamente programadas
Fluxo de acesso do usuário
O app trabalha um fluxo completo de primeiro acesso: tela inicial, cadastro com nível de experiência do usuário, e login. Cada tela é construída e finalizada antes de iniciar a próxima — uma escolha consciente do desenvolvedor em prol da clareza e foco.
Estrutura de pastas e organização
As pastas principais incluem src, com subpastas de screens, assets, @types, e theme. Essa organização visa clareza na manutenção e separação de responsabilidades.
✅Boas práticas
Separe sua camada visual (UI Kit), lógica (utils/hooks) e tema (guides e tipagens). Evite misturar lógica com visual desde o início.
Ferramentas utilizadas
React Native
Framework para criar apps nativos usando React.
Expo Fonts
Importação otimizada de fontes do Google.
Three.js
Linguagem baseada em WebGL para renderização 3D no navegador e mobile.
O evento para empreendedores de software
Um encontro em Florianópolis nos dias 13 e 14 de setembro reúne profissionais para discutir arquitetura, cultura de empresa, contratações e crescimento de negócio em software. São quase 24 horas de conteúdo profundo e prático.
ℹ️Info importante
Os temas incluem segurança, arquitetura, corte de custos e definição organizacional para CTOs e donos de software houses.