React-native: Image headers and method not working on Android

[pelomedusa]

My dependencies:

    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-web": "^0.11.4"

Bug:
In the source field of any Image , only the uri attribute is working. The method and the headers are not working.
If i check my apache logs, headers are not sent and the request method is GET. I've also tested with websites like https://webhook.site

This bug is only present on Android, i tested on IOS and it works just fine

Reproduce:

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: 'http://localhost/api/me/video/31/thumbnail'+Date.now(),
          method: 'POST',
          headers: {
            Pragma: 'no-cache',
          },
          body: 'Your Body goes here',
        }}
        style={{width: 400, height: 400}}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Snack:
https://snack.expo.io/SktKlBPXS

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[pelomedusa]

Edit: added Snack

[pelomedusa]

Any news?

[Tinkvision]

Same issue

[pelomedusa]

The method being ignored is not much of a problem, since loading an image _should_ always be a GET request, but the headers are the real problem. I'm not sure how we are supposed to load a protected image if we can't pass a token (ie: Bearer) to the request.

[dhcmega]

Hi, same issue, no Bearer token.

[mdoesburg]

Same issue, can't pass bearer token on Android. Works on iOS.

[dhcmega]

I'm using EXPO, it worked by uninstall/install the expo client.

[Jonakemon]

I'm using EXPO, it worked by uninstall/install the expo client.

@dhcmega What expo client version are you using?

[dhcmega]

Last version, 2.13.1 using sdk35

[hayate]

Had the same issue on Expo client 2.13.1, suddenly stopped sending the headers, started working again after restarting the expo app.

[ZakeryFyke]

Same issue. Not sending Basic auth header.

[waltergar]

Same issue here! Any solution?

[waltergar]

I just created custom Image component for this.
So logic is that fetch image as blob from api at componentDidMount, convert blob to base64 string and cache it.

componentDidMount() {
 const {source} = this.props;
 const isCached = (typeof source === 'string')
      || (source.headers === null)
      || Boolean(localStorage.getItem(source.uri));
    if (!isCached) {
      this._resolveAssetSource();    
 }
}

_resolveAssetSource = () => {
    const source = this.props.source;
    fetchAsBlob(source)
      .then(convertBlobToBase64)
      .then(data => {
        localStorage.setItem(source.uri, data);
        this.forceUpdate();
      })
      .catch(async () => {
        await backOff(
          () => fetchAsBlob(source).then(convertBlobToBase64)
            .then(data => {
              localStorage.setItem(source.uri, data);
              this.forceUpdate();
            })
        );
      });
  }

and then in render() display image from localStorage.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[raphaelbadia]

I had same issue, the headers stopped being sent on android for no reason. Clearing expo data and cache in phone's settings helped.

[dhcmega]

I'm still having this problem too. I'm not sure is clearing expo data is actualy needed. Sometimes just closing and reopening the app is enough.
At first it sends all my headers, but eventually it starts sending default headers (or something like that). Maybe is related to cache?
My workaround is to add all my headers as query strings.

[katasanirohith]

Same problem here. Header are not being sent in android when seen in the network trace the header are empty.

[katasanirohith]

I just created custom Image component for this.
So logic is that fetch image as blob from api at componentDidMount, convert blob to base64 string and cache it.

componentDidMount() {
 const {source} = this.props;
 const isCached = (typeof source === 'string')
      || (source.headers === null)
      || Boolean(localStorage.getItem(source.uri));
    if (!isCached) {
      this._resolveAssetSource();    
 }
}

_resolveAssetSource = () => {
    const source = this.props.source;
    fetchAsBlob(source)
      .then(convertBlobToBase64)
      .then(data => {
        localStorage.setItem(source.uri, data);
        this.forceUpdate();
      })
      .catch(async () => {
        await backOff(
          () => fetchAsBlob(source).then(convertBlobToBase64)
            .then(data => {
              localStorage.setItem(source.uri, data);
              this.forceUpdate();
            })
        );
      });
  }

and then in render() display image from localStorage.

Did you find any solution other than this?

[chainlito]

Hey, @katasanirohith
Did you try this one?
Try to fetch image in componentDidMount and display it in render

fetch(YOUR_IMAGE_URI, {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + 'TOKEN'
}
}
).then((res) => res.text())
.then((content) => {
this.setState({
base64: content
})
})

And ...

return (

)

[dhcmega]

hi @horaciogar !
I haven't tried your workaround, but in my case, it's a carousel, plenty of images, I think the state will get to big or it will be very slow.
There is clearly a bug where Image stops sending headers at some point.
Thanks!

[katasanirohith]

Yeah, I have tried base64 it works but the image loading is pretty slow compared to normal images and I have read online that Base64 would increase the size to 33% and it might not be a good choice for larger images. So sending the image with token would be a better choice rather than converting the byte array. What do you say? @horaciogar @dhcmega

[dhcmega]

@katasanirohith I am already sending in the url, the problem is, in my case, the token changes daily, and because it's in the url, that's bad for caching. So it's not the optimal solution, but at least it works.

[Biplovkumar]

@dhcmega same here but the solution not found in React native 0.63.2 too.