Merge pull request #2279 from ecency/nt/glitch-fix

Scroll Glitch

src/components/autoHeightImage/autoHeightImage.tsx

@@ -2,21 +2,24 @@ import React, { useEffect, useState } from "react";
 import { Image } from "react-native";
 import EStyleSheet from "react-native-extended-stylesheet";
 import FastImage from "react-native-fast-image";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native-gesture-handler";
 
+  interface AutoHeightImageProps {
+    contentWidth:number, 
+    imgUrl:string,
+    isAnchored:boolean,
+    activeOpacity?:number,
+    onPress:()=>void,
+  }
 
 
   export const AutoHeightImage = ({
     contentWidth, 
     imgUrl, 
     isAnchored, 
+    activeOpacity,
     onPress
-  }:{
-    contentWidth:number, 
-    imgUrl:string,
-    isAnchored:boolean,
-    onPress:()=>void,
-  }) => {
+  }:AutoHeightImageProps) => {
 
 
     const [imgWidth, setImgWidth] = useState(contentWidth);
@@ -47,14 +50,14 @@ import { TouchableWithoutFeedback } from "react-native-gesture-handler";
     }
 
     return (
-      <TouchableWithoutFeedback onPress={onPress} disabled={isAnchored}>
+      <TouchableOpacity onPress={onPress} disabled={isAnchored} activeOpacity={activeOpacity || 1}>
         <FastImage 
           style={imgStyle}
           source={{uri:imgUrl}}
           resizeMode={FastImage.resizeMode.contain}
           onLoad={_onLoad}
         />
-      </TouchableWithoutFeedback>
+      </TouchableOpacity>
       
     )
   }

src/components/postHtmlRenderer/postHtmlRenderer.tsx

@@ -121,6 +121,27 @@ export const PostHtmlRenderer = memo(
       } catch (error) { }
     };
 
+
+    //this method checks if image is a child of table column
+    //and calculates img width accordingly,
+    //returns full width if img is not part of table
+    const getMaxImageWidth = (tnode: TNode) => {
+      //return full width if not parent exist
+      if (!tnode.parent || tnode.parent.tagName === 'body') {
+        return contentWidth;
+      }
+
+      //return divided width based on number td tags
+      if (tnode.parent.tagName === 'td' || tnode.parent.tagName === 'th') {
+        const cols = tnode.parent.parent.children.length;
+        return contentWidth / cols;
+      }
+
+      //check next parent
+      return getMaxImageWidth(tnode.parent);
+    };
+
+
     const _onElement = (element: Element) => {
       if (element.tagName === 'img' && element.attribs.src) {
         const imgUrl = element.attribs.src;
@@ -129,6 +150,9 @@ export const PostHtmlRenderer = memo(
       }
     };
 
+
+
+
     const _anchorRenderer = ({ InternalRenderer, tnode, ...props }: CustomRendererProps<TNode>) => {
       const parsedTnode = parseLinkData(tnode);
       const _onPress = () => {
@@ -162,29 +186,24 @@ export const PostHtmlRenderer = memo(
         }
       }
 
+      if (tnode.children.length === 1 && tnode.children[0].tagName === 'img') {
+        const maxImgWidth = getMaxImageWidth(tnode);
+        return <AutoHeightImage
+          contentWidth={maxImgWidth}
+          imgUrl={tnode.children[0].attributes.src}
+          isAnchored={false}
+          activeOpacity={0.8}
+          onPress={_onPress}
+        />
+      }
+
 
       return <InternalRenderer tnode={tnode} onPress={_onPress} {...props} />;
     };
 
 
-    //this method checks if image is a child of table column
-    //and calculates img width accordingly,
-    //returns full width if img is not part of table
-    const getMaxImageWidth = (tnode: TNode) => {
-      //return full width if not parent exist
-      if (!tnode.parent || tnode.parent.tagName === 'body') {
-        return contentWidth;
-      }
 
-      //return divided width based on number td tags
-      if (tnode.parent.tagName === 'td' || tnode.parent.tagName === 'th') {
-        const cols = tnode.parent.parent.children.length;
-        return contentWidth / cols;
-      }
 
-      //check next parent
-      return getMaxImageWidth(tnode.parent);
-    };
 
     const _imageRenderer = ({ tnode }: CustomRendererProps<TNode>) => {
       const imgUrl = tnode.attributes.src;
@@ -236,7 +255,8 @@ export const PostHtmlRenderer = memo(
         <ScrollView horizontal={true} scrollEnabled={isScrollable}>
           <TDefaultRenderer {...props} />
         </ScrollView>
-      )}
+      )
+    }
 
 
     // iframe renderer for rendering iframes in body