1

I'm working on a React Native project where I need to display images fetched from an API that requires an authorization token for authentication. I'm currently using the Image component from React Native to render the images, but I'm unsure how to pass the authorization token along with the image requests.

I have the authorization token stored in my application's state, and I'm wondering how I can include it in the image requests. Is there a way to append the token to the image URL or include it as a header in the request?

Here's an example of how I'm currently using the Image component:

import React from 'react';
import { Image } from 'react-native';

const MyComponent = () => {
  const authToken = 'myAuthorizationToken';

  return (
    <Image
      source={{ uri: 'https://example.com/image.jpg' }}
      style={{ width: 200, height: 200 }}
    />
  );
};

export default MyComponent;

Any help or guidance on how to include the authorization token with the image requests would be greatly appreciated. Thank you!

Waseem Kurne
  • 41
  • 7
  • Depends on how the authorization is set up. If you can embed it in the URL, you can just do it in the `uri` field. If you need to set the header, you need to get the image data first through `fetch`, etc., set it as a state and then use the state value. – technophyle Jul 08 '23 at 03:31
  • 1
    Does this answer your question? [React Native Image with 'Bearer' authentication token](https://stackoverflow.com/questions/36675682/react-native-image-with-bearer-authentication-token) – user18309290 Jul 08 '23 at 05:30
  • @technophyle In my case authorization is setup using axios. I tried the link shared by you, its not working – Waseem Kurne Jul 08 '23 at 07:26
  • cannot pass headers as a prop to image @technophyle – Waseem Kurne Jul 20 '23 at 16:12

0 Answers0