-
Notifications
You must be signed in to change notification settings - Fork 0
/
ImageCard.jsx
50 lines (42 loc) · 1.09 KB
/
ImageCard.jsx
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
import { Pressable, StyleSheet } from "react-native";
import { Image } from "expo-image";
import { getImageSize, wp } from "../heplers/common";
import { theme } from "../constants/theme";
const ImageCard = ({ router, item, index, columns }) => {
const isLastInRow = () => {
return (index + 1) % columns === 0;
};
const getDynamicHeight = () => {
let { imageWidth: width, imageHeight: height } = item;
return { height: getImageSize(height, width) };
};
return (
<Pressable
onPress={() =>
router.push({ pathname: "home/image", params: { ...item } })
}
style={styles.warpper}
>
<Image
style={[styles.image, getDynamicHeight()]}
source={item?.webformatURL}
transition={100}
/>
</Pressable>
);
};
export default ImageCard;
const styles = StyleSheet.create({
warpper: {
backgroundColor: theme.colors.grayBG,
borderRadius: theme.radius.xl,
borderCurve: "continuous",
overflow: "hidden",
marginHorizontal: wp(1),
marginBottom: wp(1.5),
},
image: {
height: 300,
width: "100%",
},
});