React native image uri request with cookie

Question

Im using a session based authentication system for my app, my API calls works perfectly fine, however, when requesting an Image using this:

<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 400, height: 400}} />

The request isnt authenticated

However authentication is required to retrieve the image. How would you go about this? There doesnt seem to be any documentation specifically on this

check this answer https://stackoverflow.com/questions/38370189/react-native-populate-image-with-url-that-has-been-converted-from-a-blob — Mortada, Aug 20 '18 at 23:31
im afraid thats not entirely relevant, im sending headers now but to no avail — Return-1, Aug 22 '18 at 15:24
i am trying to say first fetch your network request as you want then pass the blob result to — Mortada, Aug 22 '18 at 17:15
if i am to fetch it manually like so then yes, i can wrap a component around it. its kinda bad that it doesnt do it on its own though since the domain is still the same but anywhoo. thanks a bunch — Return-1, Aug 22 '18 at 20:53

score 6 · Accepted Answer · answered Aug 24 '18 at 21:53

6

You can pass headers with Image source:

<Image source={{
    uri: 'https://facebook.github.io/react/logo-og.png', 
    headers: {
        Cookie: 'cookie data here',
    }
}}>

Get your cookie from your API response:

fetch('apicall').then(res => {
    cookieData = res.headers.map["set-cookie"];
})

answered Aug 24 '18 at 21:53

basbase

Thank you, yes that's what i ended up with except for the part where im getting the cookie in the response im getting it using https://www.npmjs.com/package/react-native-cookies which is guaranteed to always give me the latest cookie. – Return-1 Aug 27 '18 at 07:17

1 Answers1