How to use the simple-markdown.reactFor function in simple-markdown

_.merge(
          {},
          SimpleMarkdown.defaultRules,
          initialRules(mergedStyles),
          this.props.rules,
        ),
      )
      const child = Array.isArray(this.props.children)
        ? this.props.children.join('')
        : this.props.children
      // @TODO: Add another \n?
      const blockSource = `${child}\n`
      const tree = SimpleMarkdown.parserFor(rules)(blockSource, {
        inline: false,
      })
      return SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, 'react'))(
        tree,
      )
    }
    catch (errors) {
      this.props.errorHandler
        ? this.props.errorHandler(errors, children)
        : console.error(errors)
    }
    return null
  }

react: (node, output, state) => {
      return (
        
          {output(node.content, state)}
        
      )
    },
  },
}
// Markdown parser setup
const rawBuiltParser = SimpleMarkdown.parserFor(rules)
const parser = source => {
  const blockSource = source + "\n\n"
  return rawBuiltParser(blockSource, { inline: false })
}
const reactOutput = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, "react"))

export const toReact = md => {
  const syntaxTree = parser(md)
  return reactOutput(syntaxTree)
}

interface NativeMarkdownProps {
  md: string
}

export class MarkdownRenderer extends React.Component {
  render() {
    return 
  }
}

key={state.key}
          allowFontScaling={state.allowFontScaling}
        />
      )
    },
    paragraph: (node, output, state) => (
      
    ),
  })
)

// TODO: Fix the typing here. Can ast actually be a non-object? Can
// output actually only return strings?
const previewOutput = SimpleMarkdown.reactFor(
  (ast: SingleASTNode, output: Output, state: State): ReactElements => {
    // leaf node is just the raw value, so it has no ast.type
    if (typeof ast !== 'object') {
      return ast
    }

    switch (ast.type) {
      case 'emoji':
        return reactComponentsForMarkdownType.emoji(ast, output, state)
      case 'newline':
        return ' '
      case 'blockQuote':
        return '> ' + output(ast.content, state)
      case 'codeBlock':
        return ' ' + output(ast.content, state)
      default:

function parserFor (rules, returnAst) {
  const parser = SimpleMarkdown.parserFor(rules)
  const renderer = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, 'react'))
  return function (input = '', inline = true, state = {}, transform = null) {
    if (!inline) {
      input += '\n\n'
    }

    let ast = parser(input, { inline, ...state })
    ast = flattenAst(ast)
    if (transform) {
      ast = transform(ast)
    }

    if (returnAst) {
      return ast
    }

    return renderer(ast)

function parserFor(rules, returnAst) {
  const parser = SimpleMarkdown.parserFor(rules);
  const renderer = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, 'react'));
  return function(input='', inline=true, state={}, transform=null) {
    if (!inline) {
      input += '\n\n';
    }

    let ast = parser(input, { inline, ...state });
    ast = flattenAst(ast);
    if (transform) {
      ast = transform(ast);
    }

    if (returnAst) {
      return ast;
    }

    return renderer(ast);

render() {
    const {rules = {}, styles = {}, onLinkPress} = this.props

    const mergedStyles = mergeStyles(DefaultStyles, styles)
    const mergedRules = mergeRules(SimpleMarkdown.defaultRules, simpleMarkdownRules(mergeRules(DefaultRules, rules), mergedStyles))

    const markdown = (Array.isArray(this.props.children) ? this.props.children.join('') : this.props.children) + '\n\n'

    const ast = SimpleMarkdown.parserFor(mergedRules)(markdown, {inline: false})
    const render = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(mergedRules, 'react'))
    const initialRenderState = {onLinkPress: onLinkPress}

    return (
      
    )
  }
}

* Markdown markup and widget references are ignored.
 */
var characterCount = (source) => {
    var ast = parse(source);
    var content = getContent(ast).join('');
    return content.length;
};

module.exports = {
    characterCount: characterCount,
    traverseContent: traverseContent,
    parse: parse,
    parseInline: inlineParser,
    reactFor: SimpleMarkdown.reactFor,
    ruleOutput: SimpleMarkdown.ruleOutput(rules, "react"),
    basicOutput: SimpleMarkdown.reactFor(
        SimpleMarkdown.ruleOutput(rules, "react")
    ),
    sanitizeUrl: SimpleMarkdown.sanitizeUrl,
};

switch (ast.type) {
      case 'emoji':
        return reactComponentsForMarkdownType.emoji(ast, output, state)
      case 'newline':
        return ' '
      case 'blockQuote':
        return '> ' + output(ast.content, state)
      case 'codeBlock':
        return ' ' + output(ast.content, state)
      default:
        return output(ast.content, state)
    }
  }
)

const reactOutput = SimpleMarkdown.reactFor(ruleOutput(reactComponentsForMarkdownType))

export {EmojiIfExists, bigEmojiOutput, markdownStyles, previewOutput, reactOutput}

onLink: props.onLink,
      bgImage: props.bgImage,
      onImageOpen: props.onImageOpen,
      onImageClose: props.onImageClose,
    };

    const mergedStyles = merge({}, styles, props.styles);
    var rules = require('./rules')(mergedStyles, opts);
    rules = merge({}, SimpleMarkdown.defaultRules, rules);

    const parser = SimpleMarkdown.parserFor(rules);
    this.parse = function (source) {
      const blockSource = source + '\n\n';
      return parser(blockSource, {inline: false});
    };
    this.renderer = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, 'react'));
  }