Untitled

import React, { useState } from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

const BigSlider = ({ data = [] }) => {
  const [activeSlide, setActiveSlide] = useState(0);

  const handleSlideChange = (index) => {
    setActiveSlide(index);
  };

  return (
    <View style={styles.container}>
      <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={(event) => {
          const contentOffset = event.nativeEvent.contentOffset;
          const slideIndex = Math.round(contentOffset.x / 400);
          setActiveSlide(slideIndex);
        }}
      >
        {data.map((slide, index) => (
          <View key={slide.id} style={styles.slide}>
            <View style={styles.imageContainer}>
              <Image source={{ uri: slide.appImageUrl }} style={styles.image} />
            </View>
          </View>
        ))}
      </ScrollView>
      <View style={styles.dotContainer}>
        {data.map((_, index) => (
          <View
            key={index}
            style={[
              styles.dot,
              activeSlide === index ? styles.activeDot : styles.notActiveDot,
            ]}
          />
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginBottom: 20,
    marginTop: 10,
  },
  slide: {
    width: 400,
    height: 200,
    borderRadius: 20,
    marginHorizontal: 15,
    overflow: 'hidden',
  },
  imageContainer: {
    flex: 1,
    borderRadius: 20,
    shadowColor: '#000',
    shadowOpacity: 1,
    shadowRadius: 4,
    shadowOffset: {
      width: 0,
      height: 4,
    },
    elevation: 4, // Add this for Android shadow
  },
  image: {
    flex: 1,
    borderRadius: 20,
    resizeMode: 'cover', // Add this to maintain image aspect ratio
  },
  dotContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 10,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#98CB3C',
    marginHorizontal: 4,
  },
  activeDot: {
    backgroundColor: '#D63285',
  },
  notActiveDot: {
    backgroundColor: '#98CB3C',
  },
});

export default BigSlider;