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 (
- <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,
- },
-})
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 (
- <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,
- },
-})
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 (
- <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',
- },
-})
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<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 {
- // 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(() => {
<Animated.View style={[styles.screenMask, menuSwipeOpacity]} />
</TouchableWithoutFeedback>
) : undefined}
- <Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
- <Menu
- visible={isMenuActive}
- onClose={() => store.shell.setMainMenuOpen(false)}
- />
- </Animated.View>
+ {shouldRenderMenu && (
+ <Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
+ <Menu
+ visible={isMenuActive}
+ onClose={() => store.shell.setMainMenuOpen(false)}
+ />
+ </Animated.View>
+ )}
</HorzSwipe>
</View>
{isTabsSelectorActive ? (