46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useNavigation, NavigationProp } from '@react-navigation/native';
|
|
import { Image, TouchableHighlight, View } from 'react-native';
|
|
import { useSelector } from 'react-redux';
|
|
import { Meme } from '../../../database';
|
|
import { ROUTE, RootStackParamList } from '../../../types';
|
|
import { useDimensions } from '../../../contexts';
|
|
import { RootState } from '../../../state';
|
|
|
|
const MemesGridItem = ({ meme }: { meme: Meme }) => {
|
|
const { navigate } = useNavigation<NavigationProp<RootStackParamList>>();
|
|
const { dimensions } = useDimensions();
|
|
const gridColumns = useSelector(
|
|
(state: RootState) => state.settings.gridColumns,
|
|
);
|
|
|
|
const [imageWidth, setImageWidth] = useState<number>();
|
|
const [imageHeight, setImageHeight] = useState<number>();
|
|
|
|
Image.getSize(meme.uri, () => {
|
|
const paddedWidth = (dimensions.width * 0.92 - 5) / gridColumns;
|
|
setImageWidth(paddedWidth);
|
|
setImageHeight(paddedWidth);
|
|
});
|
|
|
|
return (
|
|
<>
|
|
{imageWidth && imageHeight && (
|
|
<View>
|
|
<TouchableHighlight
|
|
onPress={() =>
|
|
navigate(ROUTE.EDIT_MEME, { id: meme.id.toHexString() })
|
|
}>
|
|
<Image
|
|
source={{ uri: meme.uri }}
|
|
style={[{ width: imageWidth, height: imageHeight }]}
|
|
/>
|
|
</TouchableHighlight>
|
|
</View>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MemesGridItem;
|