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} - - store.shell.setMainMenuOpen(false)} - /> - + {shouldRenderMenu && ( + + store.shell.setMainMenuOpen(false)} + /> + + )} {isTabsSelectorActive ? (