Add swipe gestures to the lightbox

src/view/com/lightbox/Image.tsx

@@ -4,7 +4,6 @@ import {Image, StyleSheet, useWindowDimensions, View} from 'react-native'
 export function Component({uri}: {uri: string}) {
   const winDim = useWindowDimensions()
   const top = winDim.height / 2 - (winDim.width - 40) / 2 - 100
-  console.log(uri)
   return (
     <View style={[styles.container, {top}]}>
       <Image style={styles.image} source={{uri}} />

src/view/com/lightbox/Images.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import {Image, StyleSheet, useWindowDimensions, View} from 'react-native'
+
+export function Component({uris, index}: {uris: string[]; index: number}) {
+  const winDim = useWindowDimensions()
+  const left = index * winDim.width * -1
+  return (
+    <View style={[styles.container, {left}]}>
+      {uris.map((uri, i) => (
+        <Image
+          key={i}
+          style={[styles.image, {left: i * winDim.width}]}
+          source={{uri}}
+        />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+  },
+  image: {
+    position: 'absolute',
+    top: 200,
+    left: 0,
+    resizeMode: 'contain',
+    width: '100%',
+    aspectRatio: 1,
+  },
+})

src/view/com/lightbox/Lightbox.tsx

@@ -1,20 +1,41 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {
+  Animated,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Swipe, Dir} from '../util/gestures/Swipe'
 import {useStores} from '../../../state'
+import {useAnimatedValue} from '../../lib/useAnimatedValue'
 
 import * as models from '../../../state/models/shell-ui'
 
 import * as ProfileImageLightbox from './ProfileImage'
 import * as ImageLightbox from './Image'
+import * as ImagesLightbox from './Images'
 
 export const Lightbox = observer(function Lightbox() {
   const store = useStores()
+  const winDim = useWindowDimensions()
+  const panX = useAnimatedValue(0)
+  const panY = useAnimatedValue(0)
 
   const onClose = () => {
     store.shell.closeLightbox()
   }
+  const onSwipeEnd = (dir: Dir) => {
+    if (dir === Dir.Up || dir === Dir.Down) {
+      onClose()
+    } else if (dir === Dir.Left) {
+      store.shell.activeLightbox?.onSwipeLeft()
+    } else if (dir === Dir.Right) {
+      store.shell.activeLightbox?.onSwipeRight()
+    }
+  }
 
   if (!store.shell.isLightboxActive) {
     return <View />
@@ -33,18 +54,49 @@ export const Lightbox = observer(function Lightbox() {
         {...(store.shell.activeLightbox as models.ImageLightbox)}
       />
     )
+  } else if (store.shell.activeLightbox?.name === 'images') {
+    element = (
+      <ImagesLightbox.Component
+        {...(store.shell.activeLightbox as models.ImagesLightbox)}
+      />
+    )
   } else {
     return <View />
   }
 
+  const translateX = Animated.multiply(panX, winDim.width * -1)
+  const translateY = Animated.multiply(panY, winDim.height * -1)
+  const swipeTransform = {transform: [{translateX}, {translateY}]}
+  const swipeOpacity = {
+    opacity: panY.interpolate({
+      inputRange: [-1, 0, 1],
+      outputRange: [0, 1, 0],
+    }),
+  }
+
   return (
-    <>
-      <TouchableOpacity style={styles.bg} onPress={onClose} />
-      <TouchableOpacity style={styles.xIcon} onPress={onClose}>
-        <FontAwesomeIcon icon="x" size={24} style={{color: '#fff'}} />
-      </TouchableOpacity>
-      {element}
-    </>
+    <View style={StyleSheet.absoluteFill}>
+      <Swipe
+        panX={panX}
+        panY={panY}
+        swipeEnabled
+        canSwipeLeft={store.shell.activeLightbox.canSwipeLeft}
+        canSwipeRight={store.shell.activeLightbox.canSwipeRight}
+        canSwipeUp
+        canSwipeDown
+        hasPriority
+        onSwipeEnd={onSwipeEnd}>
+        <TouchableWithoutFeedback onPress={onClose}>
+          <Animated.View style={[styles.bg, swipeOpacity]} />
+        </TouchableWithoutFeedback>
+        <TouchableWithoutFeedback onPress={onClose}>
+          <View style={styles.xIcon}>
+            <FontAwesomeIcon icon="x" size={24} style={{color: '#fff'}} />
+          </View>
+        </TouchableWithoutFeedback>
+        <Animated.View style={swipeTransform}>{element}</Animated.View>
+      </Swipe>
+    </View>
   )
 })