1 files changed, 86 insertions, 84 deletions
diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx
index 072bfebfa..92c30f491 100644
--- a/src/view/com/lightbox/Lightbox.tsx
+++ b/src/view/com/lightbox/Lightbox.tsx
@@ -15,13 +15,48 @@ 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])
 
+  if (!store.shell.activeLightbox) {
+    return null
+  } else if (store.shell.activeLightbox.name === 'profile-image') {
+    const opts = store.shell.activeLightbox as models.ProfileImageLightbox
+    return (
+      <ImageView
+        images={[{uri: opts.profileView.avatar || ''}]}
+        initialImageIndex={0}
+        visible
+        onRequestClose={onClose}
+        FooterComponent={LightboxFooter}
+      />
+    )
+  } else if (store.shell.activeLightbox.name === 'images') {
+    const opts = store.shell.activeLightbox as models.ImagesLightbox
+    return (
+      <ImageView
+        images={opts.images.map(img => ({...img}))}
+        initialImageIndex={opts.index}
+        visible
+        onRequestClose={onClose}
+        FooterComponent={LightboxFooter}
+      />
+    )
+  } else {
+    return null
+  }
+})
+
+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) {
@@ -46,90 +81,57 @@ export const Lightbox = observer(function Lightbox() {
     [permissionResponse, requestPermission],
   )
 
-  const LightboxFooter = React.useCallback(
-    ({imageIndex}: {imageIndex: number}) => {
-      const lightbox = store.shell.activeLightbox
-      if (!lightbox) {
-        return null
-      }
+  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 || ''
-      }
+  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 (
-        <View style={[styles.footer]}>
-          {altText ? (
-            <Pressable
-              onPress={() => setAltExpanded(!isAltExpanded)}
-              accessibilityRole="button">
-              <Text
-                style={[s.gray3, styles.footerText]}
-                numberOfLines={isAltExpanded ? undefined : 3}>
-                {altText}
-              </Text>
-            </Pressable>
-          ) : null}
-          <View style={styles.footerBtns}>
-            <Button
-              type="primary-outline"
-              style={styles.footerBtn}
-              onPress={() => saveImageToAlbumWithToasts(uri)}>
-              <FontAwesomeIcon icon={['far', 'floppy-disk']} style={s.white} />
-              <Text type="xl" style={s.white}>
-                Save
-              </Text>
-            </Button>
-            <Button
-              type="primary-outline"
-              style={styles.footerBtn}
-              onPress={() => shareImageModal({uri})}>
-              <FontAwesomeIcon icon="arrow-up-from-bracket" style={s.white} />
-              <Text type="xl" style={s.white}>
-                Share
-              </Text>
-            </Button>
-          </View>
-        </View>
-      )
-    },
-    [store.shell.activeLightbox, isAltExpanded, saveImageToAlbumWithToasts],
+  return (
+    <View style={[styles.footer]}>
+      {altText ? (
+        <Pressable
+          onPress={() => setAltExpanded(!isAltExpanded)}
+          accessibilityRole="button">
+          <Text
+            style={[s.gray3, styles.footerText]}
+            numberOfLines={isAltExpanded ? undefined : 3}>
+            {altText}
+          </Text>
+        </Pressable>
+      ) : null}
+      <View style={styles.footerBtns}>
+        <Button
+          type="primary-outline"
+          style={styles.footerBtn}
+          onPress={() => saveImageToAlbumWithToasts(uri)}>
+          <FontAwesomeIcon icon={['far', 'floppy-disk']} style={s.white} />
+          <Text type="xl" style={s.white}>
+            Save
+          </Text>
+        </Button>
+        <Button
+          type="primary-outline"
+          style={styles.footerBtn}
+          onPress={() => shareImageModal({uri})}>
+          <FontAwesomeIcon icon="arrow-up-from-bracket" style={s.white} />
+          <Text type="xl" style={s.white}>
+            Share
+          </Text>
+        </Button>
+      </View>
+    </View>
   )
-
-  if (!store.shell.activeLightbox) {
-    return null
-  } else if (store.shell.activeLightbox.name === 'profile-image') {
-    const opts = store.shell.activeLightbox as models.ProfileImageLightbox
-    return (
-      <ImageView
-        images={[{uri: opts.profileView.avatar || ''}]}
-        imageIndex={0}
-        visible
-        onRequestClose={onClose}
-        FooterComponent={LightboxFooter}
-      />
-    )
-  } else if (store.shell.activeLightbox.name === 'images') {
-    const opts = store.shell.activeLightbox as models.ImagesLightbox
-    return (
-      <ImageView
-        images={opts.images.map(img => ({...img}))}
-        imageIndex={opts.index}
-        visible
-        onRequestClose={onClose}
-        FooterComponent={LightboxFooter}
-      />
-    )
-  } else {
-    return null
-  }
 })
 
 const styles = StyleSheet.create({