Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# React Native Markdown Display [![npm version](https://badge.fury.io/js/react-native-markdown-display.svg)](https://badge.fury.io/js/react-native-markdown-display) [![Known Vulnerabilities](https://snyk.io/test/github/iamacup/react-native-markdown-display/badge.svg)](https://snyk.io/test/github/iamacup/react-native-markdown-display)
# React Native Markdown Display [![npm version](https://badge.fury.io/js/@ronradtke%2Freact-native-markdown-display.svg)](https://badge.fury.io/js/@ronradtke%2Freact-native-markdown-display) [![Known Vulnerabilities](https://snyk.io/test/github/iamacup/react-native-markdown-display/badge.svg)](https://snyk.io/test/github/iamacup/react-native-markdown-display)

It a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is __not__ a web-view markdown renderer but a renderer that uses native components for all its elements. These components can be overwritten and styled as needed.

Expand All @@ -10,12 +10,12 @@ This is intended to be a replacement for react-native-markdown-renderer, with a

#### Yarn
```npm
yarn add react-native-markdown-display
yarn add @ronradtke/react-native-markdown-display
```

#### NPM
```npm
npm install -S react-native-markdown-display
npm install -S @ronradtke/react-native-markdown-display
```

### Get Started
Expand All @@ -24,7 +24,7 @@ npm install -S react-native-markdown-display
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar } from 'react-native';

import Markdownfrom '@ronradtke/react-native-markdown-display';
import Markdown from '@ronradtke/react-native-markdown-display';

const copy = `# h1 Heading 8-)

Expand Down Expand Up @@ -847,7 +847,7 @@ Think of the implementation like applying styles in CSS. changes to the `body` e
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar } from 'react-native';

import Markdownfrom '@ronradtke/react-native-markdown-display';
import Markdown from '@ronradtke/react-native-markdown-display';

const copy = `
This is some text which is red because of the body style, which is also really small!
Expand Down Expand Up @@ -910,7 +910,7 @@ Styles are used to override how certain rules are styled. The existing implement
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar, StyleSheet } from 'react-native';

import Markdownfrom '@ronradtke/react-native-markdown-display';
import Markdown from '@ronradtke/react-native-markdown-display';

const styles = StyleSheet.create({
heading1: {
Expand Down Expand Up @@ -984,7 +984,7 @@ Rules are used to specify how you want certain elements to be displayed. The exi
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';

import Markdownfrom '@ronradtke/react-native-markdown-display';
import Markdown from '@ronradtke/react-native-markdown-display';

const rules = {
heading1: (node, children, parent, styles) =>
Expand Down Expand Up @@ -1093,7 +1093,7 @@ It is possible to overwrite this behaviour in one of two ways:
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar } from 'react-native';

import Markdownfrom '@ronradtke/react-native-markdown-display';
import Markdown from '@ronradtke/react-native-markdown-display';

const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;

Expand Down Expand Up @@ -1145,7 +1145,7 @@ Something like this with `yourCustomHandlerFunctionOrLogicHere`:
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';

import Markdownfrom '@ronradtke/react-native-markdown-display';
import Markdown from '@ronradtke/react-native-markdown-display';

const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ronradtke/react-native-markdown-display",
"version": "8.0.0",
"version": "8.1.0",
"description": "Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer), originally created by Mient-jan Stelling as react-native-markdown-renderer",
"main": "src/index.js",
"types": "src/index.d.ts",
Expand Down
2 changes: 1 addition & 1 deletion src/lib/renderRules.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import hasParents from './util/hasParents';

import textStyleProps from './data/textStyleProps';

const renderRules = (Text: Component) => ({
const renderRules = (Text) => ({
// when unknown elements are introduced, so it wont break
unknown: (node, children, parent, styles) => null,

Expand Down
6 changes: 3 additions & 3 deletions src/lib/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const styles = {
borderRadius: 4,
...Platform.select({
['ios']: {
fontFamily: 'Courier',
fontFamily: 'Courier New',
},
['android']: {
fontFamily: 'monospace',
Expand All @@ -107,7 +107,7 @@ export const styles = {
borderRadius: 4,
...Platform.select({
['ios']: {
fontFamily: 'Courier',
fontFamily: 'Courier New',
},
['android']: {
fontFamily: 'monospace',
Expand All @@ -122,7 +122,7 @@ export const styles = {
borderRadius: 4,
...Platform.select({
['ios']: {
fontFamily: 'Courier',
fontFamily: 'Courier New',
},
['android']: {
fontFamily: 'monospace',
Expand Down