Skip to content

tradle/rn-markdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

fc87070 Β· Aug 13, 2019

History

30 Commits
Apr 10, 2019
Feb 21, 2018
Jun 8, 2017
Jun 8, 2017
Feb 21, 2018
Jun 8, 2017
Nov 9, 2018
Apr 10, 2019
Aug 13, 2019
Nov 9, 2018
Apr 10, 2019
Apr 10, 2019
Jun 8, 2017

Repository files navigation

rn-markdown

Markdown rendering component, using the parser from marked.

play with the react-native-web version

Install

npm install --save rn-markdown
# or
yarn add rn-markdown

Usage

The example below, and the component styles were adapted from react-native-simple-markdown.

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Alert,
  TouchableHighlight
} from 'react-native'

import createMarkdownRenderer from 'rn-markdown'

// pass in `marked` opts, e.g. gfm: true for Github Flavored Markdown
const Markdown = createMarkdownRenderer({ gfm: false })

// define a custom renderer for links
Markdown.renderer.link = props => {
  const { markdown, passThroughProps } = props
  const { href } = markdown
  return (
    <TouchableHighlight onPress={() => Alert.alert('check out this hot href', href)}>
      <View>
        {props.children}
      </View>
    </TouchableHighlight>
  )
}

// example partially from react-native-simple-markdown
export default class MarkdownExample extends Component {
  render() {
    const text =
`
You can **emphasize**

You can even [**link your website**](http://carlito.ninja) or if you prefer: [email somebody](mailto:email@somebody.com)

Spice it up with some GIFs πŸ’ƒ:

![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif)

And even add a cool video 😎!

[![A cool video from YT](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)

[![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)

# heading 1

content 1

## heading 2

### heading 3

#### heading 4

uh oh...numbered list coming up

1. a
1. b
  - with an unnumbered list inside
  - blah
    - blah blah

more frakking lists

- blah
- blah1
- blah2
  - blah2.1
  - blah2.2
    - blah2.2.1
    - blah2.2.2
`

    return (
      <Markdown contentContainerStyle={styles.container} markdownStyles={markdownStyles} passThroughProps={{ passMeThrough: 'to the child renderer components' }}>
        {text}
      </Markdown>
    )
  }
}

const markdownStyles = {
  container: {
    paddingLeft: 10
  },
  heading1: {
    fontSize: 24,
    color: 'purple',
  },
  link: {
    color: 'pink',
  },
  mail_to: {
    color: 'orange',
  },
  text: {
    color: '#555555',
  },
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
})

AppRegistry.registerComponent('MarkdownExample', () => MarkdownExample)

Contributing

This is a work in progress and contributions are welcome!