react-native: ImageSource in Image doesn't send headers

Also from a security aspect this is important because some websites allow to sent the authentication in the url as „?bearer=…“. When doing this and saving the image the token gets saved too as file name.

the adding of headers is therefore essential

I am experiencing the exact same problem.

Please fix this

Any solution here guys? I’m facing the same problem. The header in Image acting really weird on Android, but on IOS everything is still smooth

After a fix for this too. Our UAT env’s are closed behind headers, so we can’t get images working properly in some cases.

Same here on Android. It worked for me in version 0.68.2, but after upgrading to 0.73.4 all the images disappeared! I quickly need to update the app in the stores, because of new regulations… help! 😦

Update: If you are using Expo, there is a package called “expo-image”, that works with headers. For non Expo users, you could try “react-native-fast-image”.

Happens to me on ios if newArch is on, haven’t check Android. And it’s clearly not implemented: https://github.com/facebook/react-native/blob/main/packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/react/renderer/imagemanager/RCTImagePrimitivesConversions.h#L110 That todo’s been there for 6 years now. Works if disable newArch.

I can confirm the headers are still not sent. Here’s how I solved this in my app (I used Avatar component from the UI Kitten library but it’s actually a small wrapper for the native Image so it’s the same situation).

import { useState, useCallback, useEffect } from 'react';
import { ImageSourcePropType } from 'react-native/Libraries/Image/Image';
import { Avatar } from '@ui-kitten/components';
import { EvaSize } from '@ui-kitten/components/devsupport';

import { authorizationHeaders } from '../services/apiSvc';

type TPhotoProps = {
  src: string;
  size?: EvaSize;
};

export default function Photo({ src, size }: TPhotoProps) {
  const [source, setSource] = useState<ImageSourcePropType | undefined>(undefined);

  const load = useCallback(async () => {
    try {
      const response = await fetch(src, { headers: authorizationHeaders });
      const blob = await response.blob();
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = () => setSource({ uri: reader.result as string });
    } catch (err) {
      // file loading failed
      setSource(require('../../assets/images/fallback-avatar.png'));
    }
  }, [src]);

  useEffect(() => {
    load();
  }, [load]);

  return (
    <Avatar source={source} size={size} />
  );
}