Images rendering incorrect

[mtt87]

Hi, I noticed that if I try to style the paragraph with lineHeight or changing the fontSize I get images above the text and they are incorrectly rendered.

Do you have an idea why this is happening?

Thank you 😄

Without the lineHeight property

[CharlesMangwa]

Hi @mtt87! I just tried to reproduce your bug with 2 images, but I couldn't, here's the output:

Did you apply another style that could be interfering with it?

[mtt87]

These are the styles I'm applying:

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,
  },
};

[CharlesMangwa]

One of the reasons could be resizeMode. For the time being, you have to set it as a normal rule like image or paragraph. But by default it's set at contain so: you don't need to define it there.
Also: did you try to remove the flex: 1? Considering that you've already set a width & height, this is maybe not useful. Tell me if it helps!

[mtt87]

I'm gonna try this tomorrow, sorry for the delay 😄 I was building other features

[mtt87]

No way, still it happens (only with lineHeight)
As reference this is the full code of the page

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;

[CharlesMangwa]

Hi @mtt87! Sorry for the delay! Do you still have the same problem?

[mtt87]

@CharlesMangwa Yes in the end I've submitted the app without that change.
Can you spot something strange in my code? 😄

[CharlesMangwa]

@mtt87 I didn't spot anything that could cause this issue 😕… I'll try again to reproduce it and fix it asap!

[CharlesMangwa]

Closing issue #12