forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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)
authored by
Samuel Newman
and committed by
GitHub
1a5b8b2c
bef7d8a3
+27
-10
+16
-1
src/view/com/composer/Composer.tsx
+16
-1
src/view/com/composer/Composer.tsx
···
1
-
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
1
+
import React, {
2
+
useCallback,
3
+
useEffect,
4
+
useLayoutEffect,
5
+
useMemo,
6
+
useRef,
7
+
useState,
8
+
} from 'react'
2
9
import {
3
10
ActivityIndicator,
4
11
BackHandler,
5
12
Keyboard,
6
13
KeyboardAvoidingView,
14
+
LayoutAnimation,
7
15
Platform,
8
16
Pressable,
9
17
ScrollView,
···
122
130
() => new GalleryModel(initImageUris),
123
131
[initImageUris],
124
132
)
133
+
134
+
useLayoutEffect(() => {
135
+
if (isIOS) {
136
+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
137
+
}
138
+
}, [gallery.size])
139
+
125
140
const onClose = useCallback(() => {
126
141
closeComposer()
127
142
}, [closeComposer])
+11
-9
src/view/com/composer/photos/Gallery.tsx
+11
-9
src/view/com/composer/photos/Gallery.tsx
···
1
1
import React, {useState} from 'react'
2
2
import {ImageStyle, Keyboard, LayoutChangeEvent} from 'react-native'
3
-
import {GalleryModel} from 'state/models/media/gallery'
4
-
import {observer} from 'mobx-react-lite'
5
-
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
6
-
import {s, colors} from 'lib/styles'
7
3
import {StyleSheet, TouchableOpacity, View} from 'react-native'
8
4
import {Image} from 'expo-image'
9
-
import {Text} from 'view/com/util/text/Text'
10
-
import {Dimensions} from 'lib/media/types'
5
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
6
+
import {msg, Trans} from '@lingui/macro'
7
+
import {useLingui} from '@lingui/react'
8
+
import {observer} from 'mobx-react-lite'
9
+
10
+
import {useModalControls} from '#/state/modals'
11
11
import {usePalette} from 'lib/hooks/usePalette'
12
12
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
13
-
import {Trans, msg} from '@lingui/macro'
14
-
import {useLingui} from '@lingui/react'
15
-
import {useModalControls} from '#/state/modals'
13
+
import {Dimensions} from 'lib/media/types'
14
+
import {colors, s} from 'lib/styles'
16
15
import {isNative} from 'platform/detection'
16
+
import {GalleryModel} from 'state/models/media/gallery'
17
+
import {Text} from 'view/com/util/text/Text'
17
18
18
19
const IMAGE_GAP = 8
19
20
···
197
198
}}
198
199
accessible={true}
199
200
accessibilityIgnoresInvertColors
201
+
transition={200}
200
202
/>
201
203
</View>
202
204
))}