Expensify
Custom Renderer Option to render things like Images
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>
);
}
}
}
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 https://github.com/Expensify/react-native-live-markdown/pull/125.
FYI Inline image preview feature for web was added in https://github.com/Expensify/react-native-live-markdown/pull/462; haven't started working on Android and iOS support yet.
Hi @szt217, unfortunately not, https://github.com/Expensify/react-native-live-markdown/issues/183#issuecomment-2360955910 is still current