verdnatura-chat/app/presentation/ImageViewer/ImageViewer.ios.tsx

import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';

import { ImageComponent } from './ImageComponent';
import { themes } from '../../constants/colors';

const styles = StyleSheet.create({
	scrollContent: {
		width: '100%',
		height: '100%'
	},
	image: {
		flex: 1
	}
});

interface IImageViewer {
	uri: string;
	imageComponentType: string;
	width: number;
	height: number;
	theme: string;
}

export const ImageViewer = ({
	uri, imageComponentType, theme, width, height, ...props
}: IImageViewer) => {
	const backgroundColor = themes[theme].previewBackground;
	const Component = ImageComponent(imageComponentType);
	return (
		// @ts-ignore
		<ScrollView
			style={{ backgroundColor }}
			contentContainerStyle={[
				styles.scrollContent,
				width && { width },
				height && { height }
			]}
			showsHorizontalScrollIndicator={false}
			showsVerticalScrollIndicator={false}
			maximumZoomScale={2}
		>
			<Component
				style={styles.image}
				resizeMode='contain'
				source={{ uri }}
				{...props}
			/>
		</ScrollView>
	);
};