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;