Profile Image from storage not showing ( Black screen )

I am uploading a photo during register, and it is also being uploaded to appwrite storage . But in my profile screen it is showing black screen. I am attaching all code

This is profile.tsx

This is register.tsx

This is authContext.tsx

Please Instead of giving the whole file Just give part that uses or uploads the image. No one will want to download the files and look through them

const register = async ({ email, password, name, profilePhoto, }: { email: string; password: string; name: string; profilePhoto?: { uri: string; fileName?: string; mimeType?: string; fileSize?: number; }; }) => { try { const newAccount = await account.create(ID.unique(), email, password, name); await account.createEmailPasswordSession(email, password); const accountData = await account.get();

  let profileImageUrl: string | undefined;

  if (profilePhoto) {
    const file =
      Platform.OS === 'web'
        ? (profilePhoto as any) // web fallback (not used)
        : await prepareNativeFile(profilePhoto);

    const upload = await storage.createFile(
      BUCKET_ID_PROFILE_PHOTOS,
      accountData.$id,
      file
    );

    profileImageUrl = storage.getFilePreview(
      BUCKET_ID_PROFILE_PHOTOS,
      upload.$id
    ).href;
  }

  setUser({
    ...accountData,
    profileImageUrl,
  });
} catch (error: any) {
  console.error('Registration failed:', error);
  throw new Error(error?.message || 'User registration failed.');
}

}; This part is uploading in authContext

There might be some issues related to this 1.Permissions not set up. 2. If permissions are setup then it might be so that user is not verified.

wait , how to verify user ?

You would have to send an email to the user which contains a link then process the link. But for test Go to console Select your current user Make them verified.

I did that , but still same

The profile photo is still not coming

How are you fetching the image?

This is how i am getting it from storage

const profileImage = user?.profileImageUrl && typeof user.profileImageUrl === 'string' ? { uri: ${user.profileImageUrl} } // Use the provided URL directly : require('@/assets/images/image.png'); // Default profile image in profile.tsx

Could you console log and show the url?

Ahh Got it

User data changed: {"$createdAt": "2025-05-09T18:37:31.598+00:00", "$id": "681e4b6c0039a25238d3", "$updatedAt": "2025-05-09T18:37:31.598+00:00", "accessedAt": "2025-05-09T18:37:31.597+00:00", "email": "rohitsharma526@gmail.com", "emailVerification": false, "labels": [], "mfa": false, "name": "Rohit Sharma Ji ", "passwordUpdate": "2025-05-09T18:37:31.597+00:00", "phone": "", "phoneVerification": false, "prefs": {}, "profileImageUrl": "https://cloud.appwrite.io/v1/storage/buckets/68172df2000c304411a3/files/681e4b6c0039a25238d3/preview?project=67d59b42001984d9da23", "registration": "2025-05-09T18:37:31.597+00:00", "status": true, "targets": [{"$createdAt": "2025-05-09T18:37:31.633+00:00", "$id": "681e4b6b9a98d1ab45b2", "$updatedAt": "2025-05-09T18:37:31.633+00:00", "expired": false, "identifier": "rohitsharma526@gmail.com", "name": "", "providerId": null, "providerType": "email", "userId": "681e4b6c0039a25238d3"}]}

See Here you are using getFilePreview This actually resizes the photo In free plan you wont be able to do that Even in pro You have limitation So yse getFileView instead of getFilePreview

{"message":"Image transformations are blocked on your current plan. Please upgrade to a higher plan. ","code":403,"type":"storage_image_transformations_blocked","version":"1.6.2"} This is the log when you click on the image link.

Brother I don't know how to thank you 🙏

I was stuck with it from two days

No worries. If you face a problem Just ask in the community. And btw Its good to add try catch blocks and console log the results returned.

Thank you so much