From f08e542995ee50625a48fe86438da48b6903f3ee Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 2 Nov 2024 00:49:53 +0000
Subject: [PATCH] Key lightbox by id

---
 src/state/lightbox.tsx                       | 13 ++++++++++---
 src/view/com/lightbox/ImageViewing/index.tsx |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/state/lightbox.tsx b/src/state/lightbox.tsx
index 70bb09123b..4468f86684 100644
--- a/src/state/lightbox.tsx
+++ b/src/state/lightbox.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
 import type {MeasuredDimensions} from 'react-native-reanimated'
+import {nanoid} from 'nanoid/non-secure'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {ImageSource} from '#/view/com/lightbox/ImageViewing/@types'
 
 export type Lightbox = {
+  id: string
   images: ImageSource[]
   thumbDims: MeasuredDimensions | null
   index: number
@@ -29,9 +31,14 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     null,
   )
 
-  const openLightbox = useNonReactiveCallback((lightbox: Lightbox) => {
-    setActiveLightbox(lightbox)
-  })
+  const openLightbox = useNonReactiveCallback(
+    (lightbox: Omit<Lightbox, 'id'>) => {
+      setActiveLightbox({
+        ...lightbox,
+        id: nanoid(),
+      })
+    },
+  )
 
   const closeLightbox = useNonReactiveCallback(() => {
     let wasActive = !!activeLightbox
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index 96696a9b97..dfd93ebe7b 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -398,7 +398,7 @@ function ImageViewingRoot({
   }
   return (
     <ImageViewing
-      key={lightbox.index}
+      key={lightbox.id}
       lightbox={lightbox}
       onRequestClose={onRequestClose}
       onPressSave={onPressSave}