Improve lightbox... and update to React Native 0.71.0 (#49)

* Switch to a better lightbox implementation (close #42)

* Upgrade to react-native 0.71.0

* Update (or remove low-value) tests

1 files changed, 18 insertions, 114 deletions

diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx
index 849354aea..3369c2770 100644
--- a/src/view/com/lightbox/Lightbox.tsx
+++ b/src/view/com/lightbox/Lightbox.tsx
@@ -1,139 +1,43 @@
-import React, {useState} from 'react'
-import {
-  Animated,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native'
+import React from 'react'
+import {View} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {SwipeAndZoom, Dir} from '../util/gestures/SwipeAndZoom'
+import ImageView from 'react-native-image-viewing'
 import {useStores} from '../../../state'
-import {useAnimatedValue} from '../../lib/hooks/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 [isZooming, setIsZooming] = useState(false)
-  const panX = useAnimatedValue(0)
-  const panY = useAnimatedValue(0)
-  const zoom = useAnimatedValue(0)
-
   const onClose = () => {
+    console.log('hit')
     store.shell.closeLightbox()
   }
-  const onSwipeStartDirection = (dir: Dir) => {
-    setIsZooming(dir === Dir.Zoom)
-  }
-  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 />
   }
 
-  let element
   if (store.shell.activeLightbox?.name === 'profile-image') {
-    element = (
-      <ProfileImageLightbox.Component
-        {...(store.shell.activeLightbox as models.ProfileImageLightbox)}
-      />
-    )
-  } else if (store.shell.activeLightbox?.name === 'image') {
-    element = (
-      <ImageLightbox.Component
-        {...(store.shell.activeLightbox as models.ImageLightbox)}
+    const opts = store.shell.activeLightbox as models.ProfileImageLightbox
+    return (
+      <ImageView
+        images={[{uri: opts.profileView.avatar}]}
+        imageIndex={0}
+        visible
+        onRequestClose={onClose}
       />
     )
   } else if (store.shell.activeLightbox?.name === 'images') {
-    element = (
-      <ImagesLightbox.Component
-        isZooming={isZooming}
-        {...(store.shell.activeLightbox as models.ImagesLightbox)}
+    const opts = store.shell.activeLightbox as models.ImagesLightbox
+    return (
+      <ImageView
+        images={opts.uris.map(uri => ({uri}))}
+        imageIndex={opts.index}
+        visible
+        onRequestClose={onClose}
       />
     )
   } else {
     return <View />
   }
-
-  const translateX = Animated.multiply(panX, winDim.width * -1)
-  const translateY = Animated.multiply(panY, winDim.height * -1)
-  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],
-      outputRange: [0, 1, 0],
-    }),
-  }
-
-  return (
-    <View style={StyleSheet.absoluteFill}>
-      <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]} />
-        </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>
-      </SwipeAndZoom>
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  bg: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    backgroundColor: '#000',
-    opacity: 0.9,
-  },
-  xIcon: {
-    position: 'absolute',
-    top: 30,
-    right: 30,
-  },
-  container: {
-    position: 'absolute',
-  },
 })