react-native-snap-carousel

O React Native Snap Carousel ( Clique aqui )é uma biblioteca popular para criação de carrosséis animados em aplicativos React Native. Foi criada em 2017. Desde então, a biblioteca ganhou muitos seguidores e se tornou uma opção confiável para criar carrosséis em aplicativos móveis.

O ponto forte do React Native Snap Carousel é a sua facilidade de uso e customização. Ele é altamente configurável, o que significa que os desenvolvedores podem ajustar facilmente o carrossel para se adequar às suas necessidades. Além disso, a animação suave e a capacidade de “snap” (ou seja, alinhamento) dos itens no carrossel adicionam uma sensação profissional ao aplicativo.

Uma das principais vantagens desta biblioteca é que ela oferece suporte nativo às plataformas Android e iOS, bem como suporte à versão web através do expo (um framework open source). Isso significa que você pode facilmente implementar o mesmo design visual nos três ambientes sem ter que reescrever qualquer parte do seu código. Além disso, ele também possui recursos avançados com foco na experiência do usuário final, incluindo funcionalidades ricas em animações e gestão automatizada da memória .

Nesse artigo iremos usar o expo (que é um framwork para desenvolvimento em react native), e limpei todo arquivo que ele monta deixando o mínimo possivel , e da forma mais simples de entendimento ao meu ver possivel, pois ele não tem o objetivo de mostrar as melhores práticas mas sim mostrar o básico como ele funcionar e uma forma bem simples e direta

Resolvi escrever esse atigo pois enfrentei um problema que não achei resolução na internet, pois assim consigo ajudar outras pessoas que possam estar tendo o mesmo problema que eu tive

Iniciei um novo snack no Expo Snack e limpei ele deixando somente o básico pois quando ele cria ele cria um projeto já com alguns explemos como como CARD que usa o react-native-paper (que será abordado futuramente)

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
return (

Olá mundo

);
}

Após isso adicionei o react-native-snap-carousel

import Carousel from 'react-native-snap-carousel';
Mas se você for usar na sua máquina (expo cli) terá que abrir o terminal e inserir

npm install --save react-native-snap-carousel

Se estiver usando Type Script

npm install --save @types/react-native-snap-carousel

Bom dando prosseguimento usando o Expo Snack após importar o react-native-snap-carousel (tanto no Expo cli quanto no Expo Snack) ele ese tipoo de erro

Cannot read properties of undefined (reading 'style')

Cannot read properties of undefined (reading ‘style’)
Isso ocorre por causa da versão do react-native-snap-carousel basta ir em package.json e verificar aversão instalada no Expo Snack fica igual na imagem abaixo

E usando no Expo cli fica igual igual imagem abaixo

E no caso do cli ele gera erro quando usamos o compano de instalação via npn / yarn

ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from ‘deprecated-react-native-prop-types’
Esses erros são causados por causa de verão tanto no Expo Snack quanto no Expo Cli.
Para solucionar esse problema devemos usar a versão ” 4.0.0.6-beta-6″ que ao menos para mim está funcionando perfeitamente

npm install --save [email protected]
Feito isso no Expo Cli , você abrindo o packagejson vê que ele mudou para versão “^4.0.0-beta.6”
Só que no Expo Snack você vai no pckagejson e em depenencies coloca a versão: ^4.0.0-beta.6 ficando assim

"react-native-snap-carousel": "^4.0.0-beta.6"
Tudo feito ele para de gerar erros , vamos continuar para resumir e ganharmos tempo embaixo temo código minimo explicado o Snack dele pode ser visto aqui

import React,{useState, useRef } from 'react';
import { Text, View, StyleSheet, Image,Dimensions } from 'react-native';
import Carousel, { Pagination } from 'react-native-snap-carousel'

const data = [
{
title: "Slide 01 Girl",
body: "Ut tincidunt tincidunt erat. Sed cursus turpis vitae tortor. Quisque malesuada placerat nisl. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.",
imgUrl: "https://images.pexels.com/photos/1382726/pexels-photo-1382726.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
},
{
title: "Slide 02 Mansion",
body: "Aenean ut eros et nisl sagittis vestibulum. Donec posuere vulputate arcu. Proin faucibus arcu quis ante. Curabitur at lacus ac velit ornare lobortis. ",
imgUrl: "https://images.pexels.com/photos/2525714/pexels-photo-2525714.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
},
{
title: "Slide 03 Meet",
body: "Phasellus ullamcorper ipsum rutrum nunc. Nullam quis ante. Etiam ultricies nisi vel augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.",
imgUrl: "https://images.pexels.com/photos/3182759/pexels-photo-3182759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
},
];

function CarouselCardItem({ item, index }){

return(

<Image source={{ uri: item.imgUrl }} style={styles.img}
resizeMode="stretch" />
{item.title}
{item.body}

)
}
const { width, height } = Dimensions.get('window');
const imageWidth = width * 1.0; // define a largura da imagem como 100% da largura da tela
const imageHeight = imageWidth * 0.5; // define a altura da imagem como metade da largura

export default function App() {
const isCarousel = useRef(null)
const [index, setIndex] = useState(0)
return (

<Carousel
layout="default"
layoutCardOffset={9}
ref={isCarousel}
data={data}
renderItem={CarouselCardItem}
sliderWidth={390}
itemWidth={390}
inactiveSlideShift={0}
onSnapToItem={(index) => setIndex(index)}
useScrollView={true}
/>
<Pagination
dotsLength={data.length}
activeDotIndex={index}
carouselRef={isCarousel}
dotStyle={{
width: 40,
height: 10,
borderRadius: 5,
marginHorizontal: 0,
backgroundColor: 'rgba(0, 0, 0, 0.92)',
bottom: 150,
borderWidth: 1,
borderColor: 'rgba( 249, 249, 249, 0.52)',
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,

    }}
    inactiveDotOpacity={0.4}
    inactiveDotScale={0.6}
    tappableDots={true}
  />
</View>

);
}

const styles = StyleSheet.create({
img: {
width: imageWidth,
height: imageHeight
},
title: {
fontSize: 25,
fontWeight: 'bold',
}
})

Não me extenderei muito mas tenho que explicar algumas coisas como e

Carousel:

• layout – É aqui que definimos o layout que nosso carousel terá ele tem alguns pré definidos como:

• tinder:Este layout exibe os itens em uma linha horizontal, com um item em destaque em primeiro plano e os itens adjacentes levemente desfocados em segundo plano. Os usuários podem deslizar para a esquerda ou direita para “curtir” ou “descartar” o item em destaque.

• default : O layout padrão exibe os itens em uma linha horizontal, com um item em destaque no centro e uma fração dos itens adjacentes parcialmente visíveis à esquerda e à direita.

• stack: Este layout empilha os itens verticalmente, com o item em destaque no topo e os itens adjacentes parcialmente visíveis abaixo.

• layoutCardOffset={9} : é usada para definir o espaçamento horizontal entre os itens do carrossel. O valor numérico atribuído a essa propriedade especifica a distância em pixels entre as bordas dos itens adjacentes.

• ref={isCarousel} : onde usamos o hook useRef para referenciar o componente entre Parousel e Pagination

• data={data} : Aqui carregamos os dados que serão carregados no componente (CarouselCardItem)

• renderItem={CarouselCardItem}: Aqui dizemos o componete que será renderizado

• sliderWidth={390} : é a largura do seu componente pense como sendo uma moldura do componente todo

• itemWidth={390} : é a largura do item, ou seja , a largura de cada item interno do carousel . cada card interno terá o tamnaho definido aqui

• inactiveSlideShift={0} : é o deslocamento em pixels dos elementos como se fose uma sobreposição que indica quando estão inativos O valor padrão de “inactiveSlideShift” é 20, o que significa que o deslocamento dos slides inativos é de 20 unidades. Se “inactiveSlideShift” for definido como 0, o deslocamento dos slides inativos será eliminado, fazendo com que todos os slides fiquem alinhados perfeitamente.

• onSnapToItem={(index) => setIndex(index)}: Em resumo, quando o usuário desliza para um novo item no carrossel, a função “onSnapToItem” é chamada com o índice do novo item como argumento, o que aciona a atualização do estado do componente React e uma nova renderização com o novo item selecionado.

• useScrollView={false}: Determina se o carrossel deve usar um componente ScrollView para renderizar os slides ou se deve usar um FlatList.

  Pagination É um indicador visual que mostra quantos slides são e qual lide está a propriedade “pagination” pode ser personalizada para ajustar a aparência dos indicadores, incluindo a cor, o tamanho e a forma. Além disso, também é possível personalizar o estilo dos pontos ativos e inativos, ou usar outros indicadores personalizados, como setas ou barras de progresso, em vez de pontos.

• dotsLength={data.length} : Pega a quantidade de intems do array

• activeDotIndex={index}

• carouselRef={isCarousel} : é o carrossel , refenciado no hook useRef.

• dotStyle={{ Style Aqui }} : é onde estiliamos os botões de navegação

• inactiveDotOpacity={0.4} : define a opacidade dos botões

• inactiveDotScale={0.6}

• inactiveDotScale={0.6} define o tamanho dos botões , No exemplo dado, o valor 0.6 indica que a escala dos pontos indicadores inativos será de 60% da escala total. Isso significa que os pontos indicadores inativos serão menores do que o ponto ativo.

• tappableDots={true} : se eles são clicáveis ou não.

Bom esse é um tutorial que espero ter explicado bem