Fix Wikimedia photos not rendering on Android

src/map/ElementDetailScreen.tsx

@@ -15,6 +15,7 @@ import {
   useElementDetailQuery,
 } from '../graphql/__generated__/types';
 import type {RootStackParamList} from '../navigation/types';
+import {photoImageSource} from '../photos/photoImageSource';
 import type {Theme} from '../theme/colors';
 import {useTheme} from '../theme/useTheme';
 
@@ -122,7 +123,7 @@ function ModalContents({
               {element.photos.map(photo => (
                 <Image
                   key={photo.id}
-                  source={{uri: photo.regular}}
+                  source={photoImageSource(photo.regular)}
                   style={styles.photo}
                 />
               ))}

src/map/ElementEditScreen.tsx

@@ -22,6 +22,7 @@ import {
   useUpdateElementMutation,
 } from '../graphql/__generated__/types';
 import type {RootStackParamList} from '../navigation/types';
+import {photoImageSource} from '../photos/photoImageSource';
 import {usePhotoUploader} from '../photos/photoUpload';
 import type {Theme} from '../theme/colors';
 import {useTheme} from '../theme/useTheme';
@@ -254,7 +255,7 @@ function EditForm({element, onDone}: {element: Element; onDone: () => void}) {
             {photos.map(photo => (
               <View key={photo.id} style={styles.photoThumbWrap}>
                 <Image
-                  source={{uri: photo.thumbnail}}
+                  source={photoImageSource(photo.thumbnail)}
                   style={styles.photoThumb}
                 />
                 <Pressable

src/photos/photoImageSource.ts

@@ -0,0 +1,14 @@
+import type {ImageURISource} from 'react-native';
+
+// Wikimedia's User-Agent policy (https://meta.wikimedia.org/wiki/User-Agent_policy)
+// rejects generic library User-Agents (e.g. the `okhttp/x.y` that React Native's
+// native image loader sends on Android) with a 403, so `wikimedia`-type photos
+// never render. Browsers send a full `Mozilla/...` UA, which is why the same
+// photos load fine on web. Sending a descriptive UA satisfies the policy. It's
+// harmless for our other photo hosts (S3/Cloudinary), so we apply it to all.
+const USER_AGENT = 'Culpeos/0.0.1 (https://culpeos.com)';
+
+// Builds an Image `source` for a photo URL with a User-Agent header attached.
+export function photoImageSource(uri: string): ImageURISource {
+  return {uri, headers: {'User-Agent': USER_AGENT}};
+}