A component for rendering Markdown in React Native with native components, working with both iOS & Android. Pull requests are welcome!
yarn add react-native-simple-markdown
This 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; or give a look at the styles section, some help is also need there!
All you need to do is import the react-native-simple-markdown
and then use the<Markdown />
component.
import React from 'react'
import Markdown from 'react-native-simple-markdown'
const MyAwesomeApp = () => {
return (
<Markdown styles={markdownStyles}>
#Markdown in react-native is so cool! {'\n\n'}
You can **emphasize** what you want, or just _suggest it_ ��…{'\n'}
You can even [**link your website**](https://twitter.com/Charles_Mangwa) or if you prefer: [email somebody](mailto:email@somebody.com){'\n'}
Spice it up with some GIFs ��:
![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif){'\n'}
And even add a cool video ��!{'\n'}
[![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)
</Markdown>
)
}
const markdownStyles = {
heading1: {
fontSize: 24,
color: 'purple',
},
link: {
color: 'pink',
},
mailTo: {
color: 'orange',
},
text: {
color: '#555555',
},
}
styles
<Markdown />
will apply its style by default. However you can pass a styles
prop to customize it has you wish.
Example:
<Markdown
styles={{
heading1: {
fontSize: 20,
},
strong: {
fontWeight: 'bold',
}
}}
>
#Hello ��
</Markdown>
rules
Here again, <Markdown />
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!
Example:
<Markdown
rules={{
image: {
react: (node, output, state) => (
<CustomImageComponent
key={state.key}
source={{ uri: node.target }}
/>
),
},
}}
>
![Alt text](/path/to/img.jpg)
</Markdown>
RNSM 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.
Example:
<Markdown
styles={ markdownStyles }
whitelist={['link', 'url']}
>
{ description }
</Markdown>
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.
If 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:
<Markdown
errorHandler={(errors, children) => console.log(errors, children)}
>
...
</Markdown>
Given 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:
When 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!
Property | Type | Rendering | Features |
---|---|---|---|
blockQuote |
<View> |
|
Also blockQuoteBar (<View> ) and blockQuoteText (<Text> ) |
br |
<Text> |
|
- |
del |
<Text> |
|
- |
em |
<Text> |
|
- |
hr |
<View> |
|
- |
heading |
<Text> |
|
Also heading1 through heading6 |
image |
<Image> |
|
ou can use resizeMode in <Markdown /> styles prop to set a resizeMode |
inlineCode |
<Text> |
|
- |
link |
<Text> |
|
- |
list |
<View> |
|
Also listItem (<View> ), listItemBullet (<Text> ), listItemBulletType (Unicode character ), listItemNumber (<Text> ) and listItemText (<Text> ) |
mailTo |
<Text> |
|
- |
paragraph |
<View> |
|
- |
plainText |
<Text> |
|
Used for styling text without any associated styles |
strong |
<Text> |
|
- |
table |
<View> |
|
- |
tableHeader |
<View> |
|
- |
tableHeaderCell |
<View> |
|
- |
tableRow |
<View> |
|
- |
tableRowCell |
<View> |
|
- |
tableRowLast |
<View> |
|
Inherits from tableRow |
text |
<Text> |
|
- |
u |
<Text> |
|
- |
url |
<Text> |
|
- |
video |
<Image> |
|
Supports YouTube & Vimeo |
view |
<View> |
|
This is the View container where the Markdown is rendered |
This project was forked from react-native-markdown
by @lwansbrough
simple-react-calendar A simple calendar component for React based applications. A component that is easy to start using, yet flexible when you need customization. Usage You can find the component's on
本文向大家介绍react-native 启动React Native Packager,包括了react-native 启动React Native Packager的使用技巧和注意事项,需要的朋友参考一下 示例 在最新版本的React Native上,无需运行打包程序。它将自动运行。 默认情况下,这将在端口8081上启动服务器。要指定服务器所在的端口
百度移动统计SDK支持使用react native框架的H5页面统计,封装好的插件已经在github上开源,相关用法具体请参考:https://github.com/BaiduMobileAnalysis/baidumobstat-react-native。
The React Native environment has a lot of little quirks, so this documentation is aimed at helping smooth those over. Please feel free to create issues on GitHub for recommendations and additions to t
React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Ima
simple-react-full-stack This is a boilerplate to build a full stack web application using React, Node.js, Express and Webpack. It is also configured with webpack-dev-server, eslint, prettier and babel