[Lightbox] Open animation (#6159) · nasso.dev/bsky-social-app@2d73c5a

+35 -13

src/screens/Profile/Header/Shell.tsx

··· 1 1 import React, {memo} from 'react' 2 2 import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' 3 + import Animated, { 4 + measure, 5 + MeasuredDimensions, 6 + runOnJS, 7 + runOnUI, 8 + useAnimatedRef, 9 + } from 'react-native-reanimated' 3 10 import {AppBskyActorDefs, ModerationDecision} from '@atproto/api' 4 11 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 5 12 import {msg} from '@lingui/macro' ··· 42 49 const {openLightbox} = useLightboxControls() 43 50 const navigation = useNavigation<NavigationProp>() 44 51 const {isDesktop} = useWebMediaQueries() 52 + const aviRef = useAnimatedRef() 45 53 46 54 const onPressBack = React.useCallback(() => { 47 55 if (navigation.canGoBack()) { ··· 51 59 } 52 60 }, [navigation]) 53 61 54 - const onPressAvi = React.useCallback(() => { 55 - const modui = moderation.ui('avatar') 56 - if (profile.avatar && !(modui.blur && modui.noOverride)) { 62 + const _openLightbox = React.useCallback( 63 + (uri: string, thumbRect: MeasuredDimensions | null) => { 57 64 openLightbox({ 58 65 images: [ 59 66 { 60 - uri: profile.avatar, 61 - thumbUri: profile.avatar, 67 + uri, 68 + thumbUri: uri, 69 + thumbRect, 62 70 dimensions: { 63 71 // It's fine if it's actually smaller but we know it's 1:1. 64 72 height: 1000, ··· 68 76 }, 69 77 ], 70 78 index: 0, 71 - thumbDims: null, 72 79 }) 80 + }, 81 + [openLightbox], 82 + ) 83 + 84 + const onPressAvi = React.useCallback(() => { 85 + const modui = moderation.ui('avatar') 86 + const avatar = profile.avatar 87 + if (avatar && !(modui.blur && modui.noOverride)) { 88 + runOnUI(() => { 89 + 'worklet' 90 + const rect = measure(aviRef) 91 + runOnJS(_openLightbox)(avatar, rect) 92 + })() 73 93 } 74 - }, [openLightbox, profile, moderation]) 94 + }, [profile, moderation, _openLightbox, aviRef]) 75 95 76 96 const isMe = React.useMemo( 77 97 () => currentAccount?.did === profile.did, ··· 149 169 styles.avi, 150 170 profile.associated?.labeler && styles.aviLabeler, 151 171 ]}> 152 - <UserAvatar 153 - type={profile.associated?.labeler ? 'labeler' : 'user'} 154 - size={90} 155 - avatar={profile.avatar} 156 - moderation={moderation.ui('avatar')} 157 - /> 172 + <Animated.View ref={aviRef} collapsable={false}> 173 + <UserAvatar 174 + type={profile.associated?.labeler ? 'labeler' : 'user'} 175 + size={90} 176 + avatar={profile.avatar} 177 + moderation={moderation.ui('avatar')} 178 + /> 179 + </Animated.View> 158 180 </View> 159 181 </TouchableWithoutFeedback> 160 182 </GrowableAvatar>

-2

src/state/lightbox.tsx

······

+9

src/view/com/lightbox/ImageViewing/@types/index.ts

······

+119 -57

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

·································

+94 -38

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

·····················

+22 -5

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx

······

+250 -28

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

·············································

+42 -21

src/view/com/profile/ProfileSubpageHeader.tsx

··· 1 1 import React from 'react' 2 2 import {Pressable, StyleSheet, View} from 'react-native' 3 + import Animated, { 4 + measure, 5 + MeasuredDimensions, 6 + runOnJS, 7 + runOnUI, 8 + useAnimatedRef, 9 + } from 'react-native-reanimated' 3 10 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 4 11 import {msg, Trans} from '@lingui/macro' 5 12 import {useLingui} from '@lingui/react' ··· 53 60 const {openLightbox} = useLightboxControls() 54 61 const pal = usePalette('default') 55 62 const canGoBack = navigation.canGoBack() 63 + const aviRef = useAnimatedRef() 56 64 57 65 const onPressBack = React.useCallback(() => { 58 66 if (navigation.canGoBack()) { ··· 66 74 setDrawerOpen(true) 67 75 }, [setDrawerOpen]) 68 76 69 - const onPressAvi = React.useCallback(() => { 70 - if ( 71 - avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride) 72 - ) { 77 + const _openLightbox = React.useCallback( 78 + (uri: string, thumbRect: MeasuredDimensions | null) => { 73 79 openLightbox({ 74 80 images: [ 75 81 { 76 - uri: avatar, 77 - thumbUri: avatar, 82 + uri, 83 + thumbUri: uri, 84 + thumbRect, 78 85 dimensions: { 79 86 // It's fine if it's actually smaller but we know it's 1:1. 80 87 height: 1000, ··· 84 91 }, 85 92 ], 86 93 index: 0, 87 - thumbDims: null, 88 94 }) 95 + }, 96 + [openLightbox], 97 + ) 98 + 99 + const onPressAvi = React.useCallback(() => { 100 + if ( 101 + avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride) 102 + ) { 103 + runOnUI(() => { 104 + 'worklet' 105 + const rect = measure(aviRef) 106 + runOnJS(_openLightbox)(avatar, rect) 107 + })() 89 108 } 90 - }, [openLightbox, avatar]) 109 + }, [_openLightbox, avatar, aviRef]) 91 110 92 111 return ( 93 112 <CenteredView style={pal.view}> ··· 135 154 paddingBottom: 6, 136 155 paddingHorizontal: isMobile ? 12 : 14, 137 156 }}> 138 - <Pressable 139 - testID="headerAviButton" 140 - onPress={onPressAvi} 141 - accessibilityRole="image" 142 - accessibilityLabel={_(msg`View the avatar`)} 143 - accessibilityHint="" 144 - style={{width: 58}}> 145 - {avatarType === 'starter-pack' ? ( 146 - <StarterPack width={58} gradient="sky" /> 147 - ) : ( 148 - <UserAvatar type={avatarType} size={58} avatar={avatar} /> 149 - )} 150 - </Pressable> 157 + <Animated.View ref={aviRef} collapsable={false}> 158 + <Pressable 159 + testID="headerAviButton" 160 + onPress={onPressAvi} 161 + accessibilityRole="image" 162 + accessibilityLabel={_(msg`View the avatar`)} 163 + accessibilityHint="" 164 + style={{width: 58}}> 165 + {avatarType === 'starter-pack' ? ( 166 + <StarterPack width={58} gradient="sky" /> 167 + ) : ( 168 + <UserAvatar type={avatarType} size={58} avatar={avatar} /> 169 + )} 170 + </Pressable> 171 + </Animated.View> 151 172 <View style={{flex: 1}}> 152 173 {isLoading ? ( 153 174 <LoadingPlaceholder

+8 -5

src/view/com/util/images/AutoSizedImage.tsx

··· 1 1 import React from 'react' 2 2 import {DimensionValue, Pressable, View} from 'react-native' 3 + import Animated, {AnimatedRef, useAnimatedRef} from 'react-native-reanimated' 3 4 import {Image} from 'expo-image' 4 5 import {AppBskyEmbedImages} from '@atproto/api' 5 6 import {msg} from '@lingui/macro' ··· 92 93 image: AppBskyEmbedImages.ViewImage 93 94 crop?: 'none' | 'square' | 'constrained' 94 95 hideBadge?: boolean 95 - onPress?: () => void 96 + onPress?: (containerRef: AnimatedRef<React.Component<{}, {}, any>>) => void 96 97 onLongPress?: () => void 97 98 onPressIn?: () => void 98 99 }) { ··· 107 108 src: image.thumb, 108 109 knownDimensions: image.aspectRatio ?? null, 109 110 }) 111 + const containerRef = useAnimatedRef() 112 + 110 113 const cropDisabled = crop === 'none' 111 114 const isCropped = rawIsCropped && !cropDisabled 112 115 const hasAlt = !!image.alt 113 116 114 117 const contents = ( 115 - <> 118 + <Animated.View ref={containerRef} collapsable={false}> 116 119 <Image 117 120 style={[a.w_full, a.h_full]} 118 121 source={image.thumb} ··· 185 188 )} 186 189 </View> 187 190 ) : null} 188 - </> 191 + </Animated.View> 189 192 ) 190 193 191 194 if (cropDisabled) { 192 195 return ( 193 196 <Pressable 194 - onPress={onPress} 197 + onPress={() => onPress?.(containerRef)} 195 198 onLongPress={onLongPress} 196 199 onPressIn={onPressIn} 197 200 // alt here is what screen readers actually use ··· 213 216 fullBleed={crop === 'square'} 214 217 aspectRatio={constrained ?? 1}> 215 218 <Pressable 216 - onPress={onPress} 219 + onPress={() => onPress?.(containerRef)} 217 220 onLongPress={onLongPress} 218 221 onPressIn={onPressIn} 219 222 // alt here is what screen readers actually use

+9 -5

src/view/com/util/images/Gallery.tsx

··· 1 1 import React from 'react' 2 2 import {Pressable, StyleProp, View, ViewStyle} from 'react-native' 3 - import Animated, {AnimatedRef, useAnimatedRef} from 'react-native-reanimated' 3 + import Animated, {AnimatedRef} from 'react-native-reanimated' 4 4 import {Image, ImageStyle} from 'expo-image' 5 5 import {AppBskyEmbedImages} from '@atproto/api' 6 6 import {msg} from '@lingui/macro' ··· 19 19 index: number 20 20 onPress?: ( 21 21 index: number, 22 - containerRef: AnimatedRef<React.Component<{}, {}, any>>, 22 + containerRefs: AnimatedRef<React.Component<{}, {}, any>>[], 23 23 ) => void 24 24 onLongPress?: EventFunction 25 25 onPressIn?: EventFunction 26 26 imageStyle?: StyleProp<ImageStyle> 27 27 viewContext?: PostEmbedViewContext 28 28 insetBorderStyle?: StyleProp<ViewStyle> 29 + containerRefs: AnimatedRef<React.Component<{}, {}, any>>[] 29 30 } 30 31 31 32 export function GalleryItem({ ··· 37 38 onLongPress, 38 39 viewContext, 39 40 insetBorderStyle, 41 + containerRefs, 40 42 }: Props) { 41 43 const t = useTheme() 42 44 const {_} = useLingui() ··· 45 47 const hasAlt = !!image.alt 46 48 const hideBadges = 47 49 viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia 48 - const containerRef = useAnimatedRef() 49 50 return ( 50 - <Animated.View style={a.flex_1} ref={containerRef}> 51 + <Animated.View 52 + style={a.flex_1} 53 + ref={containerRefs[index]} 54 + collapsable={false}> 51 55 <Pressable 52 - onPress={onPress ? () => onPress(index, containerRef) : undefined} 56 + onPress={onPress ? () => onPress(index, containerRefs) : undefined} 53 57 onPressIn={onPressIn ? () => onPressIn(index) : undefined} 54 58 onLongPress={onLongPress ? () => onLongPress(index) : undefined} 55 59 style={[

+31 -6

src/view/com/util/images/ImageLayoutGrid.tsx

··· 1 1 import React from 'react' 2 2 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' 3 - import {AnimatedRef} from 'react-native-reanimated' 3 + import {AnimatedRef, useAnimatedRef} from 'react-native-reanimated' 4 4 import {AppBskyEmbedImages} from '@atproto/api' 5 5 6 6 import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types' ··· 11 11 images: AppBskyEmbedImages.ViewImage[] 12 12 onPress?: ( 13 13 index: number, 14 - containerRef: AnimatedRef<React.Component<{}, {}, any>>, 14 + containerRefs: AnimatedRef<React.Component<{}, {}, any>>[], 15 15 ) => void 16 16 onLongPress?: (index: number) => void 17 17 onPressIn?: (index: number) => void ··· 41 41 images: AppBskyEmbedImages.ViewImage[] 42 42 onPress?: ( 43 43 index: number, 44 - containerRef: AnimatedRef<React.Component<{}, {}, any>>, 44 + containerRefs: AnimatedRef<React.Component<{}, {}, any>>[], 45 45 ) => void 46 46 onLongPress?: (index: number) => void 47 47 onPressIn?: (index: number) => void ··· 53 53 const gap = props.gap 54 54 const count = props.images.length 55 55 56 + const containerRef1 = useAnimatedRef() 57 + const containerRef2 = useAnimatedRef() 58 + const containerRef3 = useAnimatedRef() 59 + const containerRef4 = useAnimatedRef() 60 + 56 61 switch (count) { 57 - case 2: 62 + case 2: { 63 + const containerRefs = [containerRef1, containerRef2] 58 64 return ( 59 65 <View style={[a.flex_1, a.flex_row, gap]}> 60 66 <View style={[a.flex_1, {aspectRatio: 1}]}> ··· 62 68 {...props} 63 69 index={0} 64 70 insetBorderStyle={noCorners(['topRight', 'bottomRight'])} 71 + containerRefs={containerRefs} 65 72 /> 66 73 </View> 67 74 <View style={[a.flex_1, {aspectRatio: 1}]}> ··· 69 76 {...props} 70 77 index={1} 71 78 insetBorderStyle={noCorners(['topLeft', 'bottomLeft'])} 79 + containerRefs={containerRefs} 72 80 /> 73 81 </View> 74 82 </View> 75 83 ) 84 + } 76 85 77 - case 3: 86 + case 3: { 87 + const containerRefs = [containerRef1, containerRef2, containerRef3] 78 88 return ( 79 89 <View style={[a.flex_1, a.flex_row, gap]}> 80 90 <View style={[a.flex_1, {aspectRatio: 1}]}> ··· 82 92 {...props} 83 93 index={0} 84 94 insetBorderStyle={noCorners(['topRight', 'bottomRight'])} 95 + containerRefs={containerRefs} 85 96 /> 86 97 </View> 87 98 <View style={[a.flex_1, {aspectRatio: 1}, gap]}> ··· 94 105 'bottomLeft', 95 106 'bottomRight', 96 107 ])} 108 + containerRefs={containerRefs} 97 109 /> 98 110 </View> 99 111 <View style={[a.flex_1]}> ··· 105 117 'bottomLeft', 106 118 'topRight', 107 119 ])} 120 + containerRefs={containerRefs} 108 121 /> 109 122 </View> 110 123 </View> 111 124 </View> 112 125 ) 126 + } 113 127 114 - case 4: 128 + case 4: { 129 + const containerRefs = [ 130 + containerRef1, 131 + containerRef2, 132 + containerRef3, 133 + containerRef4, 134 + ] 115 135 return ( 116 136 <> 117 137 <View style={[a.flex_row, gap]}> ··· 124 144 'topRight', 125 145 'bottomRight', 126 146 ])} 147 + containerRefs={containerRefs} 127 148 /> 128 149 </View> 129 150 <View style={[a.flex_1, {aspectRatio: 1.5}]}> ··· 135 156 'bottomLeft', 136 157 'bottomRight', 137 158 ])} 159 + containerRefs={containerRefs} 138 160 /> 139 161 </View> 140 162 </View> ··· 148 170 'topRight', 149 171 'bottomRight', 150 172 ])} 173 + containerRefs={containerRefs} 151 174 /> 152 175 </View> 153 176 <View style={[a.flex_1, {aspectRatio: 1.5}]}> ··· 159 182 'bottomLeft', 160 183 'topRight', 161 184 ])} 185 + containerRefs={containerRefs} 162 186 /> 163 187 </View> 164 188 </View> 165 189 </> 166 190 ) 191 + } 167 192 168 193 default: 169 194 return null

+10 -12

src/view/com/util/post-embeds/index.tsx

··· 6 6 View, 7 7 ViewStyle, 8 8 } from 'react-native' 9 - import Animated, { 9 + import { 10 10 AnimatedRef, 11 11 measure, 12 12 MeasuredDimensions, 13 13 runOnJS, 14 14 runOnUI, 15 - useAnimatedRef, 16 15 } from 'react-native-reanimated' 17 16 import {Image} from 'expo-image' 18 17 import { ··· 69 68 viewContext?: PostEmbedViewContext 70 69 }) { 71 70 const {openLightbox} = useLightboxControls() 72 - const containerRef = useAnimatedRef() 73 71 74 72 // quote post with media 75 73 // = ··· 149 147 })) 150 148 const _openLightbox = ( 151 149 index: number, 152 - thumbDims: MeasuredDimensions | null, 150 + thumbRects: (MeasuredDimensions | null)[], 153 151 ) => { 154 152 openLightbox({ 155 - images: items.map(item => ({ 153 + images: items.map((item, i) => ({ 156 154 ...item, 155 + thumbRect: thumbRects[i] ?? null, 157 156 type: 'image', 158 157 })), 159 158 index, 160 - thumbDims, 161 159 }) 162 160 } 163 161 const onPress = ( 164 162 index: number, 165 - ref: AnimatedRef<React.Component<{}, {}, any>>, 163 + refs: AnimatedRef<React.Component<{}, {}, any>>[], 166 164 ) => { 167 165 runOnUI(() => { 168 166 'worklet' 169 - const dims = measure(ref) 170 - runOnJS(_openLightbox)(index, dims) 167 + const rects = refs.map(ref => (ref ? measure(ref) : null)) 168 + runOnJS(_openLightbox)(index, rects) 171 169 })() 172 170 } 173 171 const onPressIn = (_: number) => { ··· 180 178 const image = images[0] 181 179 return ( 182 180 <ContentHider modui={moderation?.ui('contentMedia')}> 183 - <Animated.View ref={containerRef} style={[a.mt_sm, style]}> 181 + <View style={[a.mt_sm, style]}> 184 182 <AutoSizedImage 185 183 crop={ 186 184 viewContext === PostEmbedViewContext.ThreadHighlighted ··· 191 189 : 'constrained' 192 190 } 193 191 image={image} 194 - onPress={() => onPress(0, containerRef)} 192 + onPress={containerRef => onPress(0, [containerRef])} 195 193 onPressIn={() => onPressIn(0)} 196 194 hideBadge={ 197 195 viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia 198 196 } 199 197 /> 200 - </Animated.View> 198 + </View> 201 199 </ContentHider> 202 200 ) 203 201 }