Improve image modal/preview (#111)

app/containers/message/Card.js

@@ -37,6 +37,12 @@ export default class Cards extends React.PureComponent {
 		});
 	}
 
+	getDescription() {
+		if (this.props.data.description) {
+			return <Text style={{ alignSelf: 'center', fontWeight: 'bold' }}>{this.props.data.description}</Text>;
+		}
+	}
+
 	getImage() {
 		return (
 			<View>
@@ -50,7 +56,7 @@ export default class Cards extends React.PureComponent {
 						</CardImage>
 						<CardContent>
 							<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
-							<Text style={{ alignSelf: 'center', fontWeight: 'bold' }}>{this.props.data.description}</Text>
+							{this.getDescription()}
 						</CardContent>
 					</Card>
 				</TouchableOpacity>

app/containers/message/PhotoModal.js

@@ -1,26 +1,25 @@
 import React from 'react';
-import { ScrollView, View, Dimensions, Text } from 'react-native';
+import { ScrollView, View, Text, TouchableWithoutFeedback } from 'react-native';
 import { CachedImage } from 'react-native-img-cache';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
 
-const deviceWidth = Dimensions.get('window').width;
-
 const styles = {
 	imageWrapper: {
-		alignItems: 'stretch'
+		alignItems: 'stretch',
+		flex: 1
 	},
 	image: {
-		width: deviceWidth,
-		height: deviceWidth
+		flex: 1
 	},
 	titleContainer: {
 		width: '100%',
 		alignItems: 'center',
-		marginBottom: 15
+		marginVertical: 10
 	},
 	title: {
 		color: '#ffffff',
+		textAlign: 'center',
 		fontSize: 16,
 		fontWeight: '600'
 	}
@@ -43,17 +42,21 @@ export default class extends React.PureComponent {
 				onBackdropPress={onClose}
 				onBackButtonPress={onClose}
 			>
-				<View style={styles.titleContainer}>
-					<Text style={styles.title}>{title}</Text>
-				</View>
+				<TouchableWithoutFeedback onPress={onClose}>
+					<View style={styles.titleContainer}>
+						<Text style={styles.title}>{title}</Text>
+					</View>
+				</TouchableWithoutFeedback>
 				<View style={styles.imageWrapper}>
-					<ScrollView contentContainerStyle={styles.imageWrapper} maximumZoomScale={1.5}>
-						<CachedImage
-							style={styles.image}
-							source={{ uri: encodeURI(image) }}
-							mutable
-							resizeMode='contain'
-						/>
+					<ScrollView contentContainerStyle={styles.imageWrapper} maximumZoomScale={5}>
+						<TouchableWithoutFeedback onPress={onClose}>
+							<CachedImage
+								style={styles.image}
+								source={{ uri: encodeURI(image) }}
+								mutable
+								resizeMode='contain'
+							/>
+						</TouchableWithoutFeedback>
 					</ScrollView>
 				</View>
 			</Modal>