Declare LightboxFooter outside Lightbox

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 || ''}]}
+        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 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,8 +81,6 @@ export const Lightbox = observer(function Lightbox() {
     [permissionResponse, requestPermission],
   )
 
-  const LightboxFooter = React.useCallback(
-    ({imageIndex}: {imageIndex: number}) => {
   const lightbox = store.shell.activeLightbox
   if (!lightbox) {
     return null
@@ -99,37 +132,6 @@ export const Lightbox = observer(function Lightbox() {
       </View>
     </View>
   )
-    },
-    [store.shell.activeLightbox, isAltExpanded, saveImageToAlbumWithToasts],
-  )
-
-  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({