removed scrolling glitch by maintain image height cahce

src/components/postCard/container/postCardContainer.js

@@ -27,6 +27,8 @@ const PostCardContainer = ({
   content,
   isHideImage,
   nsfw,
+  imageHeight,
+  setImageHeight,
 }) => {
   const [_content, setContent] = useState(content);
   const [reblogs, setReblogs] = useState([]);
@@ -139,6 +141,8 @@ const PostCardContainer = ({
       isNsfwPost={nsfw || '1'}
       reblogs={reblogs}
       activeVotes={activeVotes}
+      imageHeight={imageHeight}
+      setImageHeight={setImageHeight}
     />
   );
 };

src/components/postCard/view/postCardView.js

@@ -37,9 +37,11 @@ const PostCardView = ({
   isNsfwPost,
   intl,
   activeVotes,
+  imageHeight,
+  setImageHeight,
 }) => {
   const [activeVotesCount, setActiveVotesCount] = useState(activeVotes.length || 0);
-  const [calcImgHeight, setCalcImgHeight] = useState(300);
+  const [calcImgHeight, setCalcImgHeight] = useState(imageHeight || 300);
 
   // Component Functions
 
@@ -115,9 +117,12 @@ const PostCardView = ({
                   : FastImage.resizeMode.cover
               }
               onLoad={(evt) => {
-                setCalcImgHeight(
-                  (evt.nativeEvent.height / evt.nativeEvent.width) * (dim.width - 18),
-                );
+                if (!imageHeight) {
+                  const height =
+                    (evt.nativeEvent.height / evt.nativeEvent.width) * (dim.width - 18);
+                  setCalcImgHeight(height);
+                  setImageHeight(content.local_id, height);
+                }
               }}
             />
           )}

src/components/postsList/container/postsListContainer.tsx

@@ -17,6 +17,8 @@ const postsListContainer = ({
 }:postsListContainerProps, ref) => {
     const flatListRef = useRef(null);
 
+    const [imageHeights, setImageHeights] = useState(new Map<number, number>());
+
     const isHideImages = useSelector((state) => state.ui.hidePostsThumbnails);
     const posts = useSelector((state) => {
         return isFeedScreen
@@ -56,29 +58,50 @@ const postsListContainer = ({
       
     }, [scrollPosition])
 
+
+    const _setImageHeightInMap = (postId:number, height:number) => {
+      if(postId && height){
+        setImageHeights(imageHeights.set(postId, height));
+      }
+    }
+
     const _renderItem = ({ item, index }:{item:any, index:number}) => {
         const e = [];
+    
         if (index % 3 === 0) {
           const ix = index / 3 - 1;
           if (promotedPosts[ix] !== undefined) {
             const p = promotedPosts[ix];
             if (get(p, 'author', null) && posts.filter((x) => x.permlink === p.permlink).length <= 0) {
+              
+              //get image height from cache if available
+              const localId =  p.local_id;
+              const imgHeight = imageHeights.get(localId)
+
               e.push(
                 <PostCard
                   key={`${p.author}-${p.permlink}-prom`}
                   content={p}
                   isHideImage={isHideImages}
+                  imageHeight={imgHeight}
+                  setImageHeight = {_setImageHeightInMap}
                 />,
               );
             }
           }
         }
         if (get(item, 'author', null)) {
+          //get image height from cache if available
+          const localId = item.local_id 
+          const imgHeight = imageHeights.get(localId)
+
           e.push(
             <PostCard
               key={`${item.author}-${item.permlink}`}
               content={item}
               isHideImage={isHideImages}
+              imageHeight={imgHeight}
+              setImageHeight = {_setImageHeightInMap}
             />,
           );
         }
@@ -100,6 +123,7 @@ const postsListContainer = ({
             maxToRenderPerBatch={3}
             initialNumToRender={3}
             windowSize={5}
+            extraData={imageHeights}
             {...props}
         />
     )

src/utils/generateUuid.ts

@@ -0,0 +1,20 @@
+export default ({short}:{short:boolean} = {short:false}): string => {
+    var d = new Date().getTime(); //Timestamp
+    var d2 = 0;
+    const variant = short
+      ? 'xxxx-4xxx-yxxx'
+      : 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
+    return variant.replace(/[xy]/g, function (c) {
+      var r = Math.random() * 16; //random number between 0 and 16
+      if (d > 0) {
+        //Use timestamp until depleted
+        r = (d + r) % 16 | 0;
+        d = Math.floor(d / 16);
+      } else {
+        //Use microseconds since page-load if supported
+        r = (d2 + r) % 16 | 0;
+        d2 = Math.floor(d2 / 16);
+      }
+      return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+    });
+  };

src/utils/postParser.js

@@ -9,6 +9,7 @@ import FastImage from 'react-native-fast-image';
 import parseAsset from './parseAsset';
 import { getReputation } from './reputation';
 import { getResizedAvatar, getResizedImage } from './image';
+import generateUuid from './generateUuid';
 
 const webp = Platform.OS === 'ios' ? false : true;
 
@@ -24,6 +25,9 @@ export const parsePost = (post, currentUserName, isPromoted, isList = false) =>
   if (!post) {
     return null;
   }
+
+  post.local_id = generateUuid({ short: true });
+
   if (currentUserName === post.author) {
     post.markdownBody = post.body;
   }