Programação B

Exercícios

1. Adicione um ActivityIndicator dentro de cada card enquanto a imagem (futura) do evento carregaria. Por enquanto, simule com um setTimeout de 1 segundo no useEffect antes de setar loading como false. Observe como o feedback visual muda a percepção de velocidade.

2. O stack navigator mostra “Detalhe do Evento” como título fixo. Modifique para que o título da tela seja o nome do evento. Dica: use a prop options como função no Stack.Screen, que recebe route.params.

3. Adicione um RefreshControl na FlatList para permitir pull-to-refresh. Quando o usuário puxar a lista para baixo, refaça o fetch e atualize os dados. Consulte a documentação do FlatList no React Native.

4. O EventDetailScreen busca a lista inteira e filtra pelo id, assim como a versão web. Uma alternativa é passar o evento inteiro como parâmetro de navegação (em route.params), evitando um segundo fetch. Implemente essa abordagem e compare: quando ela é suficiente? Quando ela falha?

5. Crie uma tab bar na parte inferior da tela com duas abas: “Eventos” (a lista atual) e “Sobre” (uma tela estática com o nome e a descrição do TamoJunto). Use @react-navigation/bottom-tabs. A aba “Eventos” deve conter o stack navigator, preservando a navegação lista → detalhe.

6. Copie o hook useEvents.ts para o projeto web e refatore o EventList.tsx para usá-lo. Compare o código antes e depois: o que está duplicado entre web e mobile? O que é genuinamente diferente?

Referências

A documentação do React Native cobre componentes, APIs e guias de plataforma: https://reactnative.dev/docs/getting-started.

A documentação do Expo tem guias de setup e referências de todas as bibliotecas incluídas: https://docs.expo.dev/.

O React Navigation documenta todos os tipos de navegador (stack, tab, drawer) com exemplos interativos: https://reactnavigation.org/docs/getting-started.