Custom Renderer Option to render things like Images

[michaelkremenetsky]

I am using this library to render some markdown as it's much faster than any markdown renderer that I have come across thanks to the native component. The only issue is that I can't find a way to render images. To render images I was just wondering if there was a way to do any custom rendering similar to what I was doing in react-native-marked which I used before. Or at least is there a way to parse just the Images and render them using something like expo-image?

I was previously doing something like:

class CustomRenderer extends Renderer implements RendererInterface {
  link(
    children: string | ReactNode[],
    href: string,
    styles?: TextStyle,
  ): ReactNode {
    return (
      <RegularText
        selectable
        accessibilityRole="link"
        accessibilityHint="Opens in a new window"
        key={this.getKey()}
        onPress={() => {
          openWeb(href);
        }}
        // style={underline}
        style={[styles, { borderBottomWidth: 10, paddingBottom: 4 }]}
        // style={styles} // Style for this is handled on the useMarkdown hook
      >
        {children}
      </RegularText>
    );
  }
  image(uri: string, _alt?: string, _style?: ImageStyle): ReactNode {
    return (
      <Image
        key={this.getKey()}
        source={{ uri: uri }}
        placeholder={blurhash}
        style={{ borderRadius: 0 }}
        className={`h-[200px] w-[${width}]}`}
      />
    );
  }
  getTextNode(children: string | ReactNode[], styles?: TextStyle): ReactNode {
    return (
      <Text selectable key={this.getKey()} style={styles}>
        {children}
      </Text>
    );
  }
  getViewNode(children: ReactNode[] | null, styles?: ViewStyle): ReactNode {
    return (
      <View key={this.getKey()} style={styles}>
        {children}
      </View>
    );
  }
  getBlockquoteNode(children: ReactNode[], styles?: ViewStyle): ReactNode {
    {
      return (
        <View key={this.getKey()} style={styles}>
          {children}
        </View>
      );
    }
  }
}

[tomekzaw]

Hey @michaelkremenetsky, thanks for opening this issue.

Nope, currently we don't support showing images, but this is definitely something that we will be working on in the future.

Also, MarkdownTextInput is not a regular Markdown renderer; the main difference is that it doesn't skip Markdown syntax characters so you can still edit them. This means that if you type Hello *world*, the asterisks are not removed. That's why we are also working on MarkdownText component, see #125.

[tomekzaw]

FYI Inline image preview feature for web was added in #462; haven't started working on Android and iOS support yet.