Image markdown

app/containers/Sidebar.js

@@ -8,7 +8,6 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import database from '../lib/realm';
 import { selectServerRequest } from '../actions/server';
 import { logout } from '../actions/login';
-import { appStart } from '../actions';
 import Avatar from '../containers/Avatar';
 import Status from '../containers/status';
 import Touch from '../utils/touch';

app/containers/message/Image.js

@@ -3,20 +3,10 @@ import React from 'react';
 import FastImage from 'react-native-fast-image';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
+
 import PhotoModal from './PhotoModal';
 import Markdown from './Markdown';
-
-const styles = StyleSheet.create({
-	button: {
-		flex: 1,
-		flexDirection: 'column'
-	},
-	image: {
-		width: 320,
-		height: 200
-		// resizeMode: 'cover'
-	}
-});
+import styles from './styles';
 
 @connect(state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
@@ -52,7 +42,7 @@ export default class extends React.PureComponent {
 				<TouchableOpacity
 					key='image'
 					onPress={() => this._onPressButton()}
-					style={styles.button}
+					style={styles.imageContainer}
 				>
 					<FastImage
 						style={styles.image}

app/containers/message/Markdown.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Platform } from 'react-native';
+import { Text, Platform, Image } from 'react-native';
 import PropTypes from 'prop-types';
 import { emojify } from 'react-emojione';
 import { connect } from 'react-redux';
@@ -66,6 +66,10 @@ export default class Markdown extends React.Component {
 						return null;
 					},
 					blocklink: () => {},
+					image: node => (
+						// TODO: should use Image component
+						<Image key={node.key} style={styles.inlineImage} source={{ uri: node.attributes.src }} />
+					),
 					...rules
 				}}
 				style={{

app/containers/message/styles.js

@@ -107,5 +107,19 @@ export default StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'flex-start',
 		justifyContent: 'flex-start'
+	},
+	imageContainer: {
+		flex: 1,
+		flexDirection: 'column'
+	},
+	image: {
+		width: '100%',
+		maxWidth: 400,
+		height: 300
+	},
+	inlineImage: {
+		width: 300,
+		height: 300,
+		resizeMode: 'contain'
 	}
 });