Merge branch 'improved-lightbox' into main

src/state/models/shell-ui.ts

@@ -99,11 +99,7 @@ export class ShellUiModel {
     | ReportAccountModal
     | undefined
   isLightboxActive = false
-  activeLightbox:
+  activeLightbox: ProfileImageLightbox | ImagesLightbox | undefined
-    | ProfileImageLightbox
-    | ImageLightbox
-    | ImagesLightbox
-    | undefined
   isComposerActive = false
   composerOpts: ComposerOpts | undefined
 

src/view/com/lightbox/Image.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-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
-  return (
-    <View style={[styles.container, {top}]}>
-      <Image style={styles.image} source={{uri}} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    left: 0,
-  },
-  image: {
-    resizeMode: 'contain',
-    width: '100%',
-    aspectRatio: 1,
-  },
-})

src/view/com/lightbox/Images.tsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import {
-  ActivityIndicator,
-  Image,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native'
-
-export function Component({
-  uris,
-  index,
-  isZooming,
-}: {
-  uris: string[]
-  index: number
-  isZooming: boolean
-}) {
-  const winDim = useWindowDimensions()
-  const left = index * winDim.width * -1
-  const spinnerStyle = React.useMemo(
-    () => ({
-      left: winDim.width / 2 - 20,
-      top: winDim.height / 2 - 50,
-    }),
-    [winDim.width, winDim.height],
-  )
-  return (
-    <View style={[styles.container, {left}]}>
-      <ActivityIndicator style={[styles.loading, spinnerStyle]} size="large" />
-      {uris.map((uri, i) => (
-        <Image
-          key={i}
-          style={[
-            styles.image,
-            {left: i * winDim.width},
-            isZooming && i !== index ? {opacity: 0} : undefined,
-          ]}
-          source={{uri}}
-        />
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-  },
-  loading: {
-    position: 'absolute',
-  },
-  image: {
-    position: 'absolute',
-    top: 200,
-    left: 0,
-    resizeMode: 'contain',
-    width: '100%',
-    aspectRatio: 1,
-  },
-})

src/view/com/lightbox/ProfileImage.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native'
-import {UserAvatar} from '../util/UserAvatar'
-import {ProfileViewModel} from '../../../state/models/profile-view'
-
-export function Component({profileView}: {profileView: ProfileViewModel}) {
-  const winDim = useWindowDimensions()
-  const top = winDim.height / 2 - (winDim.width - 40) / 2 - 100
-  const spinnerStyle = React.useMemo(
-    () => ({
-      left: winDim.width / 2 - 30,
-      top: winDim.height / 2 - (winDim.width - 40) / 2 - 80,
-    }),
-    [winDim.width, winDim.height],
-  )
-  return (
-    <View style={[styles.container, {top}]}>
-      <ActivityIndicator style={[styles.loading, spinnerStyle]} size="large" />
-      <UserAvatar
-        handle={profileView.handle}
-        displayName={profileView.displayName}
-        avatar={profileView.avatar}
-        size={winDim.width - 40}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    left: 20,
-  },
-  loading: {
-    position: 'absolute',
-  },
-})

src/view/shell/mobile/index.tsx

@@ -127,6 +127,7 @@ export const MobileShell: React.FC = observer(() => {
   const scrollElRef = useRef<FlatList | undefined>()
   const winDim = useWindowDimensions()
   const [menuSwipingDirection, setMenuSwipingDirection] = useState(0)
+  const constZeroInterp = useAnimatedValue(0)
   const swipeGestureInterp = useAnimatedValue(0)
   const minimalShellInterp = useAnimatedValue(0)
   const tabMenuInterp = useAnimatedValue(0)
@@ -279,20 +280,20 @@ export const MobileShell: React.FC = observer(() => {
   const swipeTransform = store.nav.tab.canGoBack
     ? {transform: [{translateX: swipeTranslateX}]}
     : undefined
+  let shouldRenderMenu = false
   let menuTranslateX
   const menuDrawerWidth = winDim.width - 100
   if (isMenuActive) {
     // menu is active, interpret swipes as closes
     menuTranslateX = Animated.multiply(swipeGestureInterp, menuDrawerWidth * -1)
+    shouldRenderMenu = true
   } else if (!store.nav.tab.canGoBack) {
     // at back of history, interpret swipes as opens
     menuTranslateX = Animated.subtract(
       menuDrawerWidth * -1,
       Animated.multiply(swipeGestureInterp, menuDrawerWidth),
     )
-  } else {
+    shouldRenderMenu = true
-    // not at back of history, leave off screen
-    menuTranslateX = menuDrawerWidth * -1
   }
   const menuSwipeTransform = {
     transform: [{translateX: menuTranslateX}],
@@ -425,12 +426,14 @@ export const MobileShell: React.FC = observer(() => {
               <Animated.View style={[styles.screenMask, menuSwipeOpacity]} />
             </TouchableWithoutFeedback>
           ) : undefined}
-          <Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
+          {shouldRenderMenu && (
-            <Menu
+            <Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
-              visible={isMenuActive}
+              <Menu
-              onClose={() => store.shell.setMainMenuOpen(false)}
+                visible={isMenuActive}
-            />
+                onClose={() => store.shell.setMainMenuOpen(false)}
-          </Animated.View>
+              />
+            </Animated.View>
+          )}
         </HorzSwipe>
       </View>
       {isTabsSelectorActive ? (