Expo Image and Appwrite headers

[karolkulesza1]

Hey all,

I've been stuck on something that is probably quite simple. My users fetch their uploaded images from the Appwrite database and they are displayed, which works fine, but I'm trying to move away from RNImage to expo-image for displaying and I'm struggling to find any documentation on what to paas in headers for authentication.

Can anyone point me in the right direction for usage of expo-image with Appwrite?

[NspxMiguel]

expo-image accepts request headers as part of its source object. You can use the URL produced by Appwrite and pass the same authenticated headers that your Appwrite client uses:

import { Image } from "expo-image";

const fileUrl = storage.getFileViewURL(bucketId, fileId);

<Image
  source={{
    uri: fileUrl.toString(),
    headers: client.getHeaders(),
  }}
  style={{ width: 200, height: 200 }}
  contentFit="cover"
/>

This assumes client is the configured react-native-appwrite client that already has the project and user session set. getHeaders() returns a copy of those request headers, including authentication headers (SDK source), and Expo's ImageSource supports a headers record (Expo source).

For a public file, the headers are unnecessary and this is enough:

<Image source={{ uri: fileUrl.toString() }} />

Avoid putting an Appwrite API key in a mobile app. If the first version still returns 401, check that the signed-in user has read permission on the file and that the session was applied to this exact client instance.