bbcode-react-native-view/src/Renderer.js

Convert BBCode into react native views

import React from 'react';
import { View, Text } from 'react-native';
import { Parser } from './Parser';

const bbCodeTagIntoNativeView = {
  br: View,
  b: Text,
  i: Text,
  u: Text,
  quote: View,
  url: Text,
  attach: Text
};

export default class Renderer extends React.Component {
  _doRenderTagMap(tagMap) {
    if (!tagMap.length) {
      return null;
    }

    let views = [];

    for (let i = 0; i < tagMap.length; i++) {
      const tag = tagMap[i];
      if (tag.tagName === undefined) {
        // it is text.
        if (tag.content.length > 0) {
          views.push(<Text key={i}>{tag.content}</Text>);
        }
      } else {
        let view = null;
        if (bbCodeTagIntoNativeView.hasOwnProperty(tag.tagName)) {
          const TagName = bbCodeTagIntoNativeView[tag.tagName];
          view = (
            <TagName key={i}>
              {tag.content}
              {this._doRenderTagMap(tag.children)}
            </TagName>
          );
        }

        if (view !== null) {
          views.push(view);
        }
      }
    }

    return <View>{views}</View>;
  }

  render() {
    const tagMap = Parser(this.props.content);
    if (!tagMap.length) {
      return (
        <View>
          <Text>{this.props.content}</Text>
        </View>
      );
    }

    return this._doRenderTagMap(tagMap);
  }
}