Open
Description
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>
);
}
}
}