React-native image with headers

Question

How to pass headers into Image element?

This approach does not fit due to impossibility to cache images and base64 conversion will be hard with small RN Js-thread
https://stackoverflow.com/a/36678631/6119618

This is not working at all on neither android nor ios
https://stackoverflow.com/a/44713741/6119618

I don't want yet eject my project, so modules like FastImage and others using react-native link will not work

UPD
tried to launch the same app on ios and images aren't showing up. Android works

The second answer in that post is recommended by [official doc](https://facebook.github.io/react-native/docs/images.html#network-images), I think you should check your code — Harlan, Aug 23 '17 at 03:18
@harlan I cannot make it work. I'm passing url and headers the same as into postman. Postman 200 OK, react native not showing image. Image size is big, no styles like opacity, position absolute and others — IC_, Aug 23 '17 at 09:42
Did you try to capture the network packages and analyse the true cause? Are you sure the request send by react native is wrong? — Harlan, Aug 23 '17 at 09:59
I use Wireshark and Charles, But in RN, this post may help you. [https://stackoverflow.com/a/38063958/2444365](https://stackoverflow.com/a/38063958/2444365) this may help you. — Harlan, Aug 23 '17 at 10:32
@Harlan wireshark doesn't see http requests from rn app only `/onchange` and packager http requests. I didn't understand how to use charles — IC_, Aug 23 '17 at 11:02
How are you determining that it's a header problem? Is the server getting those requests? Did you perhaps forget to set width/height to your images? — Kraylog, Aug 29 '17 at 11:17
@nimrod no, i tried to replace uri with image that doesn't require headers, it showed up. width and height are set. — IC_, Aug 29 '17 at 11:32
I think that without showing us the code you tried, it's going to be very difficult to diagnose. — Kraylog, Aug 29 '17 at 11:36
@nimrod i perform everything need to share code to you and chat you tomorrow — IC_, Aug 29 '17 at 12:07
@nimrod@harlan sorry guys, it was bug of mine. Thanks all, everything works as it should — IC_, Aug 30 '17 at 09:21
Might be a silly question but are using the true React Native Image component or some abstraction from it because the above works fine for me on the raw Image component but not on the NativeBase Image (for example). — flyandi, Aug 31 '17 at 14:35

score 1 · Answer 1 · answered Sep 06 '21 at 17:24

The better approach would be something like this.

import { Image } from 'react-native';

<Image 
  source={{ 
    uri: 'source uri',
    headers: {
      ...headers
    }
  }}
/>

Above method would work for almost every case, However you can also separately fetch the image using fetch api or axios (pass the headers in the request). Then store the base64 in state and then use that as uri.

score 0 · Answer 2 · answered Jun 24 '21 at 10:56

Very Easy

<FastImage or <Image
              style={{
                //your style
              }}
              source={{
                //your source
                uri: props.item.img,
                //your headers
                headers: {
                //authorization example
                  Authorization: 'Basic bmFzc2VyOmw2NTExZzhrXyZ1SA==',
                },
              }}
/>

IC_ · Answer 3 · 2017-09-01T00:46:38.133

-1

After long time i turn out that all the problems about this theme caused by issues in my code. Who did know that borderRadius 1000 rounds off that so strong, that element becomes fully rounded from within. Question is closed, thanks all

edited Sep 01 '17 at 00:46

answered Aug 30 '17 at 09:22

IC_

1,624
1
23
57

React-native image with headers

3 Answers3