reza added blog text render component

blog.svg

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24.055" height="24.055" viewBox="0 0 24.055 24.055">
-  <g id="vuesax_linear_note-2" data-name="vuesax/linear/note-2" transform="translate(-108 -252)">
-    <g id="note-2" transform="translate(108 252)">
-      <path id="Vector" d="M14.724,7.956l-.982,4.19c-.842,3.618-2.506,5.081-5.633,4.781a10.538,10.538,0,0,1-1.624-.274l-1.684-.4C.623,15.263-.67,13.2.312,9.009l.982-4.2A10.5,10.5,0,0,1,2.036,2.6C3.209.179,5.2-.473,8.551.319L10.225.71C14.425,1.692,15.707,3.767,14.724,7.956Z" transform="translate(6.985 2.507)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
-      <path id="Vector-2" data-name="Vector" d="M13.1,14.323a9.394,9.394,0,0,1-2.352,1.083l-1.583.521c-3.979,1.283-6.074.21-7.367-3.767L.515,8.2C-.768,4.22.294,2.115,4.274.832L5.857.311A10.247,10.247,0,0,1,7.03,0a10.5,10.5,0,0,0-.742,2.205L5.306,6.4c-.982,4.19.31,6.255,4.487,7.247l1.684.4a10.538,10.538,0,0,0,1.626.271Z" transform="translate(1.991 5.112)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
-      <path id="Vector-3" data-name="Vector" d="M0,0,4.862,1.233" transform="translate(12.669 8.549)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
-      <path id="Vector-4" data-name="Vector" d="M0,0,2.906.742" transform="translate(13.641 12.428)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
-      <path id="Vector-5" data-name="Vector" d="M0,0H24.055V24.055H0Z" transform="translate(24.055 24.055) rotate(180)" fill="none" opacity="0"/>
-    </g>
-  </g>
-</svg>

package.json

@@ -40,7 +40,7 @@
     "react-i18next": "^11.15.1",
     "react-native": "0.64.3",
     "react-native-awesome-alerts": "^1.5.2",
-    "react-native-html-parser": "^0.1.0",
+    "react-native-htmlview": "^0.16.0",
     "react-native-openanything": "^0.0.6",
     "react-native-qrcode-scanner": "^1.5.4",
     "react-native-ratings": "^8.1.0",

src/screens/Blog/index.js

@@ -14,6 +14,7 @@ import {
 import { connect } from "react-redux";
 import { blog, publicApi } from "../../redux/actions";
 import { LinearGradient } from "expo-linear-gradient";
+import HTMLView from "react-native-htmlview";
 
 //components
 import Hashtags from "../Blogs/layouts/Hashtags";
@@ -27,11 +28,24 @@ import fontSize from "../../constants/fontSize";
 import Colors from "../../constants/Colors";
 
 //variables
-const DomParser = require("react-native-html-parser").DOMParser;
-
 const ios = Platform.OS === "ios";
 const { width } = Dimensions.get("window");
 
+//func
+const renderNode = (node, index, siblings, parent, defaultRenderer) => {
+  if (node.name == "img") {
+    const a = node.attribs;
+    return (
+      <Image
+        style={{ width: 300, height: 300 }}
+        source={{ uri: node.attribs.src }}
+      />
+    );
+  }
+};
+
+
+
 export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
   useEffect(() => {
     getInfo({ id: route.params.id });
@@ -40,6 +54,8 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
     }
   }, []);
 
+
+
   return (
     <SafeAreaView
       style={{
@@ -158,6 +174,7 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
               new DomParser()?.parseFromString(blog?.text, "text/html")
                 ?.childNodes
             )} */}
+            <HTMLView value={blog?.text} renderNode={renderNode} />
           </View>
           <Header title={"پیشنهادی "} />
           {blogs.length && (
@@ -207,4 +224,4 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     paddingHorizontal: 0,
   },
-});
+});

yarn.lock

@@ -2787,7 +2787,7 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
-domelementtype@1:
+domelementtype@1, domelementtype@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
@@ -2797,7 +2797,14 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
   integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
 
-domutils@^1.7.0:
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
+  dependencies:
+    domelementtype "1"
+
+domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
   integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
@@ -2839,6 +2846,11 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
+entities@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -2916,6 +2928,11 @@ event-target-shim@^5.0.0, event-target-shim@^5.0.1:
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
+eventemitter2@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-1.0.5.tgz#f983610517b1737c0b9dc643beca93893c04df18"
+  integrity sha1-+YNhBRexc3wLncZDvsqTiTwE3xg=
+
 exec-sh@^0.3.2:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc"
@@ -3615,6 +3632,19 @@ html-parse-stringify@^3.0.1:
   dependencies:
     void-elements "3.1.0"
 
+htmlparser2-without-node-native@^3.9.2:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2-without-node-native/-/htmlparser2-without-node-native-3.9.2.tgz#b3ed050d877d0ff3465969e339877b7f9f6631f6"
+  integrity sha1-s+0FDYd9D/NGWWnjOYd7f59mMfY=
+  dependencies:
+    domelementtype "^1.3.0"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    eventemitter2 "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
 http-errors@1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
@@ -3688,7 +3718,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -5502,10 +5532,13 @@ react-native-codegen@^0.0.6:
     jscodeshift "^0.11.0"
     nullthrows "^1.1.1"
 
-react-native-html-parser@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/react-native-html-parser/-/react-native-html-parser-0.1.0.tgz#c35de1dc325562da26e68befa423bac34505ba48"
-  integrity sha512-G5d0pk7TA9YgjVJhLRf2zMOOf1HXd8ItM9JYsTS2pXoEfSRfMfRU5iTj03LGwvHU2NT9kc18NDJeLgZY6+Bbvg==
+react-native-htmlview@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/react-native-htmlview/-/react-native-htmlview-0.16.0.tgz#4a70d7c02ab3ab18e1cb708c0dcf0d99bc6c1cdc"
+  integrity sha512-yUrzXje+kKKLkWkccKNBeg3CbvrodA7f4+1d/XRrrg0SDFfIdj7NnjRdH+WXqGze6R501bfRZOPaZx/M5HTz3A==
+  dependencies:
+    entities "^1.1.1"
+    htmlparser2-without-node-native "^3.9.2"
 
 react-native-iphone-x-helper@^1.3.0:
   version "1.3.1"
@@ -5683,16 +5716,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^3.4.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-readable-stream@~2.3.6:
+readable-stream@^2.0.2, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -5705,6 +5729,15 @@ readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readable-stream@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 recast@^0.20.3:
   version "0.20.5"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.20.5.tgz#8e2c6c96827a1b339c634dd232957d230553ceae"