#Custom Renderer

import React, { type ReactNode, Fragment } from "react";
import { Text, ScrollView, type TextStyle, type ImageStyle } from "react-native";
import Markdown, { Renderer, type RendererInterface } from "react-native-marked";
import FastImage from "react-native-fast-image";

class CustomRenderer extends Renderer implements RendererInterface {
  codespan(text: string, _styles?: TextStyle): ReactNode {
    return (
      <Text key={this.getKey()} style={{ backgroundColor: "#ff0" }}>
        {text}
      </Text>
    );
  }
  image(uri: string, _alt?: string, _style?: ImageStyle): ReactNode {
    return (
      <FastImage
        key={this.getKey()}
        style={{ width: 200, height: 200 }}
        source={{ uri }}
        resizeMode={FastImage.resizeMode.contain}
      />
    );
  }
}

const renderer = new CustomRenderer();

export default function App() {
  return <Markdown value={"`Hello`"} renderer={renderer} />;
}

// Hook variant
function WithHook() {
  const els = useMarkdown("`Hello`", { renderer } as any);
  return <ScrollView>{els.map((e, i) => <Fragment key={i}>{e}</Fragment>)}</ScrollView>;
}