Make alt text scrollable on native (#5642)

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 {ScrollView} from '#/view/com/util/Views'
-import {colors, s} from 'lib/styles'
-import {isIOS} from 'platform/detection'
 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 (
-    <View style={[styles.footer]}>
+    <ScrollView
+      style={[
+        {
+          backgroundColor: '#000d',
+        },
+        {maxHeight: svMaxHeight},
+      ]}
+      scrollEnabled={isAltExpanded}
+      onMomentumScrollBegin={() => {
+        isMomentumScrolling.current = true
+      }}
+      onMomentumScrollEnd={() => {
+        isMomentumScrolling.current = false
+      }}
+      contentContainerStyle={{
+        paddingTop: 16,
+        paddingBottom: insets.bottom + 10,
+        paddingHorizontal: 24,
+      }}>
       {altText ? (
         <View accessibilityRole="button" style={styles.footerText}>
           <Text
@@ -118,9 +143,12 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) {
             numberOfLines={isAltExpanded ? undefined : 3}
             selectable
             onPress={() => {
+              if (isMomentumScrolling.current) {
+                return
+              }
               LayoutAnimation.configureNext({
-                duration: 300,
+                duration: 450,
-                update: {type: 'spring', springDamping: 0.7},
+                update: {type: 'spring', springDamping: 1},
               })
               setAltExpanded(prev => !prev)
             }}
@@ -149,17 +177,11 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) {
           </Text>
         </Button>
       </View>
-    </View>
+    </ScrollView>
   )
 }
 
 const styles = StyleSheet.create({
-  footer: {
-    paddingTop: 16,
-    paddingBottom: isIOS ? 40 : 24,
-    paddingHorizontal: 24,
-    backgroundColor: '#000d',
-  },
   footerText: {
     paddingBottom: isIOS ? 20 : 16,
   },