Skip to content

Commit 28ed0e2

Browse files
arthynarthyn
committed
image-viewer: modal to avoid shrinking drawers
1 parent af35fa4 commit 28ed0e2

File tree

3 files changed

+95
-87
lines changed

3 files changed

+95
-87
lines changed

‎packages/app/navigation/desktop/HomeNavigator.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,12 @@ export const HomeNavigator = () => {
4444
const state = navigation.getState();
4545
const routes = state.routes[state.index].state?.routes;
4646
const currentScreen = routes?.[routes.length - 1];
47-
const isImageViewer = currentScreen?.name === 'ImageViewer';
4847

4948
return {
5049
drawerType: 'permanent',
5150
headerShown: false,
5251
drawerStyle: {
53-
width: isImageViewer ? 0 : DESKTOP_SIDEBAR_WIDTH,
52+
width: DESKTOP_SIDEBAR_WIDTH,
5453
backgroundColor,
5554
borderRightColor: borderColor,
5655
},

‎packages/app/navigation/desktop/MessagesNavigator.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,12 @@ export const MessagesNavigator = () => {
4343
const state = navigation.getState();
4444
const routes = state.routes[state.index].state?.routes;
4545
const currentScreen = routes?.[routes.length - 1];
46-
const isImageViewer = currentScreen?.name === 'ImageViewer';
4746

4847
return {
4948
drawerType: 'permanent',
5049
headerShown: false,
5150
drawerStyle: {
52-
width: isImageViewer ? 0 : DESKTOP_SIDEBAR_WIDTH,
51+
width: DESKTOP_SIDEBAR_WIDTH,
5352
backgroundColor,
5453
borderRightColor: borderColor,
5554
},

‎packages/app/ui/components/ImageViewerScreenView.tsx

+93-83
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Image } from '@tloncorp/ui';
44
import * as FileSystem from 'expo-file-system';
55
import * as MediaLibrary from 'expo-media-library';
66
import { ElementRef, useRef, useState } from 'react';
7-
import { Alert, Dimensions, TouchableOpacity } from 'react-native';
7+
import { Alert, Dimensions, Modal, TouchableOpacity } from 'react-native';
88
import {
99
Directions,
1010
Gesture,
@@ -96,96 +96,106 @@ export function ImageViewerScreenView(props: {
9696
};
9797

9898
return (
99-
<GestureDetector gesture={dismissGesture}>
100-
<ZStack
101-
flex={1}
102-
backgroundColor="$black"
103-
paddingTop={top}
104-
data-testid="image-viewer"
105-
>
106-
<View flex={isWeb ? 0 : 1}>
107-
{isWeb ? (
108-
<Zoomable
109-
ref={zoomableRef}
110-
data-testid="zoomable-image"
111-
style={{
112-
height: '100%',
113-
alignItems: 'center',
114-
}}
115-
isDoubleTapEnabled
116-
isSingleTapEnabled
117-
isPanEnabled
118-
minScale={0.1}
119-
onPinchEnd={handlePinchEnd}
120-
onDoubleTap={onDoubleTap}
121-
onSingleTap={onSingleTap}
122-
maxPanPointers={maxPanPointers}
123-
>
124-
<Image
125-
source={{
126-
uri: props.uri,
127-
}}
128-
data-testid="image"
99+
<Modal animationType="none">
100+
<GestureDetector gesture={dismissGesture}>
101+
<ZStack
102+
flex={1}
103+
backgroundColor="$black"
104+
paddingTop={top}
105+
data-testid="image-viewer"
106+
>
107+
<View flex={1}>
108+
{isWeb ? (
109+
<Zoomable
110+
ref={zoomableRef}
111+
data-testid="zoomable-image"
129112
style={{
130-
maxWidth: Dimensions.get('window').width,
131-
maxHeight: Dimensions.get('window').height - top,
113+
flex: 1,
114+
height: '100%',
115+
alignItems: 'center',
116+
justifyContent: 'center',
132117
}}
118+
isDoubleTapEnabled
119+
isSingleTapEnabled
120+
isPanEnabled
121+
minScale={0.1}
122+
onPinchEnd={handlePinchEnd}
123+
onDoubleTap={onDoubleTap}
124+
onSingleTap={onSingleTap}
125+
maxPanPointers={maxPanPointers}
126+
>
127+
<Image
128+
source={{
129+
uri: props.uri,
130+
}}
131+
data-testid="image"
132+
style={{
133+
height: 'auto',
134+
maxWidth: Dimensions.get('window').width,
135+
maxHeight: Dimensions.get('window').height - top,
136+
}}
137+
/>
138+
</Zoomable>
139+
) : (
140+
<ImageZoom
141+
ref={zoomableRef}
142+
uri={props.uri}
143+
style={{ flex: 1 }}
144+
isDoubleTapEnabled
145+
isSingleTapEnabled
146+
isPanEnabled
147+
width={Dimensions.get('window').width - 20}
148+
maxPanPointers={maxPanPointers}
149+
minScale={0.1}
150+
onPinchEnd={handlePinchEnd}
151+
onDoubleTap={onDoubleTap}
152+
onSingleTap={onSingleTap}
133153
/>
134-
</Zoomable>
135-
) : (
136-
<ImageZoom
137-
ref={zoomableRef}
138-
uri={props.uri}
139-
style={{ flex: 1 }}
140-
isDoubleTapEnabled
141-
isSingleTapEnabled
142-
isPanEnabled
143-
width={Dimensions.get('window').width - 20}
144-
maxPanPointers={maxPanPointers}
145-
minScale={0.1}
146-
onPinchEnd={handlePinchEnd}
147-
onDoubleTap={onDoubleTap}
148-
onSingleTap={onSingleTap}
149-
/>
150-
)}
151-
</View>
154+
)}
155+
</View>
152156

153-
{/* overlay */}
154-
{showOverlay ? (
155-
<YStack padding="$xl" paddingTop={isWeb ? 16 : top}>
156-
<XStack
157-
justifyContent={isWeb ? 'flex-end' : 'space-between'}
158-
gap="$m"
157+
{/* overlay */}
158+
{showOverlay ? (
159+
<YStack
160+
position="absolute"
161+
width="100%"
162+
padding="$xl"
163+
paddingTop={isWeb ? 16 : top}
159164
>
160-
<TouchableOpacity
161-
onPress={handleDownloadImage}
162-
activeOpacity={0.8}
165+
<XStack
166+
justifyContent={isWeb ? 'flex-end' : 'space-between'}
167+
gap="$m"
163168
>
164-
<Stack
165-
padding="$m"
166-
backgroundColor="$darkOverlay"
167-
borderRadius="$l"
169+
<TouchableOpacity
170+
onPress={handleDownloadImage}
171+
activeOpacity={0.8}
168172
>
169-
<Icon type="ArrowDown" size="$l" color="$white" />
170-
</Stack>
171-
</TouchableOpacity>
173+
<Stack
174+
padding="$m"
175+
backgroundColor="$darkOverlay"
176+
borderRadius="$l"
177+
>
178+
<Icon type="ArrowDown" size="$l" color="$white" />
179+
</Stack>
180+
</TouchableOpacity>
172181

173-
<TouchableOpacity
174-
onPress={() => props.goBack()}
175-
activeOpacity={0.8}
176-
>
177-
<Stack
178-
padding="$m"
179-
backgroundColor="$darkOverlay"
180-
borderRadius="$l"
182+
<TouchableOpacity
183+
onPress={() => props.goBack()}
184+
activeOpacity={0.8}
181185
>
182-
<Icon type="Close" size="$l" color="$white" />
183-
</Stack>
184-
</TouchableOpacity>
185-
</XStack>
186-
</YStack>
187-
) : null}
188-
</ZStack>
189-
</GestureDetector>
186+
<Stack
187+
padding="$m"
188+
backgroundColor="$darkOverlay"
189+
borderRadius="$l"
190+
>
191+
<Icon type="Close" size="$l" color="$white" />
192+
</Stack>
193+
</TouchableOpacity>
194+
</XStack>
195+
</YStack>
196+
) : null}
197+
</ZStack>
198+
</GestureDetector>
199+
</Modal>
190200
);
191201
}

0 commit comments

Comments
 (0)