How to render the form in react native markdown?

43 views Asked by At

In react native, I need to render the form inside the markdown. I found react-native-marked and it's tokenizer with custom components to be doing close to what i need but it just renders the text. Is it possible to render the actual form inside the markdown?

import React from 'react';
import Markdown, {
  MarkedTokenizer,
  Renderer,
  CustomToken,
  RendererInterface,
} from 'react-native-marked';

import {TextInput} from 'react-native';

class CustomTokenizer extends MarkedTokenizer<CustomToken> {
  // Override
  text(this: MarkedTokenizer<CustomToken>, src: string) {
    const match = src.match(/\[\[customForm\]\]/);
    if (match) {
      const token: CustomToken = {
        type: 'custom',
        raw: match[0],
        identifier: 'customForm',
        args: {
          pageId: '123',
        },
      };
      return token;
    }

    return super.codespan(src);
  }
}

class CustomRenderer extends Renderer implements RendererInterface {
  // Custom Token implementation
  custom(
    identifier: string,
    _raw: string,
    _children?: React.ReactNode[],
    args?: Record<string, unknown>,
  ): React.ReactNode {
    if (identifier === 'customForm') {
      return <TextInput placeholder='enter your text here' />;
    }
    return null;
  }
}

export const MarkdownForm: React.FC = () => {
  const markdownText = 'Some text [[customForm]] more text';

  const renderer = new CustomRenderer();
  const tokenizer = new CustomTokenizer();

  return (
    <Markdown renderer={renderer} tokenizer={tokenizer} value={markdownText} />
  );
};
0

There are 0 answers