Updating image height dynamically doesn't work on Android about react-native-simple-markdown HOT 4 CLOSED

I ran into the same problem as you, the issue is the image is getting put into a Text component (see here) - the markdown parser outputs the image inside a paragraph

React native supports nested views inside the Text component, but only on iOS and only if the View has a height and width

I solved this by overriding the paragraph rule and rendering the paragraph as a View rather than Text

<Markdown
	styles={styles}
	rules={{
		paragraph: {
			react: (node, output, state) => {
				return (<View style={styles.paragraph} key={state.key}>{output(node.content, state)}</View>)
			}
		},
		image: {
			react: (node, output, state) => (
				<ImageComponent
					key={state.key}
					src={node.target}
				/>
			),
		},
	}}>
	{this.props.children}
</Markdown>

and the styles:

paragraph: {
	marginBottom: 10,
	flexWrap: 'wrap',
	flexDirection: 'row',
	alignItems: 'flex-start',
	justifyContent: 'flex-start',
},

from react-native-simple-markdown.

thanks @pippinthegreat
In the meantime I solved the problem by writing the aspect ratio of the images in the URL (it's possible because I only load images from my server). But this is good to know if I change this in the future.

But actually it helps me with another issue I was having: When setting a different line height in the text, in Android it breaks the images (they just go under the text). I believe this is also because the image is rendered as Text. I will render it as View and see if this solves my issue.

from react-native-simple-markdown.

Hi guys! Sorry for the late reply, hope you fixed your problem! I've been really busy this last couple of days, but I'm planning something new within the next weeks that should resolve this kind of issues 👍

Closing issue #22

from react-native-simple-markdown.

Sounds good. Post here to let me know when you've got something new 👍 And keep up the good work!

from react-native-simple-markdown.