39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { ImageZoom } from '@likashefqet/react-native-image-zoom';
|
|
import { Meme } from '../../database';
|
|
import { View } from 'react-native';
|
|
import styles from '../../styles';
|
|
import LoadingView from '../loadingView';
|
|
import { useSafeAreaFrame } from 'react-native-safe-area-context';
|
|
import { useImageDimensions } from '@react-native-community/hooks';
|
|
|
|
const MemeViewItem = ({ meme }: { meme: Meme }) => {
|
|
const { height, width } = useSafeAreaFrame();
|
|
|
|
const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
|
|
|
|
if (loading || error || !dimensions) return <LoadingView />;
|
|
|
|
return (
|
|
<View style={[{ width, height }, styles.center]}>
|
|
<ImageZoom
|
|
source={{ uri: meme.uri }}
|
|
style={
|
|
dimensions.aspectRatio > width / (height - 128)
|
|
? {
|
|
width,
|
|
height: width / (dimensions.width / dimensions.height),
|
|
}
|
|
: {
|
|
width: (height - 128) * (dimensions.width / dimensions.height),
|
|
height: height - 128,
|
|
}
|
|
}
|
|
minScale={0.5}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default MemeViewItem;
|