-
Notifications
You must be signed in to change notification settings - Fork 0
/
ExerciseList.tsx
81 lines (76 loc) · 2.38 KB
/
ExerciseList.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
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
import { View, Text, FlatList, TouchableOpacity, StyleSheet,Image } from 'react-native';
import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
export default function ExerciseList({ data }) {
const navigation = useNavigation();
return (
<View>
<FlatList
data={data}
numColumns={2}
keyExtractor={item => item.name}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.flatListContent}
columnWrapperStyle={styles.columnWrapper}
renderItem={({ item, index }) => (
<ExerciseCard navigation={navigation} index={index} item={item} />
)}
/>
</View>
);
}
const ExerciseCard = ({ item, navigation, index }) => {
return (
<TouchableOpacity
onPress={() => navigation.navigate('ExerciseDetails', { item })}
style={styles.touchableOpacity}
>
<View style={styles.cardContainer}>
<Image
source={{ uri: item.gifUrl }}
contentFit="cover"
style={styles.cardImage}
/>
</View>
<Text style={styles.exerciseText}>
{item?.name?.length > 20 ? item.name.slice(0, 20) + '...' : item.name}
</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
flatListContent: {
paddingBottom: 60,
paddingTop: 20,
},
columnWrapper: {
justifyContent: 'space-between',
},
touchableOpacity: {
paddingVertical: 12,
paddingHorizontal: 8,
marginBottom: 20,
},
cardContainer: {
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 2,
borderRadius: 25,
},
cardImage: {
width: wp(44),
height: wp(52),
borderRadius: 25,
},
exerciseText: {
fontSize: hp(1.7),
color: '#4B5563', // neutral-700
fontWeight: '600',
marginLeft: 8,
letterSpacing: 0.5,
marginTop: 8,
},
});