[Lightbox] Open animation (#6159)

* Measure all rects for embeds

* Measure avi rects too

* Animate lightbox in and out

* Account for safe area in the animation

* Tune spring times

* Remove null checks for measurements

* Remove superfluous view

* Block swipe while opening

* Interpolate width/height on native side for Android

* Make it fast by animating only affine transforms

* Fix tall image final state

The initial animation frame is still off on both platforms.

* Try to squeeze perf

* Avoid blank images during animation on iOS

* Fix bad rebase

* Fix a huge memory issue due to expo/expo#24894

* Fix last frame flash

* Fix thum dim calculation for tall images

1 files changed, 10 insertions, 12 deletions

diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index ea0badab0..ab2471b33 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -6,13 +6,12 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import Animated, {
+import {
   AnimatedRef,
   measure,
   MeasuredDimensions,
   runOnJS,
   runOnUI,
-  useAnimatedRef,
 } from 'react-native-reanimated'
 import {Image} from 'expo-image'
 import {
@@ -69,7 +68,6 @@ export function PostEmbeds({
   viewContext?: PostEmbedViewContext
 }) {
   const {openLightbox} = useLightboxControls()
-  const containerRef = useAnimatedRef()
 
   // quote post with media
   // =
@@ -149,25 +147,25 @@ export function PostEmbeds({
       }))
       const _openLightbox = (
         index: number,
-        thumbDims: MeasuredDimensions | null,
+        thumbRects: (MeasuredDimensions | null)[],
       ) => {
         openLightbox({
-          images: items.map(item => ({
+          images: items.map((item, i) => ({
             ...item,
+            thumbRect: thumbRects[i] ?? null,
             type: 'image',
           })),
           index,
-          thumbDims,
         })
       }
       const onPress = (
         index: number,
-        ref: AnimatedRef<React.Component<{}, {}, any>>,
+        refs: AnimatedRef<React.Component<{}, {}, any>>[],
       ) => {
         runOnUI(() => {
           'worklet'
-          const dims = measure(ref)
-          runOnJS(_openLightbox)(index, dims)
+          const rects = refs.map(ref => (ref ? measure(ref) : null))
+          runOnJS(_openLightbox)(index, rects)
         })()
       }
       const onPressIn = (_: number) => {
@@ -180,7 +178,7 @@ export function PostEmbeds({
         const image = images[0]
         return (
           <ContentHider modui={moderation?.ui('contentMedia')}>
-            <Animated.View ref={containerRef} style={[a.mt_sm, style]}>
+            <View style={[a.mt_sm, style]}>
               <AutoSizedImage
                 crop={
                   viewContext === PostEmbedViewContext.ThreadHighlighted
@@ -191,13 +189,13 @@ export function PostEmbeds({
                     : 'constrained'
                 }
                 image={image}
-                onPress={() => onPress(0, containerRef)}
+                onPress={containerRef => onPress(0, [containerRef])}
                 onPressIn={() => onPressIn(0)}
                 hideBadge={
                   viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
                 }
               />
-            </Animated.View>
+            </View>
           </ContentHider>
         )
       }