Measure tapped image coordinates before opening lightbox (#6001)

* Measure image on press

* Pass dimensions to the lightbox component

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

@@ -11,6 +11,7 @@
 import React, {ComponentType, useCallback, useMemo, useState} from 'react'
 import {Platform, StyleSheet, View} from 'react-native'
 import PagerView from 'react-native-pager-view'
+import {MeasuredDimensions} from 'react-native-reanimated'
 import Animated, {useAnimatedStyle, withSpring} from 'react-native-reanimated'
 import {Edge, SafeAreaView} from 'react-native-safe-area-context'
 
@@ -20,6 +21,7 @@ import ImageItem from './components/ImageItem/ImageItem'
 
 type Props = {
   images: ImageSource[]
+  thumbDims: MeasuredDimensions | null
   initialImageIndex: number
   visible: boolean
   onRequestClose: () => void
@@ -32,6 +34,7 @@ const DEFAULT_BG_COLOR = '#000'
 
 function ImageViewing({
   images,
+  thumbDims: _thumbDims, // TODO: Pass down and use for animation.
   initialImageIndex,
   visible,
   onRequestClose,

src/view/com/lightbox/Lightbox.tsx

@@ -35,6 +35,7 @@ export function Lightbox() {
           {uri: opts.profile.avatar || '', thumbUri: opts.profile.avatar || ''},
         ]}
         initialImageIndex={0}
+        thumbDims={opts.thumbDims}
         visible
         onRequestClose={onClose}
         FooterComponent={LightboxFooter}
@@ -46,6 +47,7 @@ export function Lightbox() {
       <ImageView
         images={opts.images.map(img => ({...img}))}
         initialImageIndex={opts.index}
+        thumbDims={opts.thumbDims}
         visible
         onRequestClose={onClose}
         FooterComponent={LightboxFooter}