Antes de criar o carrossel vamos criar o título

Dentro da tela de Product em si, vamos criar alguns estilos para criar essa estrutura de título no styled

export const Title = styled.Text`
  font-size: 22px;
  color: ${({ theme }) => theme.colors.primaryText};
  margin: 0px 30px;
  font-weight: bold;
`;

export const SubTitleContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  margin: 0 30px;
`;

export const SubTitle = styled.Text`
  font-size: 14px;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

Com elas criadas, podemos já criar aqui o título e subtítulos que vamos utilizar

return (
  <Container>
    <BackArrow marginLeft={30} />
    <Title>Playstation 4 com dois controles</Title>
    <SubTitleContainer>
      <SubTitle>Publicado em 10/05/23</SubTitle>
      <SubTitle>Recife, PE</SubTitle>
    </SubTitleContainer>
  </Container>
);

Agora, partindo para o carrossel, vamos criar uma pasta chamada "Product" dentro de "components".

Dentro de "Product", criaremos uma pasta chamada "Carousel", e colocaremos os arquivos "index.tsx" e "styled.ts".

Vamos começar criando o container, que vai armazenar dentro dele o ProductImage

import styled from "styled-components/native";

export const Container = styled.View`
  width: 100%;
  padding-left: 20px;
`;

Em seguida, para criar o componente "ProductImage", precisaremos das dimensões da janela do dispositivo. Vamos então, importamos "Dimensions" do "react-native". Usaremos essas dimensões para calcular a largura e a altura da imagem da imagem.

import styled from "styled-components/native";
import { Dimensions } from "react-native";

const { width } = Dimensions.get("window");

export const Container = styled.View`
  width: 100%;
  padding-left: 20px;
`;

export const ProductImage = styled.Image`
  width: ${width * 0.8 - 30}px;
  height: ${width / 2}px;
  margin: 20px 10px;
  border-radius: 5px;
`;

Agora que terminamos o arquivo "styled.ts", vamos manipular o arquivo "index.tsx" dentro da pasta "Carousel".

Nós vamos importar Dimensions, FlatList, ListRenderItem já que vamos utilizar e também o width, para aqui também pegarmos a largura da tela.

import React from "react";
import { Dimensions, FlatList, ListRenderItem } from "react-native";
import { Container, ProductImage } from "./styled";

const { width } = Dimensions.get("window");

Vamos em seguida criar as tipagens que iremos utilizar para pegar as props.

export interface Image {
  filename: string;
  url: string;
}

export interface CarouselProps {
  images: Image[];
}

Vamos agora criar o “Crousel” em si, vamos receber “images” para exibir no nosso carrossel e vamos colocar o tipo criado.

Vamos também criar o “snapToOffsets”, que é um método onde usamos cálculo para deixar sempre posicionado no centro a imagem que está sendo exibida.

const Carousel = ({ images }: CarouselProps) => {
  const renderItem: ListRenderItem<Image> = ({ item }) => (
    <ProductImage source={{ uri: item.url }} />
  );

  return (
    <Container>
      <FlatList
        data={images}
        keyExtractor={(item: Image) => item.url}
        renderItem={renderItem}
        showsHorizontalScrollIndicator={false}
        horizontal
        snapToAlignment={"start"}
        scrollEventThrottle={16}
        decelerationRate={"fast"}
        snapToOffsets={[...Array(images.length)].map(
          (x, i) => i * (width * 0.8 - 40) + (i - 1) * 40
        )}
      />
    </Container>
  );
};

export default Carousel;

Antes de usarmos o Carousel vamos estar criando o array de images que iremos mandar para serem exibidas lá.

import React from "react";
import { Container, SubTitle, SubTitleContainer, Title } from "./styled";
import BackArrow from "../../components/common/BackArrow";
import Carousel from "../../components/Product/Carousel";

const images = [
  {
    filename: "image1",
    url: "<https://files.tecnoblog.net/wp-content/uploads/2020/11/ps5-review-5-1060x596.jpg>",
  },
  {
    filename: "image2",
    url: "<https://classic.exame.com/wp-content/uploads/2021/05/ps5-the-squad-foto-1.jpg?quality=70&strip=info&w=984>",
  },
  {
    filename: "image3",
    url: "<https://cdn.awsli.com.br/1824/1824967/produto/186131938/67bd1ea8d4.jpg>",
  },
  {
    filename: "image4",
    url: "<https://cdn.awsli.com.br/600x700/1734/1734513/produto/97494476/030cda119d.jpg>",
  },
];

Agora vamos utilizar o componente "Carousel" que acabamos de criar dentro do componente "Product".

const Product = () => {
  return (
    <Container>
      <BackArrow marginLeft={30} />
      <Title>Playstation 5 com dois controles</Title>
      <SubTitleContainer>
        <SubTitle>Publicado em 10/05/23</SubTitle>
        <SubTitle>Recife, PE</SubTitle>
      </SubTitleContainer>

      <Carousel images={images} />
    </Container>
  );
};

export default Product;

Com isso, finalizamos o componente de carrossel da nossa aplicação.