Heif support

Author: markharding

apps/polycentric/package.json

@@ -47,6 +47,7 @@
     "expo-font": "~55.0.4",
     "expo-haptics": "~55.0.8",
     "expo-image": "~55.0.5",
+    "expo-image-manipulator": "~55.0.17",
     "expo-image-picker": "~55.0.10",
     "expo-linking": "~55.0.7",
     "expo-notifications": "~55.0.0",

apps/polycentric/src/common/components/composites/Fab.tsx

@@ -21,18 +21,18 @@ export function Fab({ onPress, icon, title = '' }: FabProps) {
   const shadow =
     Platform.OS === 'web'
       ? {
-        boxShadow: `0 6px 16px ${withHexOpacity(
-          theme.palette.primary_900,
-          isLight ? '28' : '40',
-        )}`,
-      }
+          boxShadow: `0 6px 16px ${withHexOpacity(
+            theme.palette.primary_900,
+            isLight ? '28' : '40',
+          )}`,
+        }
       : {
-        shadowColor: theme.palette.primary_900,
-        shadowOpacity: isLight ? 0.16 : 0.26,
-        shadowRadius: isLight ? 14 : 10,
-        shadowOffset: { width: 0, height: isLight ? 3 : 4 },
-        elevation: isLight ? 4 : 6,
-      };
+          shadowColor: theme.palette.primary_900,
+          shadowOpacity: isLight ? 0.16 : 0.26,
+          shadowRadius: isLight ? 14 : 10,
+          shadowOffset: { width: 0, height: isLight ? 3 : 4 },
+          elevation: isLight ? 4 : 6,
+        };
 
   return (
     <View style={[Atoms.absolute, { bottom: 0, right: 0 }, Atoms.p_lg]}>

apps/polycentric/src/common/lib/images/normalizeImage.ts

@@ -0,0 +1,14 @@
+import { ImageManipulator, SaveFormat } from 'expo-image-manipulator';
+
+/**
+ * Decode `uri` (including HEIC/HEIF, which the Rust core can't read) and
+ * re-encode it as an upright JPEG, returning a new file/blob URI.
+ */
+export async function normalizeImage(uri: string): Promise<string> {
+  const rendered = await ImageManipulator.manipulate(uri).renderAsync();
+  const result = await rendered.saveAsync({
+    format: SaveFormat.JPEG,
+    compress: 1,
+  });
+  return result.uri;
+}

apps/polycentric/src/common/lib/images/processAndUploadImage.ts

@@ -1,6 +1,7 @@
 import { v2, type PolycentricClient } from '@polycentric/react-native';
 import { File } from 'expo-file-system';
 import { isWeb } from '@/src/common/util/platform';
+import { normalizeImage } from './normalizeImage';
 
 /** Default variant edge lengths. */
 export const DEFAULT_IMAGE_VARIANT_SIZES = [48, 128, 512];
@@ -25,13 +26,18 @@ export async function processAndUploadImage(
   const sizes = options.sizes ?? DEFAULT_IMAGE_VARIANT_SIZES;
   const mode = options.mode ?? 'fill';
 
+  // Decode via the platform's native image pipeline first: this handles
+  // formats the core can't (HEIC/HEIF) and bakes EXIF orientation into
+  // upright pixels, so the core only ever sees an upright JPEG.
+  const normalizedUri = await normalizeImage(uri);
+
   // RN's `fetch` can't read `file://` URIs on Android (and is
   // unreliable on iOS), so go through `expo-file-system` on
   // native. Web stays on `fetch` to handle `blob:` / `data:` URIs
   // from `<input type="file">`.
   const buffer = isWeb
-    ? await (await fetch(uri)).arrayBuffer()
-    : await new File(uri).arrayBuffer();
+    ? await (await fetch(normalizedUri)).arrayBuffer()
+    : await new File(normalizedUri).arrayBuffer();
   const raw = new Uint8Array(buffer);
 
   const variants = await Promise.all(

apps/polycentric/src/common/util/platform.ts

@@ -1,4 +1,4 @@
 import { Platform } from 'react-native';
 
 export const isWeb = Platform.OS === 'web';
-export const isIOS = Platform.OS === 'ios';
+export const isIOS = Platform.OS === 'ios';