Search code examples
react-nativereact-native-image

React native image uri request with cookie

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

Solution

  • 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"];
})