diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx
index a2e91831..5156511d 100644
--- a/src/view/com/modals/AltImage.tsx
+++ b/src/view/com/modals/AltImage.tsx
@@ -1,14 +1,12 @@
import React, {useMemo, useCallback, useState} from 'react'
import {
ImageStyle,
- KeyboardAvoidingView,
- ScrollView,
StyleSheet,
- TextInput,
TouchableOpacity,
View,
useWindowDimensions,
} from 'react-native'
+import {ScrollView, TextInput} from './util'
import {Image} from 'expo-image'
import {usePalette} from 'lib/hooks/usePalette'
import {gradients, s} from 'lib/styles'
@@ -17,13 +15,13 @@ import {MAX_ALT_TEXT} from 'lib/constants'
import {useTheme} from 'lib/ThemeContext'
import {Text} from '../util/text/Text'
import LinearGradient from 'react-native-linear-gradient'
-import {isAndroid, isWeb} from 'platform/detection'
+import {isWeb} from 'platform/detection'
import {ImageModel} from 'state/models/media/image'
import {useLingui} from '@lingui/react'
import {Trans, msg} from '@lingui/macro'
import {useModalControls} from '#/state/modals'
-export const snapPoints = ['fullscreen']
+export const snapPoints = ['100%']
interface Props {
image: ImageModel
@@ -54,102 +52,86 @@ export function Component({image}: Props) {
}
}, [image, windim])
+ const onUpdate = useCallback(
+ (v: string) => {
+ v = enforceLen(v, MAX_ALT_TEXT)
+ setAltText(v)
+ image.setAltText(v)
+ },
+ [setAltText, image],
+ )
+
const onPressSave = useCallback(() => {
image.setAltText(altText)
closeModal()
}, [closeModal, image, altText])
- const onPressCancel = () => {
- closeModal()
- }
-
return (
-
-
-
-
-
-
- setAltText(enforceLen(text, MAX_ALT_TEXT))}
- accessibilityLabel={_(msg`Image alt text`)}
- accessibilityHint=""
- accessibilityLabelledBy="imageAltText"
- autoFocus
+
+
+
+
-
-
-
-
- Save
-
-
-
-
-
-
- Cancel
-
-
-
-
-
-
+
+
+
+
+
+ Done
+
+
+
+
+
+
)
}
const styles = StyleSheet.create({
- container: {
- flex: 1,
- height: '100%',
- width: '100%',
- paddingVertical: isWeb ? 0 : 18,
- },
scrollContainer: {
flex: 1,
height: '100%',
paddingHorizontal: isWeb ? 0 : 12,
+ paddingVertical: isWeb ? 0 : 24,
},
scrollInner: {
gap: 12,
+ paddingTop: isWeb ? 0 : 12,
},
imageContainer: {
borderRadius: 8,
@@ -173,5 +155,6 @@ const styles = StyleSheet.create({
},
buttonControls: {
gap: 8,
+ paddingBottom: isWeb ? 0 : 50,
},
})