Crie um carrossel com guias em React Native

Para entender o que estou tentando construir, primeiro, vamos ver a demonstração:

Como você pode ver nos gifs, temos duas partes para construir este componente:

• As guias (que você pode ver na parte superior)
• Carrossel

Para as guias na parte superior, estou usando apenas o FlatList horizontal e para o carrossel, estou usando o pacote react-native-snap-carouse l. vamos então ver como eu consegui resolver isso.

Então, com este init, obtemos as guias e o carrossel sem nenhuma sincronização.

Se verificarmos o gif a seguir, veremos quando alteramos o índice do carrossel e vamos para um produto de categoria diferente, também ativamos a mesma aba de categoria alterando a opacidade e, ao mesmo tempo, você notará que as abas são ficando centralizado dentro de nossa lista horizontal. Porque se não centralizarmos as abas que estão fora da largura da tela não entrarão na nossa tela e o usuário não notará a aba ativa.

Estou colando o trecho que faz este trabalho

Tudo bem, até agora vimos como alterar as guias quando passamos pelos nossos itens no carrossel. Agora vamos ver como podemos conseguir rolar para os itens corretos quando o usuário pressiona as guias.

Então é isso! Precisamos rastrear nossa guia ativa e sincronizar as guias e o carrossel juntos.