(fix): image viewer #89

Changelog: fix

Author: markharding

apps/polycentric/app.config.ts

@@ -10,7 +10,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   name: NAME,
   slug: 'polycentric',
   version: process.env.APP_VERSION ?? '0.0.1',
-  orientation: 'portrait',
+  orientation: 'default',
   icon: './src/common/assets/images/app-icons/android-icon-foreground.png',
   scheme: 'polycentric',
   web: {
@@ -23,6 +23,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       light: './src/common/assets/images/app-icons/ios-icon-default.png',
       tinted: './src/common/assets/images/app-icons/ios-icon-monochrome.png',
     },
+    requireFullScreen: true,
     supportsTablet: true,
     bundleIdentifier: ID,
     infoPlist: {
@@ -81,6 +82,12 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     ],
     'expo-image',
     'expo-notifications',
+    [
+      'expo-screen-orientation',
+      {
+        initialOrientation: 'DEFAULT',
+      },
+    ],
   ],
   experiments: {
     typedRoutes: true,

apps/polycentric/app/_layout.tsx

@@ -33,7 +33,9 @@ function RootStack() {
           headerShown: false,
           fullScreenGestureEnabled: !isWeb,
           contentStyle: [theme.atoms.bg, Atoms.flex_1, Atoms.overflow_auto],
-          ...(isWeb ? { animation: 'none' as const } : {}),
+          ...(isWeb
+            ? { animation: 'none' as const }
+            : { orientation: 'portrait_up' }),
         }}
       >
         <Stack.Screen name="(tabs)" />
@@ -55,6 +57,17 @@ function RootStack() {
             contentStyle: { backgroundColor: 'transparent' },
           }}
         />
+        <Stack.Screen
+          name="image-viewer"
+          options={{
+            presentation: 'transparentModal',
+            animation: 'fade',
+            contentStyle: { backgroundColor: 'transparent' },
+            // Let just this screen rotate to landscape; the rest of the
+            // app stays portrait.
+            ...(isWeb ? {} : { orientation: 'all' as const }),
+          }}
+        />
       </Stack>
     </>
   );

apps/polycentric/app/image-viewer.tsx

@@ -0,0 +1 @@
+export { default } from '@/src/features/post/ImageViewer/ImageViewerScreen';

apps/polycentric/package.json

@@ -52,6 +52,7 @@
     "expo-linking": "~55.0.7",
     "expo-notifications": "~55.0.0",
     "expo-router": "~55.0.3",
+    "expo-screen-orientation": "~55.0.16",
     "expo-server": "~55.0.8",
     "expo-splash-screen": "~55.0.10",
     "expo-sqlite": "~55.0.15",

apps/polycentric/src/common/lib/useOrientation.ts

@@ -0,0 +1,35 @@
+import * as ScreenOrientation from 'expo-screen-orientation';
+import { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+
+/**
+ * Tracks the device's current screen orientation
+ */
+export function useOrientation(): ScreenOrientation.Orientation {
+  const [orientation, setOrientation] = useState<ScreenOrientation.Orientation>(
+    ScreenOrientation.Orientation.PORTRAIT_UP,
+  );
+
+  useEffect(() => {
+    if (Platform.OS === 'web') return;
+
+    let active = true;
+    void ScreenOrientation.getOrientationAsync().then((current) => {
+      if (active) setOrientation(current);
+    });
+
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        console.log(event);
+        setOrientation(event.orientationInfo.orientation);
+      },
+    );
+
+    return () => {
+      active = false;
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+    };
+  }, []);
+
+  return orientation;
+}