From 1a5b8b2c94ce1e66bff7e7295b799ae5b0613988 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 18 Apr 2024 20:37:22 +0100
Subject: [PATCH] Add layout transitions to the composer photo gallery on iOS
 (#3609)

* add layoutanimation + transition to images

* make iOS-only

* use useLayoutEffect

* make iOS only (again)
---
 src/view/com/composer/Composer.tsx       | 17 ++++++++++++++++-
 src/view/com/composer/photos/Gallery.tsx | 20 +++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index f8af6ce1..f90bdbee 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -1,9 +1,17 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   ActivityIndicator,
   BackHandler,
   Keyboard,
   KeyboardAvoidingView,
+  LayoutAnimation,
   Platform,
   Pressable,
   ScrollView,
@@ -122,6 +130,13 @@ export const ComposePost = observer(function ComposePost({
     () => new GalleryModel(initImageUris),
     [initImageUris],
   )
+
+  useLayoutEffect(() => {
+    if (isIOS) {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    }
+  }, [gallery.size])
+
   const onClose = useCallback(() => {
     closeComposer()
   }, [closeComposer])
diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index 69c8debb..88b649e5 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -1,19 +1,20 @@
 import React, {useState} from 'react'
 import {ImageStyle, Keyboard, LayoutChangeEvent} from 'react-native'
-import {GalleryModel} from 'state/models/media/gallery'
-import {observer} from 'mobx-react-lite'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {s, colors} from 'lib/styles'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {Image} from 'expo-image'
-import {Text} from 'view/com/util/text/Text'
-import {Dimensions} from 'lib/media/types'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {observer} from 'mobx-react-lite'
+
+import {useModalControls} from '#/state/modals'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
+import {Dimensions} from 'lib/media/types'
+import {colors, s} from 'lib/styles'
 import {isNative} from 'platform/detection'
+import {GalleryModel} from 'state/models/media/gallery'
+import {Text} from 'view/com/util/text/Text'
 
 const IMAGE_GAP = 8
 
@@ -197,6 +198,7 @@ const GalleryInner = observer(function GalleryImpl({
               }}
               accessible={true}
               accessibilityIgnoresInvertColors
+              transition={200}
             />
           </View>
         ))}