Images rendering incorrect about react-native-simple-markdown HOT 9 CLOSED

const stylesMarkdown = {
  image: {
    width: Dimensions.get('window').width - 30,
    height: 300,
    resizeMode: 'contain',
    marginTop: 15,
    marginBottom: 15,
    flex: 1,
  },
  paragraph: {
    fontFamily: 'Roboto',
    // fontSize: 14,
    // lineHeight: 19,
  },
};

import React from 'react';
import {
  StyleSheet,
  Text,
  ScrollView,
  Dimensions,
} from 'react-native';
import Markdown from 'react-native-simple-markdown';
import moment from 'moment';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
    marginTop: 65,
    marginBottom: 55,
    flexDirection: 'column',
  },
  title: {
    textAlign: 'center',
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 15,
    color: '#333',
  },
});

const stylesMarkdown = {
  image: {
    width: Dimensions.get('window').width - 30,
    height: 300,
    marginTop: 15,
    marginBottom: 15,
  },
  paragraph: {
    fontFamily: 'Roboto',
    fontSize: 15,
    // lineHeight: 19,
  },
};

const SingleEvent = ({ markdown, eventData }) =>
  <ScrollView style={styles.container}>
    <Text style={styles.title}>
      {eventData.title}
    </Text>
    <Text style={{ textAlign: 'center', fontSize: 16, color: '#555' }}>
      {moment(eventData.event_start, 'YYYY-MM-DD HH:mm:ss').format('DD MMM HH:mm')}
    </Text>
    <Text style={{ textAlign: 'center', fontSize: 16, marginBottom: 20, color: '#555' }}>
      {eventData.venue_name}
    </Text>
    <Markdown styles={stylesMarkdown}>
      {markdown}
    </Markdown>
  </ScrollView>;

SingleEvent.propTypes = {
  markdown: React.PropTypes.string,
  eventData: React.PropTypes.shape({
    title: React.PropTypes.string.isRequired,
    event_start: React.PropTypes.string.isRequired,
    venue_name: React.PropTypes.string.isRequired,
  }),
};

export default SingleEvent;