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
|
import React from 'react';
import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native';
import {SCREEN_WIDTH, normalize} from '../../utils';
import LinearGradient from 'react-native-linear-gradient';
import {BADGE_GRADIENT_FIRST, BADGE_GRADIENT_REST} from '../../constants';
import {TouchableOpacity} from 'react-native-gesture-handler';
interface BadgeItemProps {
title: string;
resourcePath: ImageSourcePropType;
index: Number;
selected: boolean;
onSelection: (ikey: string) => void;
}
const BadgeItem: React.FC<BadgeItemProps> = ({
title,
resourcePath,
selected,
index,
onSelection,
}) => {
return (
<TouchableOpacity onPress={() => onSelection(title)}>
<LinearGradient
colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
useAngle={true}
angle={136.69}
style={styles.item}>
<View
style={
selected ? styles.selectedDetailContainer : styles.detailContainer
}>
<Image source={resourcePath} style={styles.imageStyles} />
<View style={styles.textContainer}>
<Text style={styles.title}>{title}</Text>
</View>
</View>
</LinearGradient>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
item: {
width: SCREEN_WIDTH / 3 - 20,
height: SCREEN_WIDTH / 3 - 20,
marginLeft: 15,
marginBottom: 12,
borderRadius: 8,
},
detailContainer: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 3,
borderRadius: 8,
borderColor: 'transparent',
},
selectedDetailContainer: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 3,
borderColor: 'white',
borderRadius: 8,
},
imageStyles: {
width: '31%',
height: '31%',
marginTop: '11%',
},
textContainer: {marginTop: '16%'},
title: {
fontSize: normalize(15),
fontWeight: '500',
lineHeight: normalize(17.9),
textAlign: 'center',
color: 'white',
marginHorizontal: '2%',
},
});
export default BadgeItem;
|
