The following markdown:

- Item 1
- Item 2
- Item 3

doesn't render using this library.

I get these (non properly aligned) bullets, in Android:

when using a list:

- Wi-Fi or Cable Fast Internet in the room\*
- PC Room rentals available\*
- 24 hour Reception
- 24 hour Security Patrols
- 24 hour Currency exchange
- Free shuttle service to Bufos beach 900m (3 times daily)
- Laundry service\*

Hi - Apologies if this is obvious (and/or a weird implementation of MD) but I'm getting my MD from an API which I don't control, and the block level elements (Heading, HR, etc) are only separated by one \n, whereas it appears that this implementation of it requires two \n. (I believe they're using CommonMark)
For example, I get data like:
# Heading1 #\n## Heading2 ##\n### Heading3 ###\n

But to display properly using RNSM it appears to only work if it's
# Heading1 #\n\n## Heading2 ##\n\n### Heading3 ###\n\n

I really like this library much better than the others, but this is causing some problems. I'll start looking at the code to try to figure it out, but not sure if anyone else has encountered this and if it can be solved easily.

Thanks!

It returns an error on line 1320 of simple markdown.

Dear all,

here is my markdown:

<Markdown whitelist={['em', 'strong', 'image', 'link', 'item', 'blockQuote']}>
 The author said:{'\n'}
 > HelloWorld
</Markdown>

It seems that my markDown don't have any effect, did I do something wrong? Thanks.

Please reply with an example.

I'm curious, I've just read the package.json file and I found out that you have forked simple-markdown, can I ask you why?

Shouldn't the library use the original project as a dependency?

I'm open to send PRs if you need a hand.

Example:

<Markdown>
# AA{\n\n}
- A {\n\n}
- B{\n\n}
1. aaa{\n\n}
2. bbb
<Markdown>

Renders

I'm happy to help with a PR if you can point me to the right direction.

> firstline
> 
> lastline

produces

firstline
lastline

instead of

firstline

lastline

I have problem with nested list.
for example my string is :

- Install it yourself from source code.
  -  Popular with developers who are familiar with Unix-like systems.
- Using third-party tools.
  - There are many third-party tools and package managers for installing Go, like apt-get in Ubuntu and homebrew for Mac.

does simple-markdown support nested?

Hi, somebody...

the lib that now version can't support the ref image

For example:

![alt][1]

[1][http://...]

When I was trying to display this image

The screen seems to display only the center of the image for some reason

Is there something that I did wrong?

Hello!

I have simple React element with the following render method:

  render () {
    const bodyStyles = { fontSize: 12 }
    const titleStyles = { fontSize: 18 }

    return (
      <ScrollView style={styles.container}>
        <KeyboardAvoidingView behavior='position'>
          {
            this.props.items.map((item, index) => {
              return <View key={index} style={styles.item}>
                <Text style={styles.itemIndex}>{index + 1}</Text>
                <Markdown styles={{text: bodyStyles, heading: titleStyles, heading1: titleStyles}}>
                  # Heading
                  Ordinary text
                </Markdown>
              </View>
            })
          }
        </KeyboardAvoidingView>
      </ScrollView>
    )
  }

In this case, Heading has incorrect fontSize (12 instead of 18). I've tried without text style and with heading only, but no luck.

Used packages:

"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-native-simple-markdown": "^1.0.60-rc.3"

@CharlesMangwa , is it related to #37 ?

Just trying to parse inline code snippet like

`code`

but it produces an error:

While below renders as expected:

        <Markdown
          styles={{ text: textStyle }}
        >
          hello{'\n'}
          ---{'\n'}
          world
        </Markdown>

putting 'hr' in whitelist does not parse --- into hr

        <Markdown
          styles={{ text: textStyle }}
          whitelist={['hr']}
        >
          hello{'\n'}
          ---{'\n'}
          world
        </Markdown>

Seems like I am missing something obvious -- any advice?

I try to apply color to Paragraph. but it's not working. Other types of properties works such as backgroundColor, fontSize....

Hi,
I get this problem with my Markdown file.

Please note that with the sample in the Readme in works.

Hey,

I wanted to use this library in my app, though when I try to add it to my component it causes app to crash on android. I am using React native 0.32.1 and testing the app on Nexus 5 device.

I dont have any stacktrace of what's going on and have no idea what may be wrong. What's weird is when I turn on Remote JS debug it works fine 😟

Other plugins I am using are:

    "react-native-linear-gradient": "^1.5.14",
    "react-native-router-flux": "^3.36.0",
    "react-native-simple-markdown": "^1.0.60-rc.2",
    "react-native-splash-screen": "^1.0.9"

          <Markdown styles={markDownStyle}>
            #Try writing a link!
            {'\n\n'}
            [baidu](www.baidu.com/)  
              CLick it!
          </Markdown>

Seems it is not clickable?

try this:

[__Google__](http://www.google.com)

Setting lineHeight on text has resulted in strange heights being applied unrelated to the value supplied. The first shot is with a lineHeight added in the markdownStyles.

This is without a lineHeight value in the markdownStyles for text

If this was available anyone could add custom markdown on there backend and have it rendered properly on the front-end.

E.g I may want to bold & colour different keywords in a sentence

I can't do this by just using **Bolded word**, so I'd want to be able to add a custom match for ***Bolder and coloured word***

Thoughts? I'm not sure if this is possible as I haven't checked out the source 🤔

What is the way to load or import the markdown file in android production build?

I'm curious about it, I may make a PR for this. But I am not clear about where to start.

This example of sublist doesn't work

- One
- Two
  - Three

Note the two additional spaces in the Three item. I'm open to send PR if you can point me to the right direction.

Whenever I use a link, I either get Cannot read property 'react' of undefined when the debugger is on, or I get undefined is not an object(evaluating 'rules[ast.type][property]') when the debugger is off. This is happening with simple links, such as the ones found on http://www.markitdown.net/markdown

it is working right in version 0.39 but when I upgrade it to version 0.44.0 all the images and videos sizes get smaller.

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

As of @3b4147bd8729bb4875f0a2dbf2757e493d227cab this library is using View layout for paragraphs and all unstyled words are rendered as individual Text components. Nesting Text in View results in a lot of native controls getting rendered which is detrimental to the performance (and text rendering quality).

Is it the intention of this library to continue with that?

I'm trying to do this:

const markdownStyles = {

    image: {
        flex: 1,
    }

}

Why do i need to specify width and height?

Sent from my Google Nexus 5X using FastHub

Hi, i have a markdown, looks something like this.
And the problem is. i can't apply different colours to link and text.
For example i want to set link colour to be red, and the rest of the text should be green. What would happen is only the first word of link would be red, the rest is green.
It seems like if links and text share same style rules, text styles override all the others.

My style object:

const markdownStyles = {
  plainText : {
    color: '#424242',
  },
  link : {
    color: '#03a9f4',
  },
}

My markdown :

lorem ipsum

[Link blah blah blah][1]

  [1]: https://github.com/

Example text:

#1
* 1
* 2

The list cannot be display correctly.

I am rendering markdown with images and have a rule for a custom image component. It calculates the height of the image based on the screen width and updates the style in the image accordingly. While this works perfectly on iOS, it doesn't update the image height on Android. I can see in the console that the code works and updates the state, but somehow the visible image is not updated.

Updating image height without markdown works, so this is not the issue (I use my custom image component outside markdown and it works).

Here is my code:
Markdown rule for custom image component:

...
 <Markdown styles={markdownStyles}
            rules={{
              image: {
                react: (node, output, state) => (
                  <ArticleImage
                    key={state.key}
                    source={node.target}
                  />
                ),
              },
            }}
          >
            {this.state.articleContent}
          </Markdown>
...

const markdownStyles = {
  view: {
    backgroundColor: '#FFFFFF',
    width: width,
  },
  heading1: {
    fontSize: 24,
    color: '#000000',
    fontWeight: '400',
    paddingLeft: PADDING_RIGHT_AND_LEFT,
    paddingRight: PADDING_RIGHT_AND_LEFT,
    marginBottom: 15,
    marginTop: 10,
  },
  paragraph: {
    paddingLeft: PADDING_RIGHT_AND_LEFT,
    paddingRight: PADDING_RIGHT_AND_LEFT,
    fontSize: 16,
    color: '#000000',
    marginBottom: 20,
    lineHeight: 25,
  },
  blockQuote: {
    marginTop: 20,
    marginBottom: 20,
    paddingLeft: PADDING_RIGHT_AND_LEFT,
    paddingRight: PADDING_RIGHT_AND_LEFT,
    width: width-20,
  },
}

Custom image component:

import React, { Component } from 'react';
import { Image, Dimensions} from 'react-native';

const {height, width}  = Dimensions.get('window');

class ArticleImage extends Component {

  constructor(props) {
    super(props);
    this.state = {currentImageHeight: 0}
  }

  componentWillMount() {
    if (this.props.source != null){
      Image.getSize(this.props.source, (imageWidth, imageHeight) => {
        let aspectRatio = imageWidth / imageHeight
        let currentImageHeight = width / aspectRatio
        this.setState({currentImageHeight: currentImageHeight})
      }, (error) => {
        console.log("Failed to get image size:", error)
      });
    }
  }

  render () {
    return (
      <Image source={{uri: this.props.source}} style={{width: width, height: this.state.currentImageHeight}}/>
      );
  }
}

export default ArticleImage

I already tried just having rendering an image without any text (so just ![](URL)) and it still doesn't update the height. I tried removing all markdown styles. The only thing that works is if I set the image height statically.

Did anyone come across something similar or has an idea what else to try?

Since I have upgraded to ReactNative 0.44.0 , I am getting following error:

Any ideas how to go about it? Thanks!

The code:

        <Markdown whitelist={['em', 'strong', 'image', 'link', 'blockQuote', 'list']}>
          > You don't need HTML:{'\n'}
          > {'\n'}
          > * a markdown{'\n'}
          > * list in quotes{'\n'}
          >
        </Markdown>

The result:

Hi... I tried to render inline code but i got an error:

The text is: "prueba `inline code` xD"

I am getting standard markdown from my server as a string. I am trying to figure out if simple-markdown supports the standard line break and paragraph rules, i.e. "\n " (newline followed by 2 spaces) is a line break vs. "\n\n" is a paragraph break.

What I am observing is that "\n\n" indeed works as a paragraph break, however "\n " gives a line break followed by 2 spaces. Is this intentional or a bug. Can you please clarify.

A single line break \n somehow breaks the layout leading to very strange spaces. Expected behavior would be that it is just ignored.

I don't know which one I should choose.

From package.json

"dependencies": {
    "lodash": "^4.15.0",
    "simple-markdown": "git://github.com/CharlesMangwa/simple-markdown.git"
  },

simple-markdown is a fork of https://github.com/Khan/simple-markdown

Is there a reason for this?

Code:

  <Markdown
        style={{
          listItemBullet: { color: '#ed79db' },
          listItemText: { color: '#de6262' }
        }}>
        ###I am a list:{'\n\n\n'}
        - This is my first item{'\n\n'}
        - This is my second item{'\n\n'}
        - This is my third item{'\n\n'}
      </Markdown>

Result:

Clearly I need to fix those bullets.

Seems like the list style is not propagating correctly. Or I'm passing the wrong thing. Tried passing list:{...} as well with no luck.

Installing from the git repo and using blockquotes on Android produces this error:

Nesting of <View> withing <Text> is not supported on Android.

Hi,

I try to implement react-native-simple-markdown inside my application. Well, when I change the style, it is not applied to the text inside the markdown component.

Even if I copy paste your example, it still not working.

What can I do?

Thank you!

I've noticed that code blocks render into black view in github package and into inline code blocks in npm package.

So I've played with it and have created a view which renders it without text-wrap into horizontal scroll view.

Just want to ask if it really needed for that lib? Because for my case it must have (Gitter mobile client).

My content is coming from Contentful, and apparently contains some hidden characters at the beginning and end of a string, which mess up the rendering. I am wondering what those characters could be and how to get rid of them. Here's what is happening:

1. Including the whole body of my content:

<Markdown>
    {entry.description}
</Markdown>

Result: 
#17 April to 02 July 2017
* Test!
* Mon to Fri: 8 a.m. - 12 p.m. and 1.30 p.m. - 5 p.m.
* Sat: 9 a.m. - 1. p.m.
* Sundays closed

2. Including a substring of the content:

<Markdown>
    {entry.description.substring(0,10)}
</Markdown>

Result (now correctly formatted): 
17 April to

The weird thing is, I have a list of items rendering the same thing and option 2 makes the first one formatted, but messes up every item after that. I have tried unescaping the text using the native unescape() function and various other ways, but nothing seems to be working...

If we configure the markdown to have a text style prop like this:

{
  text: {
    color: 'black',
  },
  heading1: {
    color: 'red',
    fontSize: 20,
    fontWeight: '500',
    marginBottom: 15,
  },
}

The text color prop in the heading1 entry will be overridden. In order to customise the text color of the heading, the text entry must be removed.

PS: I know I've opened several bugs, I'll try to send PRs for them as soon as I can.

Hello! I'm trying to render Markdown from a prop

<Markdown>{this.prop.content}</Markdown>

The content is like this:

# This is my title
## Subtitle

Some text here

1. Item 1
2. Item 2

I see that you specify line breaks {'\n\n'}
What would you suggest to not have to add manually all those line breaks?

Thanks! This module is fantastic!

How would I go about centering the images rendered? I've tried both setting alignSelf on images style or to give it margin. None of these seem to be respected though.

No matter what I do, blockQuoteText takes on the color of whatever is set in the text style.