52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useNavigation, NavigationProp } from '@react-navigation/native';
|
|
import { Meme } from '../../database';
|
|
import { ROUTE, RootStackParamList } from '../../types';
|
|
import { Card } from 'react-native-paper';
|
|
import { Image, StyleSheet } from 'react-native';
|
|
import { useDimensions } from '../../contexts';
|
|
|
|
const memeCardStyles = StyleSheet.create({
|
|
card: {
|
|
margin: 5,
|
|
},
|
|
});
|
|
|
|
const MemeCard = ({ meme }: { meme: Meme }) => {
|
|
const { navigate } = useNavigation<NavigationProp<RootStackParamList>>();
|
|
const { dimensions } = useDimensions();
|
|
|
|
const [imageWidth, setImageWidth] = useState<number>();
|
|
const [imageHeight, setImageHeight] = useState<number>();
|
|
|
|
Image.getSize(meme.uri, (width, height) => {
|
|
const paddedWidth = (dimensions.width * 0.92) / 2 - 10;
|
|
setImageWidth(paddedWidth);
|
|
setImageHeight((paddedWidth / width) * height);
|
|
});
|
|
|
|
return (
|
|
<>
|
|
{imageWidth && imageHeight && (
|
|
<Card
|
|
onPress={() =>
|
|
navigate(ROUTE.EDIT_MEME, { id: meme.id.toHexString() })
|
|
}
|
|
style={memeCardStyles.card}>
|
|
<Card.Cover
|
|
source={{ uri: meme.uri }}
|
|
style={{ width: imageWidth, height: imageHeight }}
|
|
/>
|
|
<Card.Title
|
|
title={meme.title}
|
|
titleVariant="titleSmall"
|
|
titleNumberOfLines={3}
|
|
/>
|
|
</Card>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MemeCard;
|