43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Image, TouchableHighlight } from 'react-native';
|
|
import { useSelector } from 'react-redux';
|
|
import { useSafeAreaFrame } from 'react-native-safe-area-context';
|
|
import { useImageDimensions } from '@react-native-community/hooks';
|
|
import { Meme } from '../../../database';
|
|
import { RootState } from '../../../state';
|
|
|
|
const MemesGridItem = ({
|
|
meme,
|
|
index,
|
|
focusMeme,
|
|
}: {
|
|
meme: Meme;
|
|
index: number;
|
|
focusMeme: (index: number) => void;
|
|
}) => {
|
|
const { width } = useSafeAreaFrame();
|
|
const gridColumns = useSelector(
|
|
(state: RootState) => state.settings.gridColumns,
|
|
);
|
|
|
|
const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
|
|
|
|
if (loading || error || !dimensions) return <></>;
|
|
|
|
return (
|
|
<TouchableHighlight onPress={() => focusMeme(index)}>
|
|
<Image
|
|
source={{ uri: meme.uri }}
|
|
style={[
|
|
{
|
|
width: (width * 0.92 - 5) / gridColumns,
|
|
height: (width * 0.92 - 5) / gridColumns,
|
|
},
|
|
]}
|
|
/>
|
|
</TouchableHighlight>
|
|
);
|
|
};
|
|
|
|
export default MemesGridItem;
|