Newer
Older
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, {useRef, useState} from 'react';
import {
StyleSheet,
Text,
TouchableOpacity,
View,
Dimensions,
ImageBackground,
} from 'react-native';
import Carousel from 'react-native-anchor-carousel';
import SimplePaginationDot from './SimplePaginationDot.js';
const {width: windowWidth} = Dimensions.get('window');
const data = [
{
uri: 'https://i.imgur.com/GImvG4q.jpg',
},
{
uri: 'https://i.imgur.com/Pz2WYAc.jpg',
},
{
uri: 'https://i.imgur.com/IGRuEAa.jpg',
},
{
uri: 'https://i.imgur.com/fRGHItn.jpg',
},
{
uri: 'https://i.imgur.com/WmenvXr.jpg',
},
];
const INITIAL_INDEX = 0;
export default function ImageCarousel(props) {
const carouselRef = useRef(null);
const [currentIndex, setCurrentIndex] = useState(INITIAL_INDEX);
function handleCarouselScrollEnd(item, index) {
setCurrentIndex(index);
}
function renderItem({item, index}) {
const {uri} = item;
return (
<TouchableOpacity
activeOpacity={1}
style={styles.item}
onPress={() => {
carouselRef.current.scrollToIndex(index);
}}>
<ImageBackground source={{uri: uri}} style={styles.imageBackground}>
<View style={styles.rightTextContainer}>
<Text style={styles.rightText}>Lorem</Text>
</View>
</ImageBackground>
</TouchableOpacity>
);
}
return (
<View style={styles.container}>
<Carousel
style={styles.carousel}
data={data}
renderItem={renderItem}
inActiveOpacity={0.3}
containerWidth={windowWidth}
onScrollEnd={handleCarouselScrollEnd}
ref={carouselRef}
/>
<SimplePaginationDot currentIndex={currentIndex} length={data.length} />
</View>
);
}
const styles = StyleSheet.create({
container: {backgroundColor: '#141518', paddingVertical: 20},
carousel: {
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
backgroundColor: '#141518',
aspectRatio: 1.5,
flexGrow: 0,
marginBottom: 20,
},
item: {
borderWidth: 2,
backgroundColor: 'white',
flex: 1,
borderRadius: 5,
borderColor: 'white',
elevation: 3,
},
imageBackground: {
flex: 2,
backgroundColor: '#EBEBEB',
borderWidth: 5,
borderColor: 'white',
},
rightTextContainer: {
marginLeft: 'auto',
marginRight: -2,
backgroundColor: 'rgba(49, 49, 51,0.5)',
padding: 3,
marginTop: 3,
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
},
rightText: {color: 'white'},
titleText: {
fontWeight: 'bold',
fontSize: 18,
},
contentText: {
marginTop: 10,
fontSize: 12,
},
});