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} /> ))}