React Native Image with 'Bearer' authentication token

Question

In React Native I can use images with <Image source={{uri: 'http://my.server.com/user/id/image/id.png'}} />

The problem is that user images are protected by JWT token which I pass in the header.

Is it possible to somehow include that additional header?

What are my other options?

Thanks!

Answer 1

You can send headers in the source prop.

<Image
    source={
    { uri: 'https://yourdomain.com/get-image',
      headers: {
                Authorization: 'Bearer xyz'
               }
            }
     }/>

you can specify other parameters as well: ImageSourcePropType.js

Answer 2

For me the answer from blink281 didn't work. It seems this is a common Android problem according to this thread https://github.com/facebook/react-native/issues/25945 and while writing this it's not fixxed. I was looking for another solution and the answer from Samuli Hakoniemi helped me build one, so i wanted to share a fully working example as his Link is not working anymore.

I created an external Component called NetworkImage for this.

import React from "react";
import { StyleSheet, View, Image } from "react-native";

class NetworkImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      base64: null,
    };
    this.style = props.style;
    this.imageId = props.imageId;
    this.token = props.token;
  }
  componentDidMount() {
    var imageUri = "/auth/diary/image/" + this.imageId;
    fetch(imageUri, {
      method: "GET",
      headers: {
        Pragma: "no-cache",
        "x-access-token": this.token,
      },
      redirect: "follow",
    })
    .then((res) => res.text())
    .then((content) => {
      let data =
        "data:image/jpeg;base64," +
        content.substring(1, content.length - 1);
      this.setState({
        base64: data,
      });
    });
    });
  }
  render() {
    return <Image style={this.style} source={{ uri: this.state.base64 }} />;
  }
}

export default NetworkImage;

In this case i had to prepend "data:image/jpeg;base64," because the data i got is raw without the datatype.

Answer 3

    import RNFetchBlob from "rn-fetch-blob";

    const { config, fs } = RNFetchBlob;
    let PictureDir = fs.dirs.PictureDir;
    let date = new Date();
    let options = {
      fileCache: true,
      addAndroidDownloads: {
        //Related to the Android only
        useDownloadManager: true,
        notification: true,
        path:
          PictureDir +
          "/Report_Download" +
          Math.floor(date.getTime() + date.getSeconds() / 2),
        description: "Risk Report Download",
      },
    };
    config(options)
    .fetch('GET', url, {
      Authorization: token,
      
    })
      // when response status code is 200
      .then((res) => {
        // the conversion is done in native code
        console.log(JSON.stringify(res));
        alert('report download successfully')

      })
      // Status code is not 200
      .catch((errorMessage, statusCode) => {
        // error handling
        console.log('errorMessage', errorMessage);
        console.log('statusCode', statusCode);

      })

that's all. enjoy your coding...