-
Notifications
You must be signed in to change notification settings - Fork 0
/
Pagination.js
85 lines (81 loc) · 2.01 KB
/
Pagination.js
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React from 'react';
import {Animated, Dimensions, View, StyleSheet, Pressable} from 'react-native';
const {width} = Dimensions.get('window');
const itemSize = 20;
const activeItemSize = itemSize + 6;
const itemSpacing = 8;
const Pagination = ({items, scrollAnimation, scrollRef}) => {
return (
<View style={styles.pagination}>
<View style={styles.paginationInner}>
<Animated.View
style={[
styles.activeItem,
{
transform: [
{
translateX: scrollAnimation.interpolate({
inputRange: items.map((_, i) => width * i),
outputRange: items.map(
(_, i) => i * (itemSize + itemSpacing),
),
}),
},
],
},
]}
/>
{items.map(({id}, index) => (
<Pressable
key={id}
onPress={() => {
scrollRef.current.scrollToOffset({
animated: true,
offset: width * index,
});
}}>
<View
style={[
styles.item,
index === items.length - 1 ? styles.lastItem : null,
]}
/>
</Pressable>
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
pagination: {
position: 'absolute',
alignItems: 'center',
width,
height: itemSize,
bottom: 60,
},
paginationInner: {
flexDirection: 'row',
},
item: {
width: itemSize,
height: itemSize,
backgroundColor: '#fff',
borderRadius: itemSize,
marginRight: itemSpacing,
},
lastItem: {
marginRight: 0,
},
activeItem: {
position: 'absolute',
left: (itemSize - activeItemSize) / 2,
top: (itemSize - activeItemSize) / 2,
width: activeItemSize,
height: activeItemSize,
borderRadius: activeItemSize,
borderWidth: 1,
borderColor: '#fff',
},
});
export default Pagination;