diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index fb31a0b9ff..e1c12e4192 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -1,24 +1,28 @@ import React from 'react' -import {LayoutAnimation, StyleSheet, View} from 'react-native' +import {Dimensions, LayoutAnimation, StyleSheet, View} from 'react-native' +import {useSafeAreaInsets} from 'react-native-safe-area-context' import * as MediaLibrary from 'expo-media-library' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {saveImageToMediaLibrary, shareImageModal} from '#/lib/media/manip' +import {colors, s} from '#/lib/styles' +import {isIOS} from '#/platform/detection' import { ImagesLightbox, ProfileImageLightbox, useLightbox, useLightboxControls, } from '#/state/lightbox' -import {saveImageToMediaLibrary, shareImageModal} from 'lib/media/manip' -import {colors, s} from 'lib/styles' -import {isIOS} from 'platform/detection' +import {ScrollView} from '#/view/com/util/Views' import {Button} from '../util/forms/Button' import {Text} from '../util/text/Text' import * as Toast from '../util/Toast' import ImageView from './ImageViewing' +const SCREEN_HEIGHT = Dimensions.get('window').height + export function Lightbox() { const {activeLightbox} = useLightbox() const {closeLightbox} = useLightboxControls() @@ -62,6 +66,9 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) { const [permissionResponse, requestPermission] = MediaLibrary.usePermissions({ granularPermissions: ['photo'], }) + const insets = useSafeAreaInsets() + const svMaxHeight = SCREEN_HEIGHT - insets.top - 50 + const isMomentumScrolling = React.useRef(false) const saveImageToAlbumWithToasts = React.useCallback( async (uri: string) => { @@ -110,7 +117,25 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) { } return ( - + { + isMomentumScrolling.current = true + }} + onMomentumScrollEnd={() => { + isMomentumScrolling.current = false + }} + contentContainerStyle={{ + paddingTop: 16, + paddingBottom: insets.bottom + 10, + paddingHorizontal: 24, + }}> {altText ? ( { + if (isMomentumScrolling.current) { + return + } LayoutAnimation.configureNext({ - duration: 300, - update: {type: 'spring', springDamping: 0.7}, + duration: 450, + update: {type: 'spring', springDamping: 1}, }) setAltExpanded(prev => !prev) }} @@ -149,17 +177,11 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) { - + ) } const styles = StyleSheet.create({ - footer: { - paddingTop: 16, - paddingBottom: isIOS ? 40 : 24, - paddingHorizontal: 24, - backgroundColor: '#000d', - }, footerText: { paddingBottom: isIOS ? 20 : 16, },