Drive-by lightbox refactors (#1659)

* Remove dead code from lightbox

* Rename imageIndex prop to initialImageIndex

* Rename currentImageIndex to imageIndex

src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts

@@ -39,29 +39,10 @@ const useImageDimensions = (image: ImageSource): Dimensions | null => {
   // eslint-disable-next-line @typescript-eslint/no-shadow
   const getImageDimensions = (image: ImageSource): Promise<Dimensions> => {
     return new Promise(resolve => {
-      if (typeof image === 'number') {
-        const cacheKey = `${image}`
-        let imageDimensions = imageDimensionsCache.get(cacheKey)
-
-        if (!imageDimensions) {
-          const {width, height} = Image.resolveAssetSource(image)
-          imageDimensions = {width, height}
-          imageDimensionsCache.set(cacheKey, imageDimensions)
-        }
-
-        resolve(imageDimensions)
-
-        return
-      }
-
-      // @ts-ignore
       if (image.uri) {
         const source = image as ImageURISource
-
         const cacheKey = source.uri as string
-
         const imageDimensions = imageDimensionsCache.get(cacheKey)
-
         if (imageDimensions) {
           resolve(imageDimensions)
         } else {

src/view/com/lightbox/ImageViewing/index.tsx

@@ -38,8 +38,7 @@ import {Edge, SafeAreaView} from 'react-native-safe-area-context'
 
 type Props = {
   images: ImageSource[]
-  keyExtractor?: (imageSrc: ImageSource, index: number) => string
+  initialImageIndex: number
-  imageIndex: number
   visible: boolean
   onRequestClose: () => void
   presentationStyle?: ModalProps['presentationStyle']
@@ -60,8 +59,7 @@ const ANIMATION_CONFIG = {
 
 function ImageViewing({
   images,
-  keyExtractor,
+  initialImageIndex,
-  imageIndex,
   visible,
   onRequestClose,
   backgroundColor = DEFAULT_BG_COLOR,
@@ -71,7 +69,7 @@ function ImageViewing({
   const imageList = useRef<VirtualizedList<ImageSource>>(null)
   const [isScaled, setIsScaled] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
-  const [currentImageIndex, setImageIndex] = useState(imageIndex)
+  const [imageIndex, setImageIndex] = useState(initialImageIndex)
   const [headerTranslate] = useState(
     () => new Animated.ValueXY(INITIAL_POSITION),
   )
@@ -125,10 +123,13 @@ function ImageViewing({
   }, [])
 
   const onLayout = useCallback(() => {
-    if (imageIndex) {
+    if (initialImageIndex) {
-      imageList.current?.scrollToIndex({index: imageIndex, animated: false})
+      imageList.current?.scrollToIndex({
+        index: initialImageIndex,
+        animated: false,
+      })
     }
-  }, [imageList, imageIndex])
+  }, [imageList, initialImageIndex])
 
   // This is a hack.
   // RNGH doesn't have an easy way to express that pinch of individual items
@@ -159,7 +160,7 @@ function ImageViewing({
         <Animated.View style={[styles.header, {transform: headerTransform}]}>
           {typeof HeaderComponent !== 'undefined' ? (
             React.createElement(HeaderComponent, {
-              imageIndex: currentImageIndex,
+              imageIndex,
             })
           ) : (
             <ImageDefaultHeader onRequestClose={onRequestClose} />
@@ -205,19 +206,12 @@ function ImageViewing({
             setIsScaled(false)
             onScroll(e)
           }}
-          //@ts-ignore
+          keyExtractor={imageSrc => imageSrc.uri}
-          keyExtractor={(imageSrc, index) =>
-            keyExtractor
-              ? keyExtractor(imageSrc, index)
-              : typeof imageSrc === 'number'
-              ? `${imageSrc}`
-              : imageSrc.uri
-          }
         />
         {typeof FooterComponent !== 'undefined' && (
           <Animated.View style={[styles.footer, {transform: footerTransform}]}>
             {React.createElement(FooterComponent, {
-              imageIndex: currentImageIndex,
+              imageIndex,
             })}
           </Animated.View>
         )}
@@ -250,7 +244,7 @@ const styles = StyleSheet.create({
 })
 
 const EnhancedImageViewing = (props: Props) => (
-  <ImageViewing key={props.imageIndex} {...props} />
+  <ImageViewing key={props.initialImageIndex} {...props} />
 )
 
 export default EnhancedImageViewing

src/view/com/lightbox/Lightbox.tsx

@@ -26,7 +26,7 @@ export const Lightbox = observer(function Lightbox() {
     return (
       <ImageView
         images={[{uri: opts.profileView.avatar || ''}]}
-        imageIndex={0}
+        initialImageIndex={0}
         visible
         onRequestClose={onClose}
         FooterComponent={LightboxFooter}
@@ -37,7 +37,7 @@ export const Lightbox = observer(function Lightbox() {
     return (
       <ImageView
         images={opts.images.map(img => ({...img}))}
-        imageIndex={opts.index}
+        initialImageIndex={opts.index}
         visible
         onRequestClose={onClose}
         FooterComponent={LightboxFooter}