aretherecookies-mobile/js/modals/ImagePreviewModal.js

// @flow
import React from 'react';
import { TouchableOpacity, Image } from 'react-native';
import { ActionButton } from 'react-native-material-ui';

const backdropStyle = {
	position: 'absolute',
	top: 0,
	bottom: 0,
	left: 0,
	right: 0,
	backgroundColor: 'black',
	flexDirection: 'column',
	justifyContent: 'center',
};

const imageStyle = {
	flex: 2,
	resizeMode: 'contain',
};

type Props = {
	onClose: () => void,
	onDelete: () => void,
	imageSrc: string,
};

const ImagePreviewModal = ({ onClose, onDelete, imageSrc }: Props) => {
	return (
		<TouchableOpacity onPress={onClose} style={backdropStyle}>
			<Image style={imageStyle} source={{ uri: imageSrc }} />
			<ActionButton icon="delete" onPress={onDelete} />
		</TouchableOpacity>
	);
};
ImagePreviewModal.displayName = 'ImagePreviewModal';

export default ImagePreviewModal;