fix: crash when opening image in channel multiple times

showtime-xyz · Nov 20, 2023 · 86a9c69 · 86a9c69
1 parent 69bb2b5
commit 86a9c69
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/packages/app/components/creator-channels/components/image-preview.tsx b/packages/app/components/creator-channels/components/image-preview.tsx
@@ -55,24 +55,25 @@ export const ImagePreview = ({
           tw="web:cursor-pointer"
           transition={300}
           recyclingKey={attachment.attachments[0]?.media_upload}
-          width={width}
-          height={height}
           source={
             fileObj.url
               ? {
                   uri: fileObj.url + "?optimizer=image&width=300&quality=50",
-                  width: width,
-                  height: height,
+                  width: 300,
                 }
               : undefined
           }
+          placeholderContentFit={"contain"}
           alt=""
           style={[
             { borderRadius: 8 },
             { backgroundColor: isDark ? "#333" : "#f5f5f5" },
             { display: isViewable ? undefined : "none" },
+            { width },
+            { height },
             style,
           ]}
+          cachePolicy={"none"}
         />
       </Pressable>
       {!isViewable ? (

diff --git a/packages/app/screens/shared-element.tsx b/packages/app/screens/shared-element.tsx
@@ -156,21 +156,29 @@ const SharedElementScreen = withColorScheme(() => {
                       <AnimatedImage
                         source={{
                           uri: url + "?optimizer=image&width=1000",
+                          width: 1000,
                         }}
+                        placeholder={
+                          url
+                            ? {
+                                uri:
+                                  url + "?optimizer=image&width=300&quality=50",
+                                width: 300,
+                              }
+                            : undefined
+                        }
+                        placeholderContentFit={"contain"}
                         ref={animatedRef}
-                        placeholder={{
-                          uri: url + "?optimizer=image&width=300",
-                          width: normalizedImageDimensions.width,
-                          height: normalizedImageDimensions.height,
-                        }}
-                        placeholderContentFit={"cover"}
                         style={[
                           {
                             width: normalizedImageDimensions.width,
                             height: normalizedImageDimensions.height,
                           },
                           animatedStyles,
                         ]}
+                        width={normalizedImageDimensions.width}
+                        height={normalizedImageDimensions.height}
+                        cachePolicy={"none"}
                       />
                     </Reanimated.View>
                   </View>