以前React NativeのMarkdown用ライブラリを比較しました。

React NativeでMarkdownを表示する方法をいくつか比較してみた - PIYO - Tech & Life -
GitHubのようにMarkdownが書けるようなサイトが増えています。僕の働いているソニックガーデンが使っているオフィスツールRemott

そのときに見落としていて試してなかったライブラリがなかなか良さそうでしたので、こちらのサンプルアプリにいれてみました。

pi-chan/ReactNativeMarkdownSample
Contribute to pi-chan/ReactNativeMarkdownSample development by creating an account on GitHub.

react-native-render-html

新しく使ってみたのはこのライブラリです。

archriss/react-native-render-html
iOS/Android pure javascript react-native component that renders your HTML into 100% native views - archriss/react-native-render-html

サンプルアプリではこんな感じになりました。

なかなか良さそう。

react-native-htmlview

ちなみに、よく引き合いに出すreact-native-htmlviewはこんな感じ。

今回の差分です。

https://github.com/pi-chan/ReactNativeMarkdownSample/commit/56ed99c4dd45f81d82aa6b0d0682867d3701d83d

使い方部分だけ抜粋すると↓こんな感じでした。

import React, { Component } from 'react';
import { Dimensions, ScrollView, Linking } from 'react-native';
import HTML from 'react-native-render-html';

const { width } = Dimensions.get('window');

export default class RenderHtmlScreen extends Component {
  static navigationOptions = {
    title: 'react-native-render-html',
  };

  render() {
    const html = this.props.navigation.getParam('html')
    return (
      <ScrollView style={{padding: 10}}>
        <HTML
          html={html}
          imagesMaxWidth={width * 0.9}
          onLinkPress={(evt, href) => { Linking.openURL(href) }}
        />
      </ScrollView>
    );
  }
}