Added open post images feature

package.json

@@ -59,6 +59,7 @@
     "react-native-gesture-handler": "^1.4.1",
     "react-native-iap": "3.4.15",
     "react-native-image-crop-picker": "^0.25.2",
+    "react-native-image-zoom-viewer": "^2.2.27",
     "react-native-keyboard-aware-scroll-view": "^0.8.0",
     "react-native-linear-gradient": "^2.4.2",
     "react-native-modal-dropdown": "^0.7.0",

src/components/postElements/body/view/config.js

@@ -1,4 +1,16 @@
-export default `document.addEventListener('click', function(event) {
+export default `
+const images = document.getElementsByTagName("IMG");
+for (i = 0; i < images.length; i++) {
+  const result = {
+    type: 'image',
+    href: images[i].getAttribute("src") || ''
+  }
+  const resultStr = JSON.stringify(JSON.stringify(result)); // workaround
+  const message = 'window.ReactNativeWebView.postMessage(' + resultStr + ')';
+  images[i].setAttribute("onClick", message);
+}
+
+document.addEventListener('click', function(event) {
   let el = event.target;
   // A element can be wrapped with inline element. Look parent elements.
   while (el.tagName !== 'A') {
@@ -8,8 +20,6 @@ export default `document.addEventListener('click', function(event) {
     el = el.parentNode;
   }
   if (!el || el.tagName !== 'A') {
-    window.ReactNativeWebView.postMessage('4');
-    if (el.tagName) window.ReactNativeWebView.postMessage(el.tagName);
     return;
   }
   if (el.getAttribute('target') === '_external') {
@@ -99,7 +109,6 @@ export default `document.addEventListener('click', function(event) {
       return false;
     }
   }
-  window.ReactNativeWebView.postMessage('4');
   const author = el.getAttribute('data-author').toString();
   window.ReactNativeWebView.postMessage(JSON.stringify(author));
 })

src/components/postElements/body/view/postBodyView.js

@@ -1,10 +1,11 @@
-import React, { Fragment } from 'react';
-import { Dimensions, Linking, Alert } from 'react-native';
+import React, { Fragment, useState } from 'react';
+import { Dimensions, Linking, Alert, Modal } from 'react-native';
 import { withNavigation } from 'react-navigation';
 import { useIntl, injectIntl } from 'react-intl';
 import AutoHeightWebView from 'react-native-autoheight-webview';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import get from 'lodash/get';
+import ImageViewer from 'react-native-image-zoom-viewer';
 
 import script from './config.js';
 import { PostPlaceHolder, CommentPlaceHolder } from '../../../basicUIElements';
@@ -19,10 +20,11 @@ const PostBody = ({
   body,
   commentDepth,
   isComment,
-  textSelectable = true,
   handleOnUserPress,
   handleOnPostPress,
 }) => {
+  const [isImageModalOpen, setIsImageModalOpen] = useState(false);
+  const [postImages, setPostImages] = useState([]);
   const intl = useIntl();
 
   const _handleOnLinkPress = event => {
@@ -63,6 +65,10 @@ const PostBody = ({
           break;
         case 'markdown-video-link':
           break;
+        case 'image':
+          setPostImages([{ url: href }]);
+          setIsImageModalOpen(true);
+          break;
 
         default:
           break;
@@ -208,6 +214,13 @@ const PostBody = ({
   `;
   return (
     <Fragment>
+      <Modal visible={isImageModalOpen} transparent={true}>
+        <ImageViewer
+          imageUrls={postImages}
+          enableSwipeDown
+          onCancel={() => setIsImageModalOpen(false)}
+        />
+      </Modal>
       <AutoHeightWebView
         source={{ html: test }}
         style={{ width: isComment ? WIDTH - (32 + 29 * commentDepth) : WIDTH - 32 }}

yarn.lock

@@ -7594,6 +7594,18 @@ react-native-image-crop-picker@^0.25.2:
   resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.25.3.tgz#46ee28b4a0a187240e388bd28a44cf8c274caec6"
   integrity sha512-jQ416WXEiEQ3w057QOYU++8/mDqYb2A/AGZY/NwR5eKda/z8a4wncWKj7oF9KBAHNKE1TmPrl9Rm0GZ0Jrzp6A==
 
+react-native-image-pan-zoom@^2.1.9:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.11.tgz#61bcb69219d95e76a9797d23e4a2e8e0bd654ae9"
+  integrity sha512-ZCisGUFpPchHXsjT7ZI0anlSLPgcTmjRKXqpVnPu3RDWFXfKjuL4zpY57DX4Y8YgGZCpbf9fApN7KjVYody2Mw==
+
+react-native-image-zoom-viewer@^2.2.27:
+  version "2.2.27"
+  resolved "https://registry.yarnpkg.com/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-2.2.27.tgz#fb3314c5dc86ac33da48cb31bf4920d97eecb6eb"
+  integrity sha512-BMA8ZGe6dub9mPbGhFn14eAnq8H5ig32nY9vPqTjsJluLTcwjkMjupu47dha1ikK7vFo0zpGDFKlv2WHbtf+EQ==
+  dependencies:
+    react-native-image-pan-zoom "^2.1.9"
+
 react-native-iphone-x-helper@^1.0.3:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"