Water Drink: funcionamento detalhado do app de hidratação diária

No post anterior apresentei o Water Drink, projeto Hidratação Diária, um app mobile em React Native + Expo para acompanhar a ingestão de água ao longo do dia. Neste artigo entro em detalhes sobre cada funcionalidade, com base no README do projeto.

Código-fonte completo em: https://github.com/marcelo3macedo/water-drink

Onboarding personalizado

O primeiro contato do usuário com o app é um questionário curto:

• Perguntas rápidas sobre sexo, faixa etária e peso (peso é opcional);
• Cálculo automático de uma meta diária de água recomendada, com opção de ajuste manual;
• Seleção dos recipientes (copos, garrafas, squeezes) favoritos para uso no dia a dia;
• Opção de pular o questionário e informar a meta manualmente.

Tela inicial

• Indicador circular com o percentual e volume já consumido no dia;
• Meta diária exibida em destaque;
• Botões de ação rápida para registrar volumes predefinidos com um toque;
• Botão + Personalizado para informar qualquer quantidade manualmente;
• Botão Fiz exercício para aumentar a meta apenas do dia atual, repondo o líquido perdido no treino.

Aumentar meta por exercício

Depois de treinar, o usuário pode repor o líquido perdido sem alterar a meta dos outros dias:

• Valores rápidos recomendados para corrida (leve, moderada, intensa) e academia (leve, moderada, intensa);
• Campo para informar um valor de reposição personalizado;
• Ajuste vale somente para o dia atual — a meta volta ao normal no dia seguinte;
• Indicador na tela inicial mostrando o quanto a meta foi aumentada.

Favoritos

• Lista completa de recipientes (copos, garrafas, squeezes, jarras) para marcar como favoritos;
• Favoritos aparecem como atalhos na tela inicial e no widget;
• Criação de medidas personalizadas com ícone e volume próprios.

Conquistas

• Sistema de troféus que gamifica o uso do app (registros, metas batidas, sequências por dia da semana, entre outras);
• Tela dedicada com o progresso de conquistas desbloqueadas;
• Campo opcional de aniversário para desbloquear a conquista especial "Brinde à Vida".

Notificações

• Central de notificações com lembretes de hidratação e conquistas desbloqueadas;
• Alerta ao meio-dia caso o usuário esteja abaixo de 50% da meta;
• Alerta à tarde (18h) caso a meta ainda não tenha sido atingida;
• Botão para testar a notificação imediatamente;
• Compartilhamento de conquistas desbloqueadas como imagem.

Configurações

• Definição da meta diária de água (opções rápidas: 1500, 2000, 2500 ou 3000 ml);
• Inserção manual de uma meta personalizada;
• Gerenciamento dos botões de ação rápida — ideal para quem usa um copo ou garrafa de volume fixo.

Acompanhamento

• Histórico do dia com cada lançamento e o horário exato em que foi registrado;
• Indicação visual de quanto ainda falta para completar a meta;
• Opção de remover lançamentos individuais ou zerar o dia;
• Registros reiniciados automaticamente a cada novo dia.

Widget Android

• Widget para a tela inicial do celular com o progresso do dia e acesso rápido aos recipientes favoritos;
• Adição de água diretamente pelo widget, sem precisar abrir o app.

Tecnologias

• React Native + Expo (~54);
• React Navigation — navegação em abas e pilha;
• expo-notifications — lembretes locais agendados;
• @react-native-async-storage/async-storage — persistência local dos dados;
• expo-linear-gradient — gradientes de interface;
• react-native-svg — indicador circular de progresso;
• react-native-android-widget — widget de hidratação na tela inicial do Android;
• react-native-view-shot + expo-sharing — compartilhamento de conquistas como imagem.

Como executar

# Instalar dependências
npm install

# Iniciar o servidor de desenvolvimento
npx expo start

Para testar notificações e o widget é necessário usar um Development Build em vez do Expo Go:

# Android
npx expo run:android

# iOS
npx expo run:ios

Código completo disponível em github.com/marcelo3macedo/water-drink.