Untitled

import React, { Component, createRef } from "react";
import {
  View,
  Image,
  ScrollView,
  StyleSheet,
  Dimensions,
  NativeSyntheticEvent,
  NativeScrollEvent,
} from "react-native";

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

interface ImageItem {
  url: string | undefined;
  //   url: string | undefined;
  attributes: {
    images: [];
  };
}

interface ImageCarouselProps {
  images: { url: string }[];
  interval?: number;
}

interface ImageCarouselState {
  activeIndex: number;
}

class ImageCarousel extends Component<ImageCarouselProps, ImageCarouselState> {
  scrollViewRef = createRef<ScrollView>();
  scrollInterval?: NodeJS.Timeout;

  state: ImageCarouselState = {
    activeIndex: 0,
  };

  componentDidMount() {
    this.startAutoScroll();
  }

  componentWillUnmount() {
    this.stopAutoScroll();
  }

  startAutoScroll = () => {
    const { images, interval = 3000 } = this.props;
    this.scrollInterval = setInterval(() => {
      let nextIndex = this.state.activeIndex + 1;
      if (nextIndex >= images.length) {
        nextIndex = 0; // Loop back to the first image
      }
      this.setState({ activeIndex: nextIndex }, () => {
        this.scrollViewRef.current?.scrollTo({
          x: nextIndex * width,
          animated: true,
        });
      });
    }, interval);
  };

  stopAutoScroll = () => {
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval);
    }
  };

  handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    const contentOffsetX = event.nativeEvent.contentOffset.x;
    const index = Math.round(contentOffsetX / width);
    this.setState({ activeIndex: index });
  };

  render() {
    const { images } = this.props;
    const { activeIndex } = this.state;

    return (
      <View>
        <ScrollView
          ref={this.scrollViewRef}
          horizontal
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onScroll={this.handleScroll}
          scrollEventThrottle={16}
        >
          {images.map((item: any, index: number) => (
            <View key={index} style={styles.imageContainer}>
              <Image source={{ uri: item?.url }} style={styles.imageStyle} />
            </View>
          ))}
        </ScrollView>

        <View style={styles.paginationContainer}>
          {images.map((_, index) => (
            <View
              key={index}
              style={[
                styles.paginationDot,
                { opacity: index === activeIndex ? 1 : 0.3 },
              ]}
            />
          ))}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  imageContainer: {
    width: width,
    justifyContent: "center",
    alignItems: "center",
  },
  imageStyle: {
    width: "100%",
    height: 200, // Adjust this height based on your needs
    resizeMode: "cover",
  },
  paginationContainer: {
    flexDirection: "row",
    justifyContent: "center",
    marginTop: 10,
  },
  paginationDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: "black",
    marginHorizontal: 4,
  },
});

export default ImageCarousel;