-
Notifications
You must be signed in to change notification settings - Fork 0
/
Carousel.tsx
41 lines (37 loc) · 962 Bytes
/
Carousel.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { View, Text, ScrollView, Image, StyleSheet } from "react-native";
type Carousel = {
title: string;
photos: any[];
};
const Carousel = ({ title, photos }: Carousel) => {
return (
<View style={styles.container}>
<Text style={styles.title}>{title}</Text>
<ScrollView
horizontal
contentContainerStyle={styles.images}
showsHorizontalScrollIndicator={false}
snapToAlignment="start"
snapToInterval={250 + 15}
decelerationRate="fast"
>
{photos.map((photo) => (
<Image key={photo.id} source={photo.image} style={styles.image} />
))}
</ScrollView>
</View>
);
};
export default Carousel;
const styles = StyleSheet.create({
container: {
marginVertical: 10,
},
title: {
padding: 15,
fontWeight: "700",
fontSize: 20,
},
images: { gap: 15, paddingHorizontal: 20 },
image: { width: 250, height: 150, borderRadius: 20 },
});