Update image viewer index seraching

src/@types/react-navigation.d.ts

@@ -50,14 +50,14 @@ declare namespace Nav {
       | undefined
     'Screen-ImagesViewer': {
       imageUrls: {
+        id: Mastodon.Attachment['id']
         url: Mastodon.AttachmentImage['url']
         width?: number
         height?: number
         preview_url: Mastodon.AttachmentImage['preview_url']
         remote_url?: Mastodon.AttachmentImage['remote_url']
-        imageIndex: number
       }[]
-      imageIndex: number
+      id: Mastodon.Attachment['id']
     }
   }
 

src/components/Timeline/Shared/Attachment.tsx

@@ -35,10 +35,10 @@ const TimelineAttachment = React.memo(
 
     let imageUrls: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'] = []
     const navigation = useNavigation()
-    const navigateToImagesViewer = (imageIndex: number) =>
+    const navigateToImagesViewer = (id: string) =>
       navigation.navigate('Screen-ImagesViewer', {
         imageUrls,
-        imageIndex
+        id
       })
     const attachments = useMemo(
       () =>
@@ -46,12 +46,12 @@ const TimelineAttachment = React.memo(
           switch (attachment.type) {
             case 'image':
               imageUrls.push({
+                id: attachment.id,
                 url: attachment.url,
                 preview_url: attachment.preview_url,
                 remote_url: attachment.remote_url,
                 width: attachment.meta?.original?.width,
-                height: attachment.meta?.original?.height,
+                height: attachment.meta?.original?.height
-                imageIndex: index
               })
               return (
                 <AttachmentImage

src/components/Timeline/Shared/Attachment/Image.tsx

@@ -10,14 +10,14 @@ export interface Props {
   index: number
   sensitiveShown: boolean
   image: Mastodon.AttachmentImage
-  navigateToImagesViewer: (imageIndex: number) => void
+  navigateToImagesViewer: (imageIndex: string) => void
 }
 
 const AttachmentImage = React.memo(
   ({ total, index, sensitiveShown, image, navigateToImagesViewer }: Props) => {
     const onPress = useCallback(() => {
       analytics('timeline_shared_attachment_image_press', { id: image.id })
-      navigateToImagesViewer(index)
+      navigateToImagesViewer(image.id)
     }, [])
 
     return (

src/screens/ImagesViewer.tsx

@@ -34,7 +34,6 @@ const HeaderComponent = React.memo(
       height?: number | undefined
       preview_url: string
       remote_url?: string | undefined
-      imageIndex: number
     }[]
   }) => {
     const insets = useSafeAreaInsets()
@@ -134,7 +133,7 @@ export type ScreenImagesViewerProp = StackScreenProps<
 
 const ScreenImagesViewer = ({
   route: {
-    params: { imageUrls, imageIndex }
+    params: { imageUrls, id }
   },
   navigation
 }: ScreenImagesViewerProp) => {
@@ -142,16 +141,15 @@ const ScreenImagesViewer = ({
     return null
   }
 
-  const [currentIndex, setCurrentIndex] = useState(
+  const initialIndex = findIndex(imageUrls, ['id', id])
-    findIndex(imageUrls, ['imageIndex', imageIndex])
+  const [currentIndex, setCurrentIndex] = useState(initialIndex)
-  )
 
   return (
     <SafeAreaProvider>
       <StatusBar backgroundColor='rgb(0,0,0)' />
       <ImageView
         images={imageUrls}
-        imageIndex={imageIndex}
+        imageIndex={initialIndex}
         onImageIndexChange={index => setCurrentIndex(index)}
         onRequestClose={() => navigation.goBack()}
         HeaderComponent={() => (