feat: add picture page (#5)

### Demo


https://github.com/user-attachments/assets/c25faf33-4a23-470c-b9b9-2e632bbf27e6

app/(app)/picture.tsx

@@ -0,0 +1,72 @@
+import {useState} from 'react';
+import {ActivityIndicator, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {css} from '@emotion/native';
+import {IconButton} from 'dooboo-ui';
+import {Stack, useLocalSearchParams, useRouter} from 'expo-router';
+import CustomLoadingIndicator from '../../src/components/uis/CustomLoadingIndicator';
+import Wrapper from '../../src/components/uis/Wrapper';
+import ImageZoomView from '../../src/components/uis/ImageZoomView';
+import {isDesktopDevice} from '../../src/utils/common';
+import {t} from '../../src/STRINGS';
+
+export default function Picture(): JSX.Element {
+  const {imageUrl} = useLocalSearchParams();
+  const {top, right} = useSafeAreaInsets();
+  const {back} = useRouter();
+  const [loading, setLoading] = useState(true);
+
+  if (!imageUrl || typeof imageUrl !== 'string') {
+    return <CustomLoadingIndicator />;
+  }
+
+  return (
+    <Wrapper>
+      <Stack.Screen
+        options={{headerShown: false, title: t('common.picture')}}
+      />
+      <View
+        style={css`
+          flex: 1;
+        `}
+      >
+        <>
+          {loading ? (
+            <ActivityIndicator
+              size="large"
+              style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+              }}
+            />
+          ) : null}
+          <ImageZoomView
+            onLoadEnd={() => {
+              setLoading(false);
+            }}
+            style={css`
+              opacity: ${loading ? 0 : 1};
+            `}
+            uri={decodeURIComponent(imageUrl)}
+          />
+        </>
+        <IconButton
+          color="light"
+          icon="X"
+          onPress={() => {
+            back();
+          }}
+          style={css`
+            position: absolute;
+            right: ${right + 6 + 'px'};
+            top: ${isDesktopDevice() ? '12px' : top + 'px'};
+          `}
+          type="text"
+        />
+      </View>
+    </Wrapper>
+  );
+}

assets/langs/en.json

@@ -19,6 +19,7 @@
     "ok": "OK",
     "or": "or",
     "permissionGrantCamera": "Please grant camera permission to take pictures.",
+    "picture": "Picture",
     "post": "Post",
     "profile": "Profile",
     "report": "Report",

assets/langs/ko.json

@@ -19,6 +19,7 @@
     "ok": "확인",
     "or": "또는",
     "permissionGrantCamera": "촬영을 위해 카메라 권한을 부여해주세요.",
+    "picture": "사진",
     "post": "게시판",
     "profile": "프로필",
     "report": "신고",

package.json

@@ -38,6 +38,7 @@
     "@expo/match-media": "^0.4.0",
     "@expo/react-native-action-sheet": "^4.1.0",
     "@hookform/resolvers": "^3.9.0",
+    "@likashefqet/react-native-image-zoom": "^3.0.0",
     "@prisma/client": "5.16.1",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
@@ -76,6 +77,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.52.1",
     "react-native": "0.74.2",
+    "react-native-device-info": "^11.1.0",
     "react-native-error-boundary": "^1.2.4",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-modal": "^13.0.1",

src/components/uis/ImageZoomView.tsx

@@ -0,0 +1,11 @@
+import {Image, Platform} from 'react-native';
+import type {ImageZoomProps} from '@likashefqet/react-native-image-zoom';
+import {ImageZoom} from '@likashefqet/react-native-image-zoom';
+
+export default function ImageZoomView(props: ImageZoomProps): JSX.Element {
+  if (Platform.OS === 'web') {
+    return <Image {...props} />;
+  }
+
+  return <ImageZoom {...props} />;
+}

src/components/uis/Wrapper.tsx

@@ -0,0 +1,56 @@
+import type {ReactNode} from 'react';
+import type {ViewStyle} from 'react-native';
+import {Platform} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import styled, {css} from '@emotion/native';
+import {useDooboo} from 'dooboo-ui';
+
+const Container = styled.View`
+  flex: 1;
+  align-self: stretch;
+  background-color: ${({theme}) => theme.bg.paper};
+  justify-content: center;
+
+  flex-direction: row;
+`;
+
+const Content = styled.View`
+  background-color: ${({theme}) => theme.bg.paper};
+  flex: 1;
+`;
+
+export default function Wrapper({
+  style,
+  children,
+}: {
+  style?: ViewStyle;
+  children: ReactNode;
+}): JSX.Element {
+  const {left, right} = useSafeAreaInsets();
+  const {theme} = useDooboo();
+
+  return (
+    <Container
+      style={[
+        css`
+          background-color: ${theme.bg.paper};
+        `,
+        Platform.OS !== 'web' &&
+          css`
+            padding-right: ${left + 'px'};
+            padding-right: ${right + 'px'};
+          `,
+        style,
+      ]}
+    >
+      <Content
+        style={css`
+          flex: 1;
+          background-color: ${theme.bg.basic};
+        `}
+      >
+        {children}
+      </Content>
+    </Container>
+  );
+}

src/utils/common.ts

@@ -1,6 +1,7 @@
 import {Linking, Platform} from 'react-native';
 import * as VideoThumbnails from 'expo-video-thumbnails';
 import {ImagePickerAsset} from 'expo-image-picker';
+import {getDeviceTypeSync} from 'react-native-device-info';
 
 export const openURL = async (url: string): Promise<void> => {
   const supported = await Linking.canOpenURL(url);
@@ -78,3 +79,9 @@ export const filterUploadableAssets = (
     return !asset.uri || !isImageHttp(asset.uri);
   });
 };
+
+export const isDesktopDevice = (): boolean =>
+  getDeviceTypeSync() === 'Desktop' ||
+  Platform.OS === 'web' ||
+  Platform.OS === 'macos' ||
+  Platform.OS === 'windows';