Keep lightbox image index on device rotation (#10867)

src/components/Lightbox/pager/ImagePager.tsx

@@ -91,6 +91,9 @@ export default function ImageViewRoot({
   'use no memo'
   const ref = useAnimatedRef<View>()
   const [activeLightbox, setActiveLightbox] = useState(nextLightbox)
+  // Lives here rather than in ImageView so it survives the remount
+  // when the orientation-based key below changes on rotation.
+  const [imageIndex, setImageIndex] = useState(nextLightbox?.index ?? 0)
   const [orientation, setOrientation] = useState<'portrait' | 'landscape'>(
     'portrait',
   )
@@ -101,6 +104,7 @@ export default function ImageViewRoot({
 
   if (!activeLightbox && nextLightbox) {
     setActiveLightbox(nextLightbox)
+    setImageIndex(nextLightbox.index)
   }
 
   useEffect(() => {
@@ -193,6 +197,8 @@ export default function ImageViewRoot({
           <ImageView
             key={activeLightbox.id + '-' + orientation}
             lightbox={activeLightbox}
+            imageIndex={imageIndex}
+            setImageIndex={setImageIndex}
             orientation={orientation}
             onRequestClose={onRequestClose}
             onPressSave={onPressSave}
@@ -210,6 +216,8 @@ export default function ImageViewRoot({
 
 function ImageView({
   lightbox,
+  imageIndex,
+  setImageIndex,
   orientation,
   onRequestClose,
   onPressSave,
@@ -220,6 +228,8 @@ function ImageView({
   thumbRects,
 }: {
   lightbox: Lightbox
+  imageIndex: number
+  setImageIndex: React.Dispatch<React.SetStateAction<number>>
   orientation: 'portrait' | 'landscape'
   onRequestClose: () => void
   onPressSave: (uri: string) => void
@@ -229,12 +239,14 @@ function ImageView({
   openProgress: SharedValue<number>
   thumbRects: SharedValue<Record<number, MeasuredDimensions | null>>
 }) {
-  const {images, index: initialImageIndex, metricsContext} = lightbox
+  const {images, metricsContext} = lightbox
+  // Capture at mount: after a rotation remount this is the preserved
+  // current index, so the pager re-opens on the same image.
+  const [initialImageIndex] = useState(imageIndex)
   const ax = useAnalytics()
   const isAnimated = useMemo(() => canAnimate(lightbox), [lightbox])
   const [isScaled, setIsScaled] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
-  const [imageIndex, setImageIndex] = useState(initialImageIndex)
   const [showControls, setShowControls] = useState(true)
   const [isAltExpanded, setIsAltExpanded] = useState(false)
   const dismissSwipeTranslateY = useSharedValue(0)