{"id":15546756,"url":"https://github.com/charlesmangwa/react-native-simple-markdown","last_synced_at":"2025-05-16T09:03:57.276Z","repository":{"id":48020683,"uuid":"64739429","full_name":"CharlesMangwa/react-native-simple-markdown","owner":"CharlesMangwa","description":"📜 React Native Markdown component (iOS \u0026 Android).","archived":false,"fork":false,"pushed_at":"2022-12-06T19:47:14.000Z","size":209,"stargazers_count":416,"open_issues_count":56,"forks_count":134,"subscribers_count":5,"default_branch":"next","last_synced_at":"2025-05-15T22:12:13.643Z","etag":null,"topics":["android","ios","library","markdown","react","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-simple-markdown","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CharlesMangwa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-02T08:34:35.000Z","updated_at":"2025-04-13T09:07:40.000Z","dependencies_parsed_at":"2023-01-23T12:25:16.417Z","dependency_job_id":null,"html_url":"https://github.com/CharlesMangwa/react-native-simple-markdown","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-native-simple-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-native-simple-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-native-simple-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-native-simple-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CharlesMangwa","download_url":"https://codeload.github.com/CharlesMangwa/react-native-simple-markdown/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501556,"owners_count":22081528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","library","markdown","react","react-native"],"created_at":"2024-10-02T13:04:23.559Z","updated_at":"2025-05-16T09:03:57.254Z","avatar_url":"https://github.com/CharlesMangwa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-simple-markdown\r\n[![CircleCI](https://circleci.com/gh/CharlesMangwa/react-native-simple-markdown.svg?style=shield\u0026circle-token=4a6119afe938ed7305713fece562bb33d6bc22d8)](https://circleci.com/gh/CharlesMangwa/react-native-simple-markdown)\r\n[![npm downloads](https://img.shields.io/npm/dm/react-native-simple-markdown.svg?maxAge=2592000)](https://www.npmjs.com/package/react-native-simple-markdown)\r\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\r\n[![npm version](https://img.shields.io/npm/v/react-native-simple-markdown.svg)](https://www.npmjs.com/package/react-native-simple-markdown)\r\n\r\nA component for rendering Markdown in React Native with native components, working with both iOS \u0026 Android. Pull requests are welcome! 😃 🎉\r\n\r\n## Getting started\r\n\r\n`yarn add react-native-simple-markdown`\r\n\r\n## Future\r\n\r\nThis library is currently being (kinda) completely rewritten. If you've been using this lib for a short/long time or are interesting in shaping it for the future: [just chime in and share your thoughts with us](https://github.com/CharlesMangwa/react-native-simple-markdown/issues/75); or give a look at the [styles section](https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1), some help is also need there!\r\n\r\n## Usage\r\n\r\nAll you need to do is import the `react-native-simple-markdown` and then use the\r\n`\u003cMarkdown /\u003e` component.\r\n\r\n```js\r\nimport React from 'react'\r\nimport Markdown from 'react-native-simple-markdown'\r\n\r\nconst MyAwesomeApp = () =\u003e {\r\n  return (\r\n    \u003cMarkdown styles={markdownStyles}\u003e\r\n      #Markdown in react-native is so cool! {'\\n\\n'}\r\n\r\n      You can **emphasize** what you want, or just _suggest it_ 😏…{'\\n'}\r\n\r\n      You can even [**link your website**](https://twitter.com/Charles_Mangwa) or if you prefer: [email somebody](mailto:email@somebody.com){'\\n'}\r\n\r\n      Spice it up with some GIFs 💃:\r\n\r\n      ![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif){'\\n'}\r\n\r\n      And even add a cool video 😎!{'\\n'}\r\n\r\n      [![A cool video from YT](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)\r\n\r\n      [![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)\r\n    \u003c/Markdown\u003e   \r\n  )\r\n}\r\n\r\nconst markdownStyles = {\r\n  heading1: {\r\n    fontSize: 24,\r\n    color: 'purple',\r\n  },\r\n  link: {\r\n    color: 'pink',\r\n  },\r\n  mailTo: {\r\n    color: 'orange',\r\n  },\r\n  text: {\r\n    color: '#555555',\r\n  },\r\n}\r\n```\r\n\r\n## Properties\r\n### `styles`\r\n\r\n`\u003cMarkdown /\u003e` will apply its style by default. However you can pass a `styles` prop to customize it has you wish.\r\n\r\nExample:\r\n\r\n```js\r\n\u003cMarkdown\r\n  styles={{\r\n    heading1: {\r\n      fontSize: 20,\r\n    },\r\n    strong: {\r\n      fontWeight: 'bold',\r\n    }\r\n  }}\r\n\u003e\r\n  #Hello 👋\r\n\u003c/Markdown\u003e\r\n```\r\n\r\n### `rules`\r\n\r\nHere again, `\u003cMarkdown /\u003e` will apply its rules by default. However you can pass a `rules` prop to add your own and then customize how the Markdown elements will be displayed!\r\n\r\nExample:\r\n\r\n```js\r\n\u003cMarkdown\r\n  rules={{\r\n    image: {\r\n      react: (node, output, state) =\u003e (\r\n        \u003cCustomImageComponent\r\n          key={state.key}\r\n          source={{ uri: node.target }}\r\n        /\u003e\r\n      ),\r\n    },\r\n  }}\r\n\u003e\r\n  ![Alt text](/path/to/img.jpg)\r\n\u003c/Markdown\u003e\r\n```\r\n\r\nRNSM also allows you to remove easily unwanted styling options without having to pass in rule objects that have their react key implemented/dummied to ignore those styling options.\r\n\r\nExample:\r\n\r\n```js\r\n\u003cMarkdown\r\n  styles={ markdownStyles }\r\n  whitelist={['link', 'url']}\r\n\u003e\r\n  { description }\r\n\u003c/Markdown\u003e\r\n```\r\n\r\n`whitelist` will only apply `link` and `url` default styles, while `blacklist` will do the opposite. You don't need to pass in a rules prop that contained a key for all the styles you don't want and reimplement their styling output anymore.\r\n\r\n### errorHandler\r\n\r\nIf you happened to have an error with your Markdown during the rendering, you can pass a `errorHandler` with a function that will let you see what's going on:\r\n\r\n```jsx\r\n\u003cMarkdown\r\n  errorHandler={(errors, children) =\u003e console.log(errors, children)}\r\n\u003e\r\n...\r\n\u003c/Markdown\u003e\r\n\r\n```\r\n\r\n## Styles\r\n\r\nGiven that the way React Native renders element has evolved in the latest versions (0.48+), we'll have to check manually that every single rule works as expected by:\r\n- rendering properly on both iOS \u0026 Android\r\n- being able to be styled on both platforms\r\n- not breaking/overriding others rules when its own is applied\r\n\r\nWhen those 3 criteria are fulfilled, we can validate the **Rendering** column. Feel free to check any of these and send a PR to validate it [on Snack](https://snack.expo.io/By2dzl04G)!\r\n\r\n| Property | Type | Rendering | Features |\r\n| ------ | ------ |  ------ |  ------ |\r\n| `blockQuote` | `\u003cView\u003e` | ❌ | Also `blockQuoteBar` (`\u003cView\u003e`) and `blockQuoteText` (`\u003cText\u003e`) |\r\n| `br` | `\u003cText\u003e` | ❌ | - |\r\n| `del` | `\u003cText\u003e` | ❌ | - |\r\n| `em` | `\u003cText\u003e` | ❌ | - |\r\n| `hr` | `\u003cView\u003e` | ❌ | - |\r\n| `heading` | `\u003cText\u003e` | ❌ | Also `heading1` through `heading6` |\r\n| `image` | `\u003cImage\u003e` | ❌ | ou can use `resizeMode` in `\u003cMarkdown /\u003e` styles prop to set a `resizeMode` |\r\n| `inlineCode` | `\u003cText\u003e` | ❌ | - |\r\n| `link` | `\u003cText\u003e` | ❌ | - |\r\n| `list` | `\u003cView\u003e` | ❌ | Also `listItem` (`\u003cView\u003e`), `listItemBullet` (`\u003cText\u003e`), `listItemBulletType` (`Unicode character`), `listItemNumber` (`\u003cText\u003e`) and `listItemText` (`\u003cText\u003e`) |\r\n| `mailTo` | `\u003cText\u003e` | ❌ | - |\r\n| `paragraph` | `\u003cView\u003e` | ❌ | - |\r\n| `plainText` | `\u003cText\u003e` | ❌ | Used for styling text without any associated styles |\r\n| `strong` | `\u003cText\u003e` | ❌ | - |\r\n| `table` | `\u003cView\u003e` | ❌ | - |\r\n| `tableHeader` | `\u003cView\u003e` | ❌ | - |\r\n| `tableHeaderCell` | `\u003cView\u003e` | ❌ | - |\r\n| `tableRow` | `\u003cView\u003e` | ❌ | - |\r\n| `tableRowCell` | `\u003cView\u003e` | ❌ | - |\r\n| `tableRowLast` | `\u003cView\u003e` | ❌ | Inherits from `tableRow` |\r\n| `text` | `\u003cText\u003e` | ❌ | - |\r\n| `u` | `\u003cText\u003e` | ❌ | - |\r\n| `url` | `\u003cText\u003e` | ❌ | - |\r\n| `video` | `\u003cImage\u003e` | ❌ | Supports YouTube \u0026 Vimeo |\r\n| `view` | `\u003cView\u003e` | ❌ | This is the `View` container where the Markdown is rendered |\r\n\r\n## Credits\r\n\r\nThis project was forked from [`react-native-markdown`](https://github.com/lwansbrough/react-native-markdown) by [@lwansbrough](https://github.com/lwansbrough) 👍\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesmangwa%2Freact-native-simple-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharlesmangwa%2Freact-native-simple-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesmangwa%2Freact-native-simple-markdown/lists"}