diff --git a/src/state/models/shell-ui.ts b/src/state/models/shell-ui.ts
index 7628e068..c12921f3 100644
--- a/src/state/models/shell-ui.ts
+++ b/src/state/models/shell-ui.ts
@@ -99,11 +99,7 @@ export class ShellUiModel {
| ReportAccountModal
| undefined
isLightboxActive = false
- activeLightbox:
- | ProfileImageLightbox
- | ImageLightbox
- | ImagesLightbox
- | undefined
+ activeLightbox: ProfileImageLightbox | ImagesLightbox | undefined
isComposerActive = false
composerOpts: ComposerOpts | undefined
diff --git a/src/view/com/lightbox/Image.tsx b/src/view/com/lightbox/Image.tsx
deleted file mode 100644
index a620e949..00000000
--- a/src/view/com/lightbox/Image.tsx
+++ /dev/null
@@ -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 (
-
-
-
- )
-}
-
-const styles = StyleSheet.create({
- container: {
- position: 'absolute',
- left: 0,
- },
- image: {
- resizeMode: 'contain',
- width: '100%',
- aspectRatio: 1,
- },
-})
diff --git a/src/view/com/lightbox/Images.tsx b/src/view/com/lightbox/Images.tsx
deleted file mode 100644
index 8890adb6..00000000
--- a/src/view/com/lightbox/Images.tsx
+++ /dev/null
@@ -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 (
-
-
- {uris.map((uri, i) => (
-
- ))}
-
- )
-}
-
-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,
- },
-})
diff --git a/src/view/com/lightbox/ProfileImage.tsx b/src/view/com/lightbox/ProfileImage.tsx
deleted file mode 100644
index 41417ea4..00000000
--- a/src/view/com/lightbox/ProfileImage.tsx
+++ /dev/null
@@ -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 (
-
-
-
-
- )
-}
-
-const styles = StyleSheet.create({
- container: {
- position: 'absolute',
- left: 20,
- },
- loading: {
- position: 'absolute',
- },
-})
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index ffb22bda..54df5dd1 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -127,6 +127,7 @@ export const MobileShell: React.FC = observer(() => {
const scrollElRef = useRef()
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 {
- // not at back of history, leave off screen
- menuTranslateX = menuDrawerWidth * -1
+ shouldRenderMenu = true
}
const menuSwipeTransform = {
transform: [{translateX: menuTranslateX}],
@@ -425,12 +426,14 @@ export const MobileShell: React.FC = observer(() => {
) : undefined}
-
-
+ {shouldRenderMenu && (
+
+
+ )}
{isTabsSelectorActive ? (