charlesmangwa / react-native-simple-markdown Goto Github PK
View Code? Open in Web Editor NEW๐ React Native Markdown component (iOS & Android).
Home Page: https://www.npmjs.com/package/react-native-simple-markdown
License: MIT License
๐ React Native Markdown component (iOS & Android).
Home Page: https://www.npmjs.com/package/react-native-simple-markdown
License: MIT License
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.
I try to apply color to Paragraph. but it's not working. Other types of properties works such as backgroundColor, fontSize....
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!
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.
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?
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"
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.
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?
<Markdown styles={markDownStyle}>
#Try writing a link!
{'\n\n'}
[baidu](www.baidu.com/)
CLick it!
</Markdown>
Seems it is not clickable?
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 ?
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!
A single line break \n
somehow breaks the layout leading to very strange spaces. Expected behavior would be that it is just ignored.
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).
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?
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:
<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
<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...
try this:
[__Google__](http://www.google.com)
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.
What is the way to load or import the markdown file in android production build?
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?
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 ๐ค
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, 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/
> firstline
>
> lastline
produces
firstline
lastline
instead of
firstline
lastline
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!
Example text:
#1
* 1
* 2
The list cannot be display correctly.
I'm curious about it, I may make a PR for this. But I am not clear about where to start.
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
Installing from the git repo and using blockquotes on Android produces this error:
Nesting of <View> withing <Text> is not supported on Android.
I don't know which one I should choose.
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'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
The following markdown:
- Item 1
- Item 2
- Item 3
doesn't render using this library.
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.
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.
No matter what I do, blockQuoteText
takes on the color of whatever is set in the text
style.
Hi, somebody...
the lib that now version can't support the ref image
For example:
![alt][1]
[1][http://...]
Please reply with an example.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.