React-native-image-viewer: add auth headers for <Image />

[zhaonian]

const images = [
    {
        url: `${this.props.uri}`,
        props: {        
            headers: {
                Authorization: `Bearer ${this.props.authToken}`
            }
        }
    },
];

headers in props not working.
it looks like headers property only works like this:

<Image 
    source={{
      uri: 'https://facebook.github.io/react/img/logo_og.png',
      method: 'POST',
      headers: {
        Authorization: `Bearer ${this.props.authToken}`
      },
      body: 'Your Body goes here'
    }}
/>

However, in the source code line 545, there is no image.props.headers passed into the source property.

Thanks.

[ascoders]

Good question! Now 2.1.3 is released, and you can add header to image by this following code:

const images = [
    {
        url: `${this.props.uri}`,
        props: {        
            source: {
                headers: {
                    Authorization: `Bearer ${this.props.authToken}`
                }
            }
        }
    },
];

[zhaonian]

Thanks for your reply!
Unfortunately it looks like the props is still not working.
but all the images that do not contain props work perfectly as always

[ascoders]

I tried this input:

{
  url: "https://avatars2.githubusercontent.com/u/7970947?v=3&s=460",
  props: {
    source: {
      headers: {
        Authorization: `Bearer`
      }
    }
  }
}

And final props passed to <Image> is like this:

finalProps Object {
  "source": Object {
    "headers": Object {
      "Authorization": "Bearer",
    },
    "uri": "https://avatars2.githubusercontent.com/u/7970947?v=3&s=460",
  },
  "style": Object {
    "height": 375,
    "width": 375,
  },
}

Is there anything wrong?

[zhaonian]

Everything looks great to me.
However, the images that require auth headers to load still do not show up.
My work-around is: Ask the backend guys to change the image source to not requiring an auth headers, add a token in the uri instead 😵

I'll come back to this issue and look into it more when I got time.
Thanks for your help!

[ErickVoodoo]

Guys, It still actual, I've tried to look through code and noticed that:

{
  url: "https://avatars2.githubusercontent.com/u/7970947?v=3&s=460",
  props: {
    source: {
      headers: {
        Authorization: `Bearer`
      }
    }
  }
}

is the proper way, but nothing works, how can we set up headers?

[kyhnlbyrk]

The same issue still continues..

[ascoders]

Here is the right way to set header to Image: https://github.com/facebook/react-native/pull/9304/files#diff-a9a8718d9b53e6140509339957c1e155R107

And in react-native-image-zoom-viewer, you can set headers like this:

{
  url: '',
  props: {
    source: {
      headers: '..'
    }
  }
}

[kyhnlbyrk]

I did exactly like this, but it is not working.. I can not see the header at my server..

[ascoders]

@kyhnlbyrk You can try renderImage to override the image element.

[jper92]

I also have this problem, the problem by the way seems to be that width and height are not being set to the Image component when it comes from a remote (and uses bearer?), that produces probably an image of 0 width and height, look at this:

props Object {
11:45:09 [exp]   "source": Object {
11:45:09 [exp]     "headers": Object {
11:45:09 [exp]       "Authorization": "Bearer somebearer",
11:45:09 [exp]     },
11:45:09 [exp]     "uri": "http://someurl/to/img.jpeg",
11:45:09 [exp]   },
11:45:09 [exp]   "style": Object {
11:45:09 [exp]     "height": undefined, // <------ problem here
11:45:09 [exp]     "width": undefined,  // <------ problem here
11:45:09 [exp]   },
11:45:09 [exp] }

[ascoders]

@jper92 By default, will get width and height by url field: source code. So if you give params like this, will got right width and height:

const images = [
    {
        url: `http://someurl/to/img.jpeg`,
    },
];

but if you use like this:

const images = [
    {
        props: { source: require('../img.jpeg') }
    },
];

It won't fetch width and height, so get undefined. And one way is to define it's width and height directly:

const images = [
    {
        props: {
          source: require('../img.jpeg'),
          style: { width: 100, height: 100 }
        },
    },
];

[jper92]

Thanks, the downside is (as far as I know), I cannot get the size of a remote image requiring a custom header like a bearer token, unless I manually download it and store to local disk. The workaround works almost fine, but the image won't display completely full size due to the proportions

[evanjmg]

I'm going to create a fork of this to use Fast Image - which provides the size onLoad by default

[hochungwong]

You definitely have to pass width and height to image viewer like the following:

const imageViewer = [{
            url: `${img_url}`,
            width:width,
            height:height,
            props:{
                source:{
                    headers:{
                        Authorization: `Bearer ${access_token}`
                    }
                },
                                style:{...}
            }
        }];

[mohitaddval]

@kyhnlbyrk You can try renderImage to override the image element.

render your own image and everything will work like charm.

[dominik-mrugalski]

//Get width/height:
import {Dimensions} from "react-native";
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

//Array with images:
{
    url: x.payload.image.thumb_urls.md,
    width: windowWidth,
    height: windowHeight,    
    props: {
        source: {
            headers: {
                'x-authorization': 'Token ' + this.props.token,
            }
        },
        style: {
              resizeMode: "contain"
        }
    }
}

It's working like a charm without problems!
Note:
When I didn't set width/height propert then I got black screen for every image except the first one. This is a workaround for that problem (mentioned in this thread and anothers in this repo)

My original answer here:
https://github.com/ascoders/react-native-image-viewer/issues/161#issuecomment-487321393

[PaitoAnderson]

@divisble Thanks for this solution! Setting width/height worked.

Must be something to do this line, maybe because width/height doesn't work for network images even though the typings suggest it does?
https://github.com/ascoders/react-native-image-viewer/blob/31298e1fecf76d3934c071e35632598f71e61180/src/image-viewer.component.tsx#L207

EDIT: Image.getSize should probably be Image.getSizeWithHeaders?

[PaitoAnderson]

@ascoders Mind reopening this issue?