Keep image index when rotating lightbox
This commit is contained in:
@@ -93,6 +93,7 @@ export default function ImageViewRoot({
|
|||||||
'use no memo'
|
'use no memo'
|
||||||
const ref = useAnimatedRef<View>()
|
const ref = useAnimatedRef<View>()
|
||||||
const [activeLightbox, setActiveLightbox] = useState(nextLightbox)
|
const [activeLightbox, setActiveLightbox] = useState(nextLightbox)
|
||||||
|
const [imageIndex, setImageIndex] = useState(activeLightbox?.index ?? 0)
|
||||||
const [orientation, setOrientation] = useState<'portrait' | 'landscape'>(
|
const [orientation, setOrientation] = useState<'portrait' | 'landscape'>(
|
||||||
'portrait',
|
'portrait',
|
||||||
)
|
)
|
||||||
@@ -100,6 +101,7 @@ export default function ImageViewRoot({
|
|||||||
|
|
||||||
if (!activeLightbox && nextLightbox) {
|
if (!activeLightbox && nextLightbox) {
|
||||||
setActiveLightbox(nextLightbox)
|
setActiveLightbox(nextLightbox)
|
||||||
|
setImageIndex(nextLightbox.index)
|
||||||
}
|
}
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
@@ -175,6 +177,8 @@ export default function ImageViewRoot({
|
|||||||
<ImageView
|
<ImageView
|
||||||
key={activeLightbox.id + '-' + orientation}
|
key={activeLightbox.id + '-' + orientation}
|
||||||
lightbox={activeLightbox}
|
lightbox={activeLightbox}
|
||||||
|
imageIndex={imageIndex}
|
||||||
|
setImageIndex={setImageIndex}
|
||||||
orientation={orientation}
|
orientation={orientation}
|
||||||
onRequestClose={onRequestClose}
|
onRequestClose={onRequestClose}
|
||||||
onPressSave={onPressSave}
|
onPressSave={onPressSave}
|
||||||
@@ -191,6 +195,8 @@ export default function ImageViewRoot({
|
|||||||
|
|
||||||
function ImageView({
|
function ImageView({
|
||||||
lightbox,
|
lightbox,
|
||||||
|
imageIndex,
|
||||||
|
setImageIndex,
|
||||||
orientation,
|
orientation,
|
||||||
onRequestClose,
|
onRequestClose,
|
||||||
onPressSave,
|
onPressSave,
|
||||||
@@ -200,6 +206,8 @@ function ImageView({
|
|||||||
openProgress,
|
openProgress,
|
||||||
}: {
|
}: {
|
||||||
lightbox: Lightbox
|
lightbox: Lightbox
|
||||||
|
imageIndex: number
|
||||||
|
setImageIndex: (index: number) => void
|
||||||
orientation: 'portrait' | 'landscape'
|
orientation: 'portrait' | 'landscape'
|
||||||
onRequestClose: () => void
|
onRequestClose: () => void
|
||||||
onPressSave: (uri: string) => void
|
onPressSave: (uri: string) => void
|
||||||
@@ -208,11 +216,11 @@ function ImageView({
|
|||||||
safeAreaRef: AnimatedRef<View>
|
safeAreaRef: AnimatedRef<View>
|
||||||
openProgress: SharedValue<number>
|
openProgress: SharedValue<number>
|
||||||
}) {
|
}) {
|
||||||
const {images, index: initialImageIndex} = lightbox
|
const [initialImageIndex] = useState(imageIndex)
|
||||||
|
const {images} = lightbox
|
||||||
const isAnimated = useMemo(() => canAnimate(lightbox), [lightbox])
|
const isAnimated = useMemo(() => canAnimate(lightbox), [lightbox])
|
||||||
const [isScaled, setIsScaled] = useState(false)
|
const [isScaled, setIsScaled] = useState(false)
|
||||||
const [isDragging, setIsDragging] = useState(false)
|
const [isDragging, setIsDragging] = useState(false)
|
||||||
const [imageIndex, setImageIndex] = useState(initialImageIndex)
|
|
||||||
const [showControls, setShowControls] = useState(true)
|
const [showControls, setShowControls] = useState(true)
|
||||||
const [isAltExpanded, setAltExpanded] = React.useState(false)
|
const [isAltExpanded, setAltExpanded] = React.useState(false)
|
||||||
const dismissSwipeTranslateY = useSharedValue(0)
|
const dismissSwipeTranslateY = useSharedValue(0)
|
||||||
|
|||||||
Reference in New Issue
Block a user