react-native-markdown-package icon indicating copy to clipboard operation
react-native-markdown-package copied to clipboard

SVG rendering support

Open mandrade2 opened this issue 2 years ago • 0 comments

Hey there! I'm using this package for a small project and I realized you render images with the react-native Image component which does not support SVG files. I made some small changes to support SVG uri's with react-native-svg. I tried opening a PR but couldn't. Is this something you would like to add to the package? I would need write permissions then.

Let me know what you think! Here's the proposed diff.

diff --git a/rules.js b/rules.js
index 789b67f..faa5ba2 100644
--- a/rules.js
+++ b/rules.js
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { SvgUri } from 'react-native-svg';
 import {
   Image,
   Text,
@@ -141,12 +141,20 @@ module.exports = function (styles, opts = {}) {
       react: function (node, output, {...state}) {
         var imageParam = opts.imageParam ? opts.imageParam : '';
         var target = node.target + imageParam;
-        var image = React.createElement(Image, {
-          key: state.key,
-          // resizeMode: 'contain',
-          source: {uri: target},
-          style: styles.image,
-        });
+        var image
+        if (target.match(/.*\.svg(\?.*)?$/)) {
+          image = React.createElement(SvgUri, {
+            key: state.key,
+            uri: target,
+            style: styles.image,
+          });
+        } else{
+          image = React.createElement(Image, {
+            key: state.key,
+            source: {uri: target},
+            style: styles.image,
+          });
+        }
         if (enableLightBox) {
           return React.createElement(Lightbox, {
             activeProps: styles.imageBox,

The only remaining thing other than this would be adding the dependency to the package.json and the lock file.

mandrade2 avatar Feb 13 '23 21:02 mandrade2