GitLab

Descrição

Este PR implementa a funcionalidade de compartilhamento de imagens para as telas de Ranking e Conclusão de Tarefa. O objetivo é permitir que os usuários compartilhem seu progresso em um formato visualmente atraente (9:16), otimizado para stories de redes sociais. Foram criados dois componentes de "story" customizáveis (InstagramStory e TaskCompletedStory) que são capturados como imagem usando react-native-view-shot. O compartilhamento é feito de forma nativa e confiável através da biblioteca expo-sharing. Na tela de conclusão de tarefa, foi implementado um design moderno de "glassmorphism" com expo-blur e uma lógica para que o rodapé da imagem apareça apenas na versão compartilhada, e não na tela visível para o usuário.

US e Task

Link da tarefa

• US: 102

Tipo de Mudança

• Nova funcionalidade (feat)
• Correção de bug (fix)
• Outro

Como Testar

Passos para reproduzir/testar:

Tela de Ranking:

• 1. Acesse a tela de "Ranking" de um evento.
• 2. Toque no botão "Compartilhar".
• 3. Verifique se o diálogo de compartilhamento nativo é aberto com uma imagem.
• 4. Confirme que a imagem gerada é o story customizado, contendo o card de ranking do usuário, o nome do evento e a imagem do evento ao fundo.

Tela de Conclusão de Tarefa:

• 1. Conclua uma tarefa para ser redirecionado para a tela "Task Completed".
• 2. Observe o novo design em "glassmorphism" que preenche a tela. Note que o rodapé com a imagem do evento e a hashtag não está visível.
• 3. Toque no botão "Compartilhar".
• 4. Verifique se o diálogo de compartilhamento nativo é aberto com uma imagem.
• 5. Confirme que a imagem gerada inclui o rodapé com a imagem do evento e a hashtag #TaskeeApp.

Anexos (se aplicável)

Checklist

• Código segue o padrão definido
• As string estão sendo pegas do arquivo String.ts
• Documentação atualizada (se necessário)
• PR revisado antes de enviar