iamacup / react-native-markdown-display Goto Github PK

Hey!

I use markdown-it-emoji it creates a type called emoji so I create custom rule, example:

emoji: (node, children, parent) => {
			return (
				<Text key={node.key} style={styles.emoji} numberOfLines={numberOfLines}>
					{node.content}
				</Text>
			)
		},

What I wanted to apply is a unique style for emojis when there is only emoji (and other non-strings).

Example:
;) ;) ;) -> Only Emoji
;) -> Only Emoji
;) lorem -> Paragraph
;) ipsum -> Paragraph
🔢 -> only Emoji
🔢 lorem -> Paragraph

There is another case that I pass in the markdown is that the emoji already formatted can arrive and I would like it to pass the right rule (type: emoji) and not the paragraph.

I have this:

const renderOnlyEmoji = (key, text) => (
		<Text key={key} style={styles.emoji} numberOfLines={numberOfLines}>
			{text}
		</Text>
	)

	const rules = {
		emoji: (node, children, parent) => {
			if (this.isOnlyEmoji(node.content)) { // <- if I could get the formatted emoji here, it will work
				return renderOnlyEmoji(node.key, node.content)
			}

			return (
				<Text key={node.key} style={styles.text} numberOfLines={numberOfLines}>
					{node.content}
				</Text>
			)
		},
		paragraph: (node, children, parent) => {
			if (this.isOnlyEmoji(message.txt)) {
				return renderOnlyEmoji(node.key, message.txt)
			}

			return (
				<Text key={node.key} style={styles.text} numberOfLines={numberOfLines}>
					{children}
				</Text>
			)
		}
}

...

<Markdown
					rules={rules}
					style={styles}
					mergeStyle={true}
					markdownit={...}
				>
					{message.txt}
				</Markdown>

Hi! First off, thank you for this package.

I'm playing around with it in a React Native (Expo) app and I'm having trouble with font size. I'd like to disable font scaling but it doesn't seem like it's possible. I had a quick look through the code and in React Native itself and it seems like it could be related to a few things.

For example, the following code, unrelated to your package, will result in "Test" being rendered at a fixed size, regardless of your device's font size. That is, the disabling of the font scaling is working. If, however, I put the allowFontScaling on the inner <Text> only, it doesn't work.

<Text allowFontScaling={false}>
  <Text>Test</Text>
</Text>

So, I tried the following:

<Markdown
  rules={{
    text: (node, children, parent, styles, inheritedStyles = {}) => (
      <Text
        allowFontScaling={false}
        key={node.key}
        style={[inheritedStyles, styles.text]}
      >
        {node.content}
      </Text>
    ),
  }}
  style={markdownStyles}
>
  {content}
</Markdown>

As this doesn't work, I can only imagine it's related to the issue I mentioned above (the nested <Text> components). Hopefully I'm missing something here, though, and that there's an easy solution to disable all font scaling in my rendered markdown. If there's not, I think it'd be a great prop for the Markdown component itself, setting the property on all rendered <Text> components.

Anyway, I hope that was clear enough. Have a nice day. ✌️

Is there a way to apply style on the main view or is it impossible?

I am trying to do that:

<Markdown
  style={{
    marginVertical: 30,
    marginHorizontal: 10,
  }}
  {...rest}
/>

const markdownStyle = StyleSheet.create({
  body: {
    textAlign: 'justify',
    borderWidth: 1,
    borderColor: 'red'
  }
})

...

<Markdown style={markdownStyle}>{termsAndConditions}</Markdown>

No problem with the red border, although textAlign doesn't make any difference. I tried on other elements like text or heading, heading1 and I have the same behavior.
Any solution to this?

Hi,

I have list:

- item 1
- item 2
- item 3

I need some help with styles:
I want reduce line spacing in bullet list

I try to modify styles bullet_list and bullet_list_content
I can’t change the distance between the lines...

how to I can change spacing in bullet list?

thank you!

Would really love it if someone could help update them from the PropTypes and Readme info :)

Just upgraded from 6.01 to 6.1. Getting the following error:
error: Error: Unable to resolve module ./lib/plugin/PluginContainer from node_modules\react-native-markdown-display\src\index.js:

Platform:
Android
RN: 62.0
RN-Markdown-display: 6.1

Specific Language is very straightforward...getting content from Strapi and diplaying markdown content. Worked great prior to 6.1
import Markdown from 'react-native-markdown-display';
{item.content}

Steps taken:
Cleared Android Cache
Uninstall
Reinstall
Same error

How can add a plugin?
I want to embed a video in the markdown file. Which is currently not available in the package.

Hi,
I am using expo v35 and trying to use this lib to display markdown elements but I got an error

ENOENT: no such file or directory, scandir 'project-root\node_modules\markdown-it\lib\common\node_modules\entities\lib\maps'

My component

import React, {Component} from 'react';
import {ScrollView} from 'react-native';
import Markdown from 'react-native-markdown-display';

export default class TermsAndConditions extends Component {
  state = {
    text: '',
  };


  constructor(props) {
    super(props);
    this.state.text = props.tc;
  }

  componentDidMount() {
  }

  render() {
    return (
      <ScrollView>
        <Markdown>{this.state.text}</Markdown>
      </ScrollView>
    )
  }
}

Can you help me with it?

I can change all other styles on a link like textDecorationLine and backgroundColor but the color property doesn't do anything.

@iamacup Thankyou for ur response!

const rules = {
  body: (node, children, parent, styles) => children,
  paragraph: (node, children, parent, styles) => children,
};

export const MarkdownText = ({ body, onLinkPress }) => (
  <Markdown
    markdownit={
      MarkdownIt({ typographer: true, linkify: true,breaks: true,
      }).disable(['blockquote', 'list', 'code'])
    }
    onLinkPress={(url) => onLinkPress(url)}
    style={{ link: { color: '#007BC7' } }}
    rules={rules}
  >
    {body}
  </Markdown>
);

This is the code block.
I want to handle multiple successive linebreaks in this scenario. Kindly guide me how can i achieve this.
Markdown is not displaying multiple linebreaks and ignoring multiple linebreaks during rendering

Originally posted by @MuhammadMattiullah in #49 (comment)

Hi everyone! I found this library awesome and very useful so thanks for that!

I'm facing an issue when trying to override the default link rule with my custom Link component which basically renders the following:

<TouchableOpacity onPress={onLinkPressed}>
   <Text>{props.text}</Text>
</TouchableOpacity>

But I am not able to see anything being rendered

I'm overriding the default link rule like this:
link: (node: any): JSX.Element => <Link key={node.key} href={node.attributes.href} text={node.children[0].content} />,

I'm sure that props.text is defined and it has text content, the same code is working perfectly on the web (using react-native-web). Also, if I change the TouchableOpacity to a View component, it does not work either, the only way I was able to make it work is by just returning the inner <Text>{props.text}</Text>.

Thank you very much!

When using the mergeStyle prop using Markdown as in this example,

          <Markdown style={stylesMd} mergeStyle={true}>
                  {itemState.content}
          </Markdown>

a linting error is displayed claiming that
Property 'mergeStyle' does not exist on type 'IntrinsicAttributes & MarkdownProps & { children?: ReactNode; }'.

The program itself works fine, but it may be helpful to prevent this from showing.
I'm using VSCode.

I'm using this library to display markdown format text, and it is inserting unnecessarry paddings/margins on top and bottom. Is there any way to remove those?

using following:

const copy = `
# h1 Heading 8-)
## h2 Heading 8-)
### h3 Heading 8-)

Just some randome text fto read here

\n\n\n

* one
* twoo
* threee
`;

const bodyStyles = StyleSheet.create({
  // eslint-disable-next-line react-native/no-unused-styles
   paragraph: {
     color: 'white',
     fontSize: 14,
     borderWidth: 1,
     borderColor: 'black',
     margin: 0,
     marginTop: 0,
     marginBottom: 0,
  },
  // eslint-disable-next-line react-native/no-unused-styles
  listUnorderedItemIcon: {
    color: 'white',
    fontSize: 14,
    lineHeight: 14,
    borderWidth: 1,
    borderColor: 'black',
    textAlign: 'center',
    alignSelf: 'center',
  },
  listItem: {
     borderColor: 'blue',
    borderWidth: 1,
  },
  listUnordered: {
    borderColor: 'yellow',
    borderWidth: 1,
  },
  listUnorderedItem: {
    borderColor: 'cyan',
    borderWidth: 1,
  }
});

There is no space between text and list during rendering.

The number part is not correctly styled

I'm able to override the code_block with the following code.

rules = {
    code_block: (node, children, parent, style) => {
        return <Text>I am a code_block</Text>;
    }
}

<Markdown rules={rules}>
    {myString}
</Markdown>

However, I can't give code_block a custom style (for example, a different text color) with similar code, even though I can modify the style of other components.

style = {
    root: { color: "red" }, // works on its own
    code_block: { color: "red" } // doesn't work on its own
}

<Markdown style={style}>
    {myString}
</Markdown>

Any thoughts?
I'm doing this because I'm setting the "root" text color to be white, but the background color of the code_block is close to white, so it's impossible to read. I'd like to either change the text color or the background color of the code_block, but I can't seem to do it.

hi i'm new to react-native-markdown-display package. i don't know how to reduce gap/ margin between two numbered list items can anyone help? many thanks

It is really annoying to overwrite render rules if you have to include a platform enum that is not exported!

Thank you for taking the initiative to fork this.

Just wanted to report that your work, also works with react-native-web (so works on web across all modern browsers).

With the following content variable:

const content = `voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture voiture`;

Using <Text />:

<Text>{content}</Text>

Using <Markdown />:

<Markdown>{content}</Markdown>

Because this is for mobile, we need a way of specifying - 'i don't want to support images' etc. - esp if this is library that prints out user content.

I am concern about performance.

Will this package renders the marked texts as a loop or it parse from string ??

because if there the marked text renders as loop then may affect on performance, please someone help me and sure how this package works.

I tested this on both, Android and Web, and behavior seems to be the same.

If I specify a style , say, color: 'red' for ext, and color: 'green' for Header 1, everything is 'red' (including headers).
Same for fontSize.

Perhaps, I am mistaken, but I am thinking, that styles for 'text' should not override styles for other sections.

  render() {
    console.log('App::render');

    const localStyle={
      text: {color: 'red'}, //text should be red
      heading1: {fontSize:52, color: 'green'},//headings should be green
      
    }
    return (
      <ScrollView>
      <View>
        <Text> Mark Down with react-native-markdown-display </Text>
        <View style={{ flex: 1, margin:5,  borderWidth: 2 }}>
          <Markdown style={localStyle} markdownit={md}>
            {MD_TEST_DATA2}
          </Markdown>
        </View>
      </View>
      </ScrollView>
    );
  }

Since Android 10, textBreakStrategy="simple" is necessary for the text not to break in a way that can hide the last word of the text. Apparently, only the prop mentioned above solves this issue.

I tried adding this prop to the text renderRule like:

text: (node, children, parent, styles) => {
    return <Text key={node.key} textBreakStrategy="simple">{node.content}</Text>;
  },

But the prop is not being applied appropriately, or, at least, the text is still breaking. I have two questions:

1. Am I missing something about how this is supposed to work?
2. Is there a way to make sure this textBreakStrategy="simple" is applied?

By the spec, and with this example below, you can see the numbering always continues even though perhaps it should not

  Unordered

  + Create a list by starting a line with `+`, `-`, or `*`
  + Sub-lists are made by indenting 2 spaces:
    - Marker character change forces new list start:
      * Ac tristique libero volutpat at
      + Facilisis in pretium nisl aliquet
      - Nulla volutpat aliquam velit
  + Very easy!

  Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa


  1. You can use sequential numbers...
  1. ...or keep all the numbers as `1.`

  Start numbering with offset:

  57. foo
  1. bar

iOS	Android

1. We need to fix up the way list styles work in conjunction with the way paragraph / text styles are handled

#63
#61
#52

2. Fix for multiple line breaks

#49

tried applying following:

const bodyStyles = StyleSheet.create({
  listUnorderedItem:{
    color: 'yellow'
  },
  listUnordered: {
    color: 'green'
  },
  listItem: {
    color: 'white'
  },
});

But it has no effect.
The list item text still shows in black.

Other styles like paragraph, text, heading1, etc work fine.

In traditional Markdown html can be sprinkled here and there to get some behavior which isn't available with Markdown commands.

A thing I recently needed was the ability to force line-breaks inside table columns. This SO article suggests to use <br>. This also works in Markdown but does not in this library.

Some of our content has headings.

I just noticed this now, but headings font size is not changed for headings when using React-native-web

This only happens in react-native-web, in react-native this seems to work.

In react native web, I see a warning generated.

Warning: Failed prop type: Invalid props.style key `fontSize` supplied to `View`.
Bad object: {
  "flexDirection": "row",
  "fontSize": 32
}

in View (at renderRules.js:88)

I am trying to follow that code, but
The comment in renderRules.js says:
// applying styles.heading and styles.headingX to the view is fine here because of style rollup we do in the AstRenderer.js file for text display items

I am only guessing, but AstRender looks for styles in a <View>, and it seems like in react-native, the View component allows (at least for now), to pass through unknown style directives, but in RNW -- this way of passing custom style directives does not work. Which is, perhaps, why styling is not work on the web now (it used to work before the fork).

The flexDirection and fontSize seem to be 'defaults' for Heading1 type.

The following markdown of a local image won't render anything, not even the provided alt text:

![MyImage](${require('./myImage.png')})

Images from urls do work for me, e.g.

![MyImage](https://octodex.github.com/images/minion.png)

Versions:

react-native-markdown-display: 6.1.1
react-native: 0.61.5

Tested on an iPhone 11 simulator with iOS 13.3

Are local image files supported? How to include them? Thanks!

Somehow the docs claim that overriding links click can be done via setting onLinkPressed. However this prop is not exposed on the Markdown props.

Hello people,
Can someone guide me that is it possible to use the code like above:

   <Text>
      <Markdown
        onLinkPress={() => alert('Link Clicked')}
        style={{ link: { color: 'blue' } }}
      >
        {body}
      </Markdown>
    </Text>

As i need to use this markdown functionality with native text component
@iamacup

i.e. applying color: 'red' to a link style prop will be ignored if there is a color on the text prop

**This is bold
And this should be bold**

should give

This is bold
And this should be bold

but gives

This is bold
And this should be bold

When there is no customCallback, links do not automatically work.

Sample test

<Markdown >{`[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`}</Markdown>

Workaround

Add LInking.openURL to the callback.

<Markdown **onLinkPress={(url) => Linking.openURL(url)}** >{`[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`}</MTMarkdown>

We look for existence of customCallBack in openURL.js, but the component definition already provides a default. This makes the else condition unreachable.

![here](jafaapp://pushnotificationsettingspage) will crash out an app completely due to no image handler

On the web, ios and android (all together):

<MarkdownDisplay
  rules={rules}
  markdownit={MarkdownIt({
    linkify: true,
    typographer: true
  })}
  {...rest}
/>

This cause:

index.js:1 Warning: Failed prop type: Invalid prop `markdownit` of type `MarkdownIt` supplied to `<<anonymous>>`, expected instance of `MarkdownIt`.

For my component I'd like to extract all the text links from the markdown to build an action sheet out of the links.

So I would like to pre-parse the markdown using markdown-it for all links and then hand in that AST to the component instead of a markdown-it prop.

I want to prevent thet parsing of the markdown twice, once in my component and second in yours.

Do you think that would be a possible addition?

The issue

When the markdown is rendered within a ScrollView, images within the markdown disappear as it scrolls. In versions prior to these changes, the images render consistently.

The reason

It looks like the commit made on November 6, 2019 where the deprecated lifecycle methods are removed is the culprit, but I'm not sure where the bug occurs. Any ideas?