lwansbrough / react-native-markdown Goto Github PK

Hey I have a Markdown that I can't get to wrap to a width. I've tried

Markdown style={{ view: {flexWrap: 'wrap', width: 300} }} > {messageText.split('\n')} </Markdown>

And I get one line of markdown that blazes through all the views and refuses to wrap. The yellow shows the markdown element.

when user warning .Text cant have any children except text image

I use the react native 0.43 version, or do we have this problem, After adding dependent on lead to error of project startup

First of all, thank you for this utility, and thank you for sharing it with everyone. I am new to markdown. The example in your readme works, but very little of this seems to work: https://daringfireball.net/projects/markdown/basics. Am I doing something wrong? It looks like simple-markdown.js is implementing John Gruber's markdown, so his own examples should work?

List of stuff that doesn't work

1. Headers
2. Line breaks
3. Block quotes
4. Lists
5. Code blocks
6. Horizontal rules
   ...

I'm probably doing something wrong, or maybe it's just not implemented yet. I'd love to help implement missing pieces but just trying to wrap my mind around how things are supposed to work right now. Thanks.

Hey, running in to an issue with text like:

> Along the road 
> from air to coffin  
> lie the many houses of cage. 

> The house of the thrush 
> is not shared 
> by the worm and the bull.

Is getting put all in to one <Text> element:

All the other markdown engines I've seen allow for a linebreak between 2 blockquotes to create 2 separate elements. This module should probably do the same.

Right now it's difficult to apply styles to some elements because they get overridden. There's no support for an !important like declaration in React Native styles so I'll have to figure something else out. If anyone has an feedback for that, please leave it here!

[root@real-server-04 reactProject2]# npm install
npm WARN install Couldn't install optional dependency: Unsupported
[email protected] /opt/reactProject2
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
└── [email protected]

npm WARN EPEERINVALID [email protected] requires a peer of react-native@^0.4.0 but none was installed.
env:
[root@real-server-04 reactProject2]#react-native --version
0.1.7
but node_modules/react-native/package.json version field is 0.16.0

       node -v    
       v5.1.0

        npm -v 
         3.3.12

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

Lets say I have a readme.md file in the asset directory and this is bundled in the asset folder. How do I load this file into the script?

There's a potential for application crashing if the Markdown code produces a structure like the following:

<Text>
  <View/>
</Text>

I've implemented a state property withinText (bool) which can be used for various logic related to text rendering - one of these cases should be checking if the current element will be rendered inside a <Text/> element.

I'm new to react and was wondering if I could get a code example of custom styling. I've tried this so far:

<Markdown text={styles.text}>
  Some *really* basic **Markdown**.
</Markdown>

But to no avail. It would be nice if there was an example of styling in the documentation.

Using eval on user generated content is extremely dangerous. Can you instead change the renderer to output React nodes instead? Here's an example where I forked Marked and output web React nodes. I think that it wouldn't be really hard to replace it with React Native nodes instead.

https://github.com/facebook/react-native/blob/master/website/core/Marked.js

RCTJSLog> "Error:
stack:
Markdown_componentWillMount index.ios.bundle:38986
mountComponent index.ios.bundle:16092
ReactCompositeComponent_mountComponent index.ios.bundle:4909
mountComponent index.ios.bundle:4978
mountChildren index.ios.bundle:19656
initializeChildren index.ios.bundle:17969
mountComponent index.ios.bundle:18123
mountComponent index.ios.bundle:4978
mountComponent index.ios.bundle:16110
ReactCompositeComponent_mountComponent index.ios.bundle:4909
mountComponent index.ios.bundle:4978
mountChildren index.ios.bundle:19656
initializeChildren index.ios.bundle:17969
mountComponent index.ios.bundle:18123
mountComponent index.ios.bundle:4978
mountComponent index.ios.bundle:16110
ReactCompositeComponent_mountComponent index.ios.bundle:4909
mountComponent index.ios.bundle:4978
mountComponent index.ios.bundle:16110
ReactCompositeComponent_mountComponent index.ios.bundle:4909
mountComponent index.ios.bundle:4978
mountChildren index.ios.bundle:19656
initializeChildren index.ios.bundle:17969
mountComponent index.ios.bundle:18123
mountComponent index.ios.bundle:4978
mountComponent index.ios.bundle:16110
ReactCompositeComponent_mountComponent index.ios.bundle:4909
mountComponent index.ios.bundle:4978
_mountChildByNameAtIndex index.ios.bundle:19864
_updateChildren index.ios.bundle:19770
updateChildren index.ios.bundle:19715
receiveComponent index.ios.bundle:18074
receiveComponent index.ios.bundle:5037
_updateRenderedComponent index.ios.bundle:16599
_performComponentUpdate index.ios.bundle:16578
updateComponent index.ios.bundle:16498
ReactCompositeComponent_updateComponent index.ios.bundle:4909
receiveComponent index.ios.bundle:16362
receiveComponent index.ios.bundle:5037
_updateRenderedComponent index.ios.bundle:16599
_performComponentUpdate index.ios.bundle:16578
updateComponent index.ios.bundle:16498
ReactCompositeComponent_updateComponent index.ios.bundle:4909
receiveComponent index.ios.bundle:16362
receiveComponent index.ios.bundle:5037
updateChildren index.ios.bundle:19976
_updateChildren index.ios.bundle:19741
updateChildren index.ios.bundle:19715
receiveComponent index.ios.bundle:18074
receiveComponent index.ios.bundle:5037
_updateRenderedComponent index.ios.bundle:16599
_performComponentUpdate index.ios.bundle:16578
updateComponent index.ios.bundle:16498
ReactCompositeComponent_updateComponent index.ios.bundle:4909
receiveComponent index.ios.bundle:16362
receiveComponent index.ios.bundle:5037
_updateRenderedComponent index.ios.bundle:16599
_performComponentUpdate index.ios.bundle:16578
updateComponent index.ios.bundle:16498
ReactCompositeComponent_updateComponent index.ios.bundle:4909
performUpdateIfNecessary index.ios.bundle:16395
performUpdateIfNecessary index.ios.bundle:5055
runBatchedUpdates index.ios.bundle:4614
perform index.ios.bundle:6041
perform index.ios.bundle:6041
perform index.ios.bundle:4558
flushBatchedUpdates index.ios.bundle:4638
ReactUpdates_flushBatchedUpdates index.ios.bundle:4909
closeAll index.ios.bundle:6114
perform index.ios.bundle:6055
batchedUpdates index.ios.bundle:13583
enqueueUpdate index.ios.bundle:4678
enqueueUpdate index.ios.bundle:4113
enqueueSetState index.ios.bundle:4291
setState index.ios.bundle:4020
index.ios.bundle:24146
index.ios.bundle:24082
invokeCallback index.ios.bundle:7437
applyWithGuard index.ios.bundle:877
guardReturn index.ios.bundle:7268
invokeCallbackAndReturnFlushedQueue index.ios.bundle:7450
URL: http://localhost:8081/index.ios.bundle
line: 38986
message: undefined is not a function (evaluating '.merge(styles, this.props.style)')"
2015-04-08 19:53:34.290 testapp[26872:17479744] *** Assertion failure in -[RCTNavigator reactBridgeDidFinishTransaction], /Volumes/Untitled/jgyun/wedo/react-native/testapp/node_modules/react-native/React/Views/RCTNavigator.m:500

Looks like there's a weird bug with the Markdown parser which is resulting in strategically placed commas. Looking into this.

Hey, I'm getting a warning when using ~~some text like that~~

@lwansbrough this repo appears to be dead. Do you have a suggestion for another repo that does the same thing but is being kept up?

Not sure if this is an issue of not applying any styles, but I've got a layout issue with a couple of paragraphs.

This is the code:

<Markdown>{this.props.ingredient.description}</Markdown> 

Text:

A thick, slippery wheat-flour noodle from Japan.

Look for fresh udon in the refrigerator or freezer aisles. Dried udon does exist, but this is the one noodle that really doesn’t take well to the process.

Render:

https://www.evernote.com/shard/s554/sh/c1249afc-7a25-4113-81a3-98e6c4b3ce3b/e878dd870f8870d7674943c9e30970e0

Example text:

#1
* 1
* 2

The list cannot be display correctly.

One of the difficult problems for this module will be deciding how to render the markdown. Currently I'm using native views (a mix of Text and View) however this has already proven to be quite limiting due to React Native's inability to render anything other than Text inside a Text element. This module uses the Text element for layout out blocks, which is currently the limiting factor in being able to implement non-Text based elements. I'm using Text for blocks because it supports word wrapping. I believe that if at some point css-layout is updated to support row wrapping, then we may be able to layout the Text elements inside a View. If we can layout Text elements inside a View in such a way that they wrap like they would in a Text element then I think this would solve the rendering issue.

Maybe @vjeux can comment on whether or not this can be done.

Alternatively, we can use a transparent WebView and render the Markdown as HTML - but this comes with other caveats such as HTML sanitation and layout.