diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx
index 072bfebfae..ad66dce327 100644
--- a/src/view/com/lightbox/Lightbox.tsx
+++ b/src/view/com/lightbox/Lightbox.tsx
@@ -15,94 +15,10 @@ import * as MediaLibrary from 'expo-media-library'
export const Lightbox = observer(function Lightbox() {
const store = useStores()
- const [isAltExpanded, setAltExpanded] = React.useState(false)
- const [permissionResponse, requestPermission] = MediaLibrary.usePermissions()
-
const onClose = React.useCallback(() => {
store.shell.closeLightbox()
}, [store])
- const saveImageToAlbumWithToasts = React.useCallback(
- async (uri: string) => {
- if (!permissionResponse || permissionResponse.granted === false) {
- Toast.show('Permission to access camera roll is required.')
- if (permissionResponse?.canAskAgain) {
- requestPermission()
- } else {
- Toast.show(
- 'Permission to access camera roll was denied. Please enable it in your system settings.',
- )
- }
- return
- }
-
- try {
- await saveImageToMediaLibrary({uri})
- Toast.show('Saved to your camera roll.')
- } catch (e: any) {
- Toast.show(`Failed to save image: ${String(e)}`)
- }
- },
- [permissionResponse, requestPermission],
- )
-
- const LightboxFooter = React.useCallback(
- ({imageIndex}: {imageIndex: number}) => {
- const lightbox = store.shell.activeLightbox
- if (!lightbox) {
- return null
- }
-
- let altText = ''
- let uri = ''
- if (lightbox.name === 'images') {
- const opts = lightbox as models.ImagesLightbox
- uri = opts.images[imageIndex].uri
- altText = opts.images[imageIndex].alt || ''
- } else if (lightbox.name === 'profile-image') {
- const opts = lightbox as models.ProfileImageLightbox
- uri = opts.profileView.avatar || ''
- }
-
- return (
-
- {altText ? (
- setAltExpanded(!isAltExpanded)}
- accessibilityRole="button">
-
- {altText}
-
-
- ) : null}
-
-
-
-
-
- )
- },
- [store.shell.activeLightbox, isAltExpanded, saveImageToAlbumWithToasts],
- )
-
if (!store.shell.activeLightbox) {
return null
} else if (store.shell.activeLightbox.name === 'profile-image') {
@@ -132,6 +48,92 @@ export const Lightbox = observer(function Lightbox() {
}
})
+const LightboxFooter = observer(function LightboxFooter({
+ imageIndex,
+}: {
+ imageIndex: number
+}) {
+ const store = useStores()
+ const [isAltExpanded, setAltExpanded] = React.useState(false)
+ const [permissionResponse, requestPermission] = MediaLibrary.usePermissions()
+
+ const saveImageToAlbumWithToasts = React.useCallback(
+ async (uri: string) => {
+ if (!permissionResponse || permissionResponse.granted === false) {
+ Toast.show('Permission to access camera roll is required.')
+ if (permissionResponse?.canAskAgain) {
+ requestPermission()
+ } else {
+ Toast.show(
+ 'Permission to access camera roll was denied. Please enable it in your system settings.',
+ )
+ }
+ return
+ }
+
+ try {
+ await saveImageToMediaLibrary({uri})
+ Toast.show('Saved to your camera roll.')
+ } catch (e: any) {
+ Toast.show(`Failed to save image: ${String(e)}`)
+ }
+ },
+ [permissionResponse, requestPermission],
+ )
+
+ const lightbox = store.shell.activeLightbox
+ if (!lightbox) {
+ return null
+ }
+
+ let altText = ''
+ let uri = ''
+ if (lightbox.name === 'images') {
+ const opts = lightbox as models.ImagesLightbox
+ uri = opts.images[imageIndex].uri
+ altText = opts.images[imageIndex].alt || ''
+ } else if (lightbox.name === 'profile-image') {
+ const opts = lightbox as models.ProfileImageLightbox
+ uri = opts.profileView.avatar || ''
+ }
+
+ return (
+
+ {altText ? (
+ setAltExpanded(!isAltExpanded)}
+ accessibilityRole="button">
+
+ {altText}
+
+
+ ) : null}
+
+
+
+
+
+ )
+})
+
const styles = StyleSheet.create({
footer: {
paddingTop: 16,