Add zooming to the lightbox

src/view/com/lightbox/Images.tsx

@@ -1,7 +1,15 @@
 import React from 'react'
 import {Image, StyleSheet, useWindowDimensions, View} from 'react-native'
 
-export function Component({uris, index}: {uris: string[]; index: number}) {
+export function Component({
+  uris,
+  index,
+  isZooming,
+}: {
+  uris: string[]
+  index: number
+  isZooming: boolean
+}) {
   const winDim = useWindowDimensions()
   const left = index * winDim.width * -1
   return (
@@ -9,7 +17,11 @@ export function Component({uris, index}: {uris: string[]; index: number}) {
       {uris.map((uri, i) => (
         <Image
           key={i}
-          style={[styles.image, {left: i * winDim.width}]}
+          style={[
+            styles.image,
+            {left: i * winDim.width},
+            isZooming && i !== index ? {opacity: 0} : undefined,
+          ]}
           source={{uri}}
         />
       ))}

src/view/com/lightbox/Lightbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useState} from 'react'
 import {
   Animated,
   StyleSheet,
@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Swipe, Dir} from '../util/gestures/Swipe'
+import {SwipeAndZoom, Dir} from '../util/gestures/SwipeAndZoom'
 import {useStores} from '../../../state'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'
 
@@ -21,12 +21,17 @@ import * as ImagesLightbox from './Images'
 export const Lightbox = observer(function Lightbox() {
   const store = useStores()
   const winDim = useWindowDimensions()
+  const [isZooming, setIsZooming] = useState(false)
   const panX = useAnimatedValue(0)
   const panY = useAnimatedValue(0)
+  const zoom = useAnimatedValue(0)
 
   const onClose = () => {
     store.shell.closeLightbox()
   }
+  const onSwipeStartDirection = (dir: Dir) => {
+    setIsZooming(dir === Dir.Zoom)
+  }
   const onSwipeEnd = (dir: Dir) => {
     if (dir === Dir.Up || dir === Dir.Down) {
       onClose()
@@ -57,6 +62,7 @@ export const Lightbox = observer(function Lightbox() {
   } else if (store.shell.activeLightbox?.name === 'images') {
     element = (
       <ImagesLightbox.Component
+        isZooming={isZooming}
         {...(store.shell.activeLightbox as models.ImagesLightbox)}
       />
     )
@@ -66,7 +72,16 @@ export const Lightbox = observer(function Lightbox() {
 
   const translateX = Animated.multiply(panX, winDim.width * -1)
   const translateY = Animated.multiply(panY, winDim.height * -1)
-  const swipeTransform = {transform: [{translateX}, {translateY}]}
+  const scale = Animated.add(zoom, 1)
+  const swipeTransform = {
+    transform: [
+      {translateY: winDim.height / 2},
+      {scale},
+      {translateY: winDim.height / -2},
+      {translateX},
+      {translateY},
+    ],
+  }
   const swipeOpacity = {
     opacity: panY.interpolate({
       inputRange: [-1, 0, 1],
@@ -76,15 +91,18 @@ export const Lightbox = observer(function Lightbox() {
 
   return (
     <View style={StyleSheet.absoluteFill}>
-      <Swipe
+      <SwipeAndZoom
         panX={panX}
         panY={panY}
+        zoom={zoom}
         swipeEnabled
+        zoomEnabled
         canSwipeLeft={store.shell.activeLightbox.canSwipeLeft}
         canSwipeRight={store.shell.activeLightbox.canSwipeRight}
         canSwipeUp
         canSwipeDown
         hasPriority
+        onSwipeStartDirection={onSwipeStartDirection}
         onSwipeEnd={onSwipeEnd}>
         <TouchableWithoutFeedback onPress={onClose}>
           <Animated.View style={[styles.bg, swipeOpacity]} />
@@ -95,7 +113,7 @@ export const Lightbox = observer(function Lightbox() {
           </View>
         </TouchableWithoutFeedback>
         <Animated.View style={swipeTransform}>{element}</Animated.View>
-      </Swipe>
+      </SwipeAndZoom>
     </View>
   )
 })